“小巧玲珑，却蕴藏美好”，这句话用来形容小小的网站图标（favicon）再合适不过了。这些微小的品牌标识自1990年代（Internet Explorer时代），就出现在网页浏览器中，显示在浏览器标签页和书签栏里。网站图标是视觉提醒符，帮助客户将你的网站与公司的品牌形象联系起来。
是时候告别通用的浏览器图标了。只需很短时间，你就能创建一个令人印象深刻的网站图标，帮助客户在拥挤的浏览器标签页中轻松导航。
什么是网站图标？
网站图标是显示在网页浏览器标签页、书签栏、收藏夹栏、浏览历史记录和搜索引擎结果页面（SERP）中页面标题旁边的小图标。
Favicon是“favorite icon”（收藏图标）的合成词，它作为网站的视觉书签，帮助用户在打开多个标签页时轻松识别网页。当网站最小化时，网站图标可能显示为任务栏快捷图标。当用户收藏你的网站时，网站图标同时充当书签图标，让用户更容易在众多保存的网页中找到你的网站。
在某些操作系统中，将URL从浏览器窗口拖拽到桌面，会创建桌面快捷图标。浏览器网站图标通常也会被用作快捷图标。
使用网站图标的好处
网站图标不会神奇地提升你网站的搜索引擎优化（SEO）排名，但添加网站图标以及其他用户体验设计改进，可以让网站更加用户友好。以下是网站图标影响网站表现的几种方式：
1. 提高点击率
谷歌和其他搜索引擎会在搜索结果中显示网站图标。引人注目或容易识别的网站图标，可以提升品牌认知度，让用户更有可能访问你的网站。这会提高点击率（CTR），这是SEO的重要电商指标。
2. 建立品牌知名度
当网站图标强化你的品牌Logo时，它就像在用户书签栏、网站标签页和搜索引擎结果页面中的免费广告，可以提高品牌知名度。
3. 改善用户体验和停留时间
容易识别的网站图标，可以增加用户收藏网页的可能性，这种行为被谷歌等搜索引擎识别为积极信号。这种微小的用户体验改进会鼓励回访，增加网站流量和用户停留时间（即用户在返回搜索引擎结果页面之前，在网页上停留的时间）。
创建网站图标的指导原则
一个优质的网站图标，需要符合特定的尺寸和文件格式要求：
1. 选择合适的尺寸
网站图标的理想尺寸是16像素 × 16像素，不过有些网站图标设计为32像素 × 32像素或48像素 × 48像素。16 × 16尺寸在所有网页浏览器显示中都受支持——无论是地址栏、标签页还是书签视图。这是最安全的选择。
2. 选择兼容的文件格式
原始文件格式对图像转换为网站图标的效果起着关键作用。创建网站图标时，最常用的文件格式是PNG格式和ICO格式。PNG文件包含无损数据压缩和透明度，因此在缩放时，图像质量不会受损。ICO文件用于Microsoft Windows资源管理器，包含多种尺寸和颜色深度的一个或多个图像，因此可以很好地缩放。SVG格式的浏览器支持不够广泛，但加载速度快，并且可无限缩放。应避免使用JPEG等在缩小时会丢失图像数据的格式。
3. 考虑动画网站图标
动画GIF或Javascript文件能增加吸引力，但它们有局限性，其中之一就是浏览器兼容性。请在多个浏览器中测试你的动画网站图标，因为在Google Chrome上看起来很棒的效果，可能在其他浏览器上无法正常显示。
热门网站图标生成器
你可以使用在线网站图标生成器，制作符合品牌形象的自定义网站图标。以下是一些热门选择：
- Favicon.io让你从图像文件、链接或文本创建网站图标，并将其转换为不同格式。下载转换后的文件，将它们放在网站的根目录中，复制链接标签，然后粘贴到HTML页面的head标签中。
- Real Favicon Generator是一个交互式API，让你指定如何处理主图像来生成网站图标。
- Favicon Generator可以按平台创建网站图标，让你看到设计在不同平台和浏览器上的显示效果。
- Dan's Tools的Favicon.ico & App Icon Generator，让你上传现有图像，并将其转换为ICO格式，或浏览图标库中的设计。
如何在HTML中添加网站图标
创建网站图标后，你需要将其上传到网站并添加代码，以便浏览器和网络应用程序可以显示它。
指向网站图标的指针，在网站HTML文件的<head>部分中显示为一行代码。浏览器读取head标签中的指令，来查找网站图标并显示它。假设你的网站图标文件是名为“brandXicon.png”的PNG文件。只需在<head></head>标签内，添加这行代码：
<link rel=“icon” type=“image/png” rel=“noopener” target=“_blank” href=“/brandXicon.png”>
网站图标可以出现在网站的任何目录中。在这个例子中，它包含在网站的根目录中，这是一个常见位置。请确保文件路径准确。
你也可以有多个网站图标尺寸，并全部加载。你需要为每个尺寸添加一行代码，全部放在<head> </head>标签内。为每个尺寸指定唯一的文件名，并在代码中添加“sizes”属性，如下所示：
<link rel=“icon” type=“image/png” sizes=“16x16” rel=“noopener” target=“_blank” href=“/brandXicon16x16.png”>
<link rel=“icon” type=“image/png” sizes=“32x32” rel=“noopener” target=“_blank” href=“/brandXicon32x32.png”>
如何在Shopify网站中添加网站图标
如果你有Shopify网站，可以轻松添加网站图标，无需任何编码：
1. 在桌面网页浏览器中，进入你的在线商店管理面板。
2. 选择“模板” > “自定义”，打开模板编辑器。
3. 点击“模板设置”，寻找齿轮图标。
4. 选择网站图标（在某些模板中，称为“Logo”）。
5. 从商店库中选择图像，或上传新图像。
6. 如果可用，为网站图标编辑“替代文本”，以提高可访问性。当用户将鼠标悬停在网站图标上时，会显示此文本。
7. 保存工作，并在不同浏览器中测试网站图标的性能。
有关从iPhone或Android设备添加网站图标的更多信息，请参阅相关的Shopify帮助主题。
如何在WordPress中添加网站图标
如果你的在线商店是WordPress网站，以下是添加网站图标的分步指南：
1. 进入WordPress仪表板，并点击外观。
2. 点击自定义，查看选项列表。
3. 点击站点标识。这控制标题、标语和Logo等内容。
4. 在站点图标部分，点击“选择站点图标”，上传新的网站图标图像。
5. 点击“发布”上线。
6. 在各种网页浏览器中测试网站图标的显示效果。
如何在Wix中添加网站图标
Wix网站自带默认的网站图标，但高级套餐的会员可以自定义。要更改Wix网站上的网站图标：
1. 在网站仪表板中，进入设置。
2. 在网站图标旁边，点击管理。
3. 点击上传图像或点击上传媒体，从计算机上传图像。
4. 点击添加到页面。在浏览器标签页中，预览网站图标的显示效果。
5. 点击保存，然后发布。
网站图标常见问题
网站图标和Logo是一回事吗？
网站图标的例子是什么？
网站图标显示为地址栏中的网站URL图标，或网页浏览器中的标签页图标。它帮助用户在视觉上识别网站。例如，Shopify的网站图标，使用Logo中带有“S”的购物袋。
有设计网站图标的工具吗？
是的，有很多工具可以帮助你为网站设计网站图标。其中一些甚至是免费的。在线网站图标生成器的例子包括Favicon.io和Real FavIcon Generator。
