如何创建Retina-Caliber Favicons

几个月前,我决定重新创建这个网站图标支持视网膜口径显示器我发现这比我预想的更难实现,主要是因为缺乏良好的ICO精明图标创建工具。

Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px支持视网膜的懒惰方式是用32 px文件替换旧的16 px favicon.ico文件,并允许非视网膜浏览器缩放图像然而,正确的解决方案是创建一个包含两个图标资源的favicon.ico文件:一个16×16,另一个32×32ICO文件也支持其他解决方案,但我认为这样做没有实际效用。1

我发现效果最佳的应用是图标板岩,由科德利安它在Mac App Store中的售价为5美元,值得每一分钱这很简单首先,在您选择的图像编辑应用程序中创建16×16和32×32像素图标 - 可能是Acorn,Pixelmator或Photoshop将每个图标大小导出到其自己的PNG文件你用它们命名并不重要。

接下来,在Icon Slate中创建一个新项目更改构建设置以仅输出ICO(默认为输出ICO和ICNS)将16和32像素图标的PNG文件拖动到项目窗口中的相应图像孔中忽略其他各种图标大小建立就是这样 - 你现在应该有一个包含两个图标资源的favicon.ico,一个用于非视网膜,一个用于视网膜。


我找不到适合我需要的其他工具Apple有一个名为的免费开发人员工具图标作曲家看起来像我们想要的那样(与Icon Slate几乎相同 - 在其他地方编辑图像的拖放目标),但生成的ICO文件不能在Chrome中呈现,显然在Windows上无法正常呈现。

iConvertIcons不做多资源ICO也没有Image2Icon有一个名为命令行的工具png2ico但它不能处理alpha通道透明度,显然是通过设计,所以它只适用于全帧图标。

X-Icon编辑器是Thomas Fuchs推荐的免费网络应用程序Retinafy您的网站流程图,但我发现它的问题(除了一般的网络应用程序固有的笨拙)是它对颜色做了可怕的事情 - 它生成的ICO文件中的颜色与我的源PNG文件中的颜色不匹配。


  1. 大多数具有视网膜口径的网站完全按照我的建议进行操作:一个带有两个图标资源的单个ICO文件,16和32像素。苹果但是,这是一个奇怪的鸭子他们有资源:两个,分别为16和32像素Opening it in Preview shows all four resources; I’m not aware of any other icon display app that isn’t confused by multiple resources of the same pixel dimensionsApple文件中的前两个图标使用alpha通道,但后两个图标似乎有硬编码的抗锯齿工件不确定他们如何制作这个或者额外的资源是什么,兼容性方面I presume ancient versions of Internet Explorer. ↩︎