如何拥有多个favicon大小,但默认只提供16x16？

Question

通常,以多种尺寸提供favicon.ico被认为是一种很好的做法,因为这种方式在制作快捷方式或固定网站时看起来更好(IE9).虽然这样做会减少10倍,但这会导致网站加载速度变慢(在我的情况下,16x16的图标是1kb,16,32,64 = 30kb).

Facebook和雅虎等网站默认提供16x16的图标,大小不超过1kb,但是当您固定这些网站时,使用的图像大小合适.我假设只有在需要时才会加载更大的图片,从而解决了两难问题.我没有成功地弄清楚这些网站是如何做到这一点的.有人知道吗？

Answer 1

更新:

我的原始答案如下,但是,自从写这篇文章后,我相信可能有更好的方法来处理带有HTML 5的Favicons.我会为Internet Explorer 9及更低版本创建一个32x32的图标(仅适用于那个尺寸)但是使用其他方法来创建其他浏览器(包括移动设备)的更高分辨率的favicons(PNG文件类型).您可以在此处查看我的答案以获取更多信息.

问题的原始答案:

以下是它的完成方式:

1. 下载png2ico.提取到c:\

2. 在您喜欢的程序中创建您的图标.创建64x64,32x32,16x16.(注意:可能不需要64x64并且会增加文件大小.但是,至少使用32x32和16x16)另存为icon-64.png(对于64x64大小)icon-32.png(32x32)和icon-16.png( 16x16)与png2ico位于同一文件夹中.保持颜色最小化.

3. 打开命令提示符 - 将目录更改为png2ico文件夹.(cd \png2ico)

4. 进入正确的目录后运行此命令:

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png
   

   注意:添加64x64大小图标的文件大小差异使文件增加了2kb.我只想使用32x32和16x16.(运行与上面相同的代码删除icon-64.png)

5. 从png2ico文件夹中获取favicon.ico文件.上传到服务器添加<link rel="shortcut icon" href="http://example.com/favicon.ico" />到标题,你很高兴.

当你在它的时候,继续为iPad和iPhone创建图标.您可以在此处找到有关建议尺寸的更多信息以及如何在您的网站中实施这些尺寸.

也更普遍的信息在网站图标可以在这里找到.

注意:我不知道这是Facebook或雅虎是如何做到的,但这回答了你如何做到的问题.

Answer 2

Facebook"favicon.ico"包含两种尺寸:16x16和32x32.我相信你知道如何将两个ico图像组合成一个,然而,"技巧"是他们使用两个极其优化的图像.

我发现Photoshop创建了膨胀的PNG文件和膨胀的ICO文件.(注意:Photoshop需要一个插件才能创建ICO文件.)

我发现创建微小的,优化的ICO文件的最好方法是使用一个名为"Gimp"的着名免费图像编辑器.简而言之,只需按照本教程创建ICO文件:
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
重要提示:当您进入该步骤时为了保存.ico图像,您可以指定每像素位数(bpp),将其更改为4bpp或类似的东西(您必须尝试在不降低图像质量的情况下查看有多低).

使用上面的说明,我能够创建一个包含16x16和32x32图像的1kb图标.相比之下,我可以使用Photoshop,插件和其他各种工具获得相同的图标,最小的是5kb.

Answer 3

或者你可以登录任何安装了ImageMagick的linux盒子,将源图像(分辨率至少为256x256像素和PNG格式文件)重命名为'favicon.png',并运行以下命令:

convert favicon.png -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 57x57 \) \
      \( -clone 0 -resize 64x64 \) \
      \( -clone 0 -resize 72x72 \) \
      \( -clone 0 -resize 110x110 \) \
      \( -clone 0 -resize 114x114 \) \
      \( -clone 0 -resize 120x120 \) \
      \( -clone 0 -resize 128x128 \) \
      \( -clone 0 -resize 144x144 \) \
      \( -clone 0 -resize 152x152 \) \
      \( -clone 0 -resize 180x180 \) \
      \( -clone 0 -resize 228x228 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

而且你会将你的favicon.ico与大多数知名格式一起烘焙到一个文件中.

此外,请务必查看favicon备忘单@ https://github.com/audreyr/favicon-cheat-sheet以获取更多favicon信息.