如何拥有多种图标大小，但默认情况下仅提供 16x16？

Question

一般来说，以多种尺寸提供 favicon.ico 被认为是一种很好的做法，因为这样在创建快捷方式或固定站点 (IE9) 时看起来会更好。不过，这样做会使网站图标的大小轻松增加十倍，从而导致网站加载速度变慢（在我的例子中，16x16 网站图标为 1kb，16、32、64=30kb）。

Facebook 和 Yahoo 等网站默认提供小于 1kb 的 16x16 图标，但当您固定这些网站时，使用的图像大小合适。我假设只有在需要时才加载较大的图片，这解决了这个困境。我一直试图弄清楚这些网站是如何做到这一点的，但没有成功。有人知道这个吗？

Answer 1

更新：

我的原始答案如下，但是，自从写这篇文章以来，我相信可能有更好的方法来使用 HTML 5 处理 Favicons。我会为 Internet Explorer 创建一个 32x32 favicon（仅限该尺寸） 9 及以下版本，但使用其他方法为其他浏览器（包括移动设备）创建更高分辨率的图标（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 文件。将其上传到服务器，在标题中添加 即可。

当您这样做时，请继续为 iPad 和 iPhone 创建图标。 您可以在此处找到有关推荐尺寸以及如何将其实施到您的网站中的更多信息。

此外，还可以在此处找到有关网站图标的更多一般信息。

注意：我不知道 Facebook 或雅虎是否这样做，但这回答了您关于如何做到这一点的问题。

Answer 2

Facebook“favicon.ico”包含两种尺寸：16x16 和 32x32。我确信您知道如何将两个 ico 图像合并为一个，但是，“技巧”是他们使用两个极其优化的图像。

我发现 Photoshop 会创建臃肿的 PNG 文件和臃肿的 ICO 文件。 （注意：Photoshop 需要一个插件来创建 ICO 文件。）

我发现创建小型、优化的 ICO 文件的最佳方法是使用名为“Gimp”的著名免费图像编辑器。简而言之，只需按照本教程创建 ICO 文件即可：
https://www.catalyst.net。 nz/news/creating-multi-resolution-favicon-include-transparency-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-备忘单 了解更多网站图标信息。

Answer 4

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

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

对于您关于为什么 Facebook 和 Yahoo 能够拥有高分辨率“固定”图像的问题，这是因为他们也有 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" 之后）。

希望它对某人有帮助。 :)