Question

通常，以多种尺寸提供favicon.ico被认为是一种很好的做法，因为这种方式在制作快捷方式或固定网站时看起来更好（IE9）。尽管如此，一个favicon的大小容易增加十倍，这会导致网站加载速度变慢（在我的情况下，16x16 favicon是1kb，16,32,64 = 30kb）。

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

Answer 1

<强>更新

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

问题的原始答案 ：

以下是如何做到的：

Download png2ico。提取到c：\
在您喜欢的程序中创建您的图标。创建64x64,32x32,16x16。（注意：可能不需要64x64并且会增加文件大小。但是，至少使用32x32和16x16）另存为icon-64.png（对于64x64大小）icon-32.png（32x32）和icon-16.png（ 16x16）与png2ico位于同一文件夹中。保持颜色最小化。
打开命令提示符 - 将目录更改为png2ico文件夹。（cd \png2ico）
进入正确的目录后，运行以下命令：
```
png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png
```
注意：添加64x64大小图标的文件大小差异使文件增加了2kb。我只想使用32x32和16x16。（运行与上面相同的代码，删除icon-64.png）
从png2ico文件夹中抓取favicon.ico文件。将其上传到服务器，将<link rel="shortcut icon" href="http://example.com/favicon.ico" />添加到标题中即可开始使用。

当你在它的时候，继续为iPad和iPhone创建图标。 You can find more info on recommended sizes here and how to implement them into your site

此处还可以找到关于Favicons的more general info。

注意：我不知道这是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格式文件）重命名为＆＃39; favicon.png＆＃39;，然后运行以下命令：

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信息。

Answer 4

如果您喜欢脚本，我写了一个使用ImageMagick将任何图像转换为多分辨率图标。

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

关于为什么Facebook和雅虎能够获得高分辨率“固定”图像的问题，这是因为他们还有apple-touch-icon和og:image。

Answer 5

Windows批处理文件，它创建多个大小的.PNG并将它们合并为一个.ICO文件：

@echo off

set inkScape="C:\SOFTWARE\GRAPHIC\INKSCAPE\inkscape.exe"
set imageMagick="C:\SOFTWARE\DEVELOPER\IMAGEMAGICK\magick.exe"
set fileName=favicon
set importType=svg
set exportType=png
set exportDpi=300
set imageSizes=(16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 180 192 196 256 300 320 400 450 460 480 512 600)

for %%s in %imageSizes% do (
 %inkScape% -z -f %~dp0%fileName%.%importType% -w %%s -h %%s -e %~dp0%fileName%-%%sx%%s.%exportType% -d %exportDpi%
 echo CREATED: %fileName%-%%sx%%s.%exportType%
 set e=%fileName%-%%sx%%s.%exportType%
 call :concat (e)
)

%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"
echo MERGED IN: %fileName%.ico

pause goto :eof


:concat (e) (
 set exportFileNames=%exportFileNames%"%~dp0%e%" 
)

如果不需要.PNG文件，则可以通过del FILE删除（或删除）它们，或者将所有PNG保存在可以删除的目录中（在%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"之后）。

希望它对某人有帮助。：）

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

5 个答案: