网站图标（Favicon）

网站图标（Favicon）尺寸要做成多少像素？

网站图标通常不是一个尺寸就够了，而是要针对不同显示位置准备几种合适的尺寸。因为浏览器标签页、Google搜索结果、手机主屏幕使用的尺寸各不相同。

Google搜索中心建议把网站图标做成正方形（1:1），并且准备大于48×48像素的尺寸，以便在各种屏幕上都显示清晰。如果使用Web应用配置文件（manifest），web.dev建议至少放入192×192和512×512的图标。

下表是常用的准备清单。实际需要哪些文件，会因网站的搭建方式略有不同，和制作公司一起确定就可以。

网站图标一旦确定，最好长期使用。顾客会通过标签页和收藏夹里的图标形状来记住店铺，经常更换反而更难找到。

网站图标文件格式选ICO、PNG还是SVG好？

现在常见的做法是以PNG为基础，需要时再同时放上ICO和SVG。Google表示支持ICO · PNG · GIF · JPEG等多种格式。

ICO是较老的格式，一个文件里可以包含多种尺寸，几乎所有浏览器都能识别。SVG放大也不会失真，但目前还不是所有地方都支持，所以同时放一份PNG比较稳妥。

iPhone在主屏幕上不用普通的网站图标，而是使用一种名为“apple-touch-icon”的单独图标。这个图标要用实色背景而不是透明背景，在主屏幕上才显得整洁。

SVG网站图标还可以做成根据深色模式设置自动变色。不过各浏览器的支持情况不同，如果不是非用不可，做一款在浅色 · 深色界面下都看得清的设计会更简单。

网站图标怎么制作、怎么加到网站上？

只要有Logo文件，几步就能做好。无论是自己做还是交给制作公司，了解流程都更方便检查成品。

现在有些建站工具或框架，只要把图标文件放进指定文件夹，就会自动生成关联代码。是否需要手动加代码，问一下制作公司就知道了。

大尺寸的原始文件一定要保存好。因为以后需要新尺寸时，把小文件重新放大会变得模糊。

如果用和网站图标相同的设计统一分享预览图和社交媒体头像，顾客无论在哪里看到，都更容易认出是同一家店。

1. 01从Logo中挑出缩小后也能认出来的部分（首字、标志图形）。
2. 02在正方形画布上把这部分放大摆放，四周只留一点边距。
3. 03先做出512×512这样的大尺寸原图，再从中导出需要的小尺寸。
4. 04确认缩小到16×16 · 32×32时形状也能看清，如果糊成一团，就把线条加粗。
5. 05在网站首页的头部（head）加入“icon” · “apple-touch-icon”关联代码。
6. 06分别在浏览器标签页、手机添加到主屏幕、浅色 · 深色标签页界面中检查效果。

Google搜索结果里为什么不显示网站图标？

大多是漏掉了Google要求的某一项条件。Google说明，网站图标的关联代码必须放在网站首页上，而且Google的搜索爬虫必须能同时读取首页和网站图标文件。

每个网站地址（主机）只认可一个网站图标，子路径（例如：域名/shop）的首页不会被单独认可。另外，不要频繁更改网站图标文件的地址也很重要。

即使条件全部满足，也不会马上生效。Google表示重新抓取可能需要几天到几周，用Search Console的网址检查工具请求将首页编入索引，可能会快一些。还要知道，即使符合条件，也不保证一定会显示。

如果搜索结果里显示的是默认图标而不是您的图标，多半是Google还没找到网站图标，或者认为它不符合条件。请把上述条件逐一重新检查一遍。

不同行业的网站图标怎么设计？

网站图标是帮顾客在几十个标签页中找到您店铺的标识，所以比起行业图案，店铺独有的造型更有用。咖啡杯、剪刀这类常见图案，很难和其他店区分开。

颜色只用Logo的一种主色，缩小后最清晰。渐变或细线条在16像素的尺寸下几乎看不出来。

做好之后，实际在多个标签页之间打开对比看看。在常用网站的图标旁边，您的图标能不能一眼被看到，是最可靠的标准。

• 咖啡馆：把店名首字放进品牌色的圆形里。
• 美发店：只取Logo中的标志图形，用粗线条重新绘制。
• 手作工坊：如果是手写体Logo，缩小后就认不出来了，只用一个首字母。
• 网店：很多顾客会同时开着好几个购物网站的标签页，所以要加大颜色对比，让图标更醒目。

网站图标常见的错误有哪些？

最常见的错误是把横长的Logo原样塞进正方形，结果显示得非常小。在透明背景上只放黑色Logo，导致在深色标签页界面上看不见的情况也很多。

也有建站工具的默认图标没换掉、原样留着的情况。上线前只要看一眼标签页就能发现，一定要确认。

如果换了网站图标文件，自己电脑上却还是老样子，大多是因为浏览器缓存了以前的图标。用其他浏览器或无痕窗口打开，就能确认是否已更换。

关于网站图标，该向网站制作公司确认什么？

上线前向制作公司确认下面四项，图标在标签页 · 搜索 · 手机主屏幕上都能清晰显示。

• 浏览器标签页 · Google搜索 · 手机主屏幕用的图标都会制作吗？
• 为了在深色界面下也能看清，有没有加背景或边框？
• 有没有屏蔽Google搜索爬虫读取网站图标文件？
• 能拿到原始文件（大尺寸）吗？