Favicon

Favicon 是几乎所有浏览器支持显示在标签页上的小图标,同时也用在收藏夹中,做为网址前的图标显示。详细信息可以前往 Favicon - Wikipedia 了解。

首先将需要做为 favicon 的图片缩小到 32*32 大小,然后将其转换到 ico 格式。Photoshop 默认并不支持 ico 格式,可以先保存成 png 格式,然后使用在线工具 ConvertICO.com - Convert PNG to ICO and ICO to PNG 将其转换为 ico 格式。

参考 Adding a favicon to a static HTML page - Stack Overflow 链接,为了获得较好的兼容性,可以使用 BASE64 将图片直接存放在网页的 head 中,这样可以直接在 Firefox、Chrome、Safari 中直接显示出来图标。而如果只是单纯地使用放在网站根目录的 favicon.ico 则部分浏览器无法显示图标。

转换图片为 BASE64 可以使用 Base64 File Encoder

Safari 收藏图标

Safari 收藏图标是苹果系统显示个人收藏中的图标,同时在 iOS 系统中也可以作为添加到主屏幕上网站快捷方式的图标。

首先在网站根目录下放置 apple-touch-icon.png 图片。然后在网页 head 中增加 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 即可。

Configuring Web Applications

最终结果

website-icon