这天,我在我的网站上采用新的应用结构并且决定顺手补齐 Web 根目录下的 favicon.ico 图标文件。

第一种:全手工制作

一开始,没有标准的制作流程,于是自动寻找可靠的模版。我之前下载过微软网站首页上的图标文件,那是一个放在网站根目录的 favicon.ico 静态文件,并且用 GIMP 打开这种格式的图标后能看到里面同时容纳了 6 张图层,而且每一张图层都是带有 Alpha 通道。把它作为图标放到网页上,浏览器就从这个文件里自动选用大小适合的图层显示出来。此表格,列出了图标内每一张图层的尺寸 👇

 图层 1 2 3 4 5 6
 尺寸 128×128 72×72 48×48 32×32 24×24 16×16

准备工具

GIMP,这是个开源的 P 图神器。

加工流程

  • 在工作区里导入原本的 JPG 照片
  • 给整张图片添加 Alpha 通道
  • 将白色背景转换成透明
  • 按照上面的列表复制成 6 张大小不同的图层
  • 导出压缩 PNG 图层的 .ico 格式

第二种:自动生成全平台图标

这里所谓的全平台图标就是泛指 iOS, Android, PC/Mac 这些平台的应用图标。比如以下常用的格式:

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • browserconfig.xml
  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • manifest.json
  • mstile-150x150.png
  • safari-pinned-tab.svg

现在你只需要一张原始图片和一个图标生成器即可快速生成适配所有平台的图标文件,而我已经做好了。

恭喜你,完成了!?

浏览我的图标库:iOS Safari | Android Chrome | Windows 10 | MacOS Safari | Classic


Favcion = favorites icon, 主流的图标名称是 favicon.ico。而 .ico 这种图标格式可能就是微软最早定义的(关于这个,可以看看 MSDN Library 的 档案,它是一种可以容纳某一图标的多张不同尺寸和色深的图层的文件格式。

.ico 图标格式历史:1995 年的 Windows 操作系统支持了这种格式,而 1999 年的 IE5 浏览器 最早将其应用到了互联网上,之后的浏览器都支持了这一特性。如今的网站,无论它们的系统环境其实是 Linux 还是 Windows,其 Web 根目录下面都可能放着一个类型为 Windows icon image 的文件。

GIMP 的 bug:也许只有我在 OS X 10.13.6 上使用 GIMP 2.10 才会经常遇到导出图片时窗口按钮失灵的问题,目前无解…

古登堡:在用 WordPress 编辑这篇文字的时候体验了最新的编辑器——Gutenberg(古登堡)。给它一个评价就是:用起来非常舒适!