浏览器和设备真正需要的favicon尺寸

以前favicon只是一张16×16的小图片。现在浏览器标签页、手机主屏幕的快捷方式、书签栏和苹果触控图标各自都期待自己的尺寸,只提供一种尺寸会让其中一些场景要么显得模糊,要么显示一个通用的备用图标而不是你的图标。

为什么一种尺寸不够

一个16×16的图标被放大去填满180×180的主屏幕图标位置,看起来会和任何被放大拉伸的小图片一样有块状感——没有办法添加源图中本就没有的细节。favicon出现的每种场景都有自己期望的分辨率,现代做法是提供一组尺寸,而不是依赖浏览器把一个小文件拙劣地放大。

值得覆盖的尺寸

• 16×16和32×32——经典的favicon尺寸,用于大多数桌面浏览器的标签页和书签列表。
• 180×180——当页面被添加到iPhone或iPad主屏幕时,苹果期望的主屏幕图标尺寸。
• 192×192和512×512——用于安卓,以及可安装网页应用的主屏幕图标和启动画面的网页应用清单。

让设计在16px时依然清晰可辨

Favicon生成器接收一张源图片,完全在浏览器中一次性生成全套标准尺寸——但没有任何生成器能修复一个本来在小尺寸下就不起作用的设计。精细的细节、细线条和小字在16×16时会完全消失;一个简单、粗壮、缩小后依然可辨认的形状或字母,才是无论从中生成多少种尺寸,在浏览器标签页里真正清晰可读的东西。