如何具有多个Favicon大小，但默认情况下仅投放16x16? [英] How to have multiple favicon sizes, yet serve only a 16x16 by default?

问题描述

通常认为，为favicon.ico提供多种尺寸是一种好的做法，因为这样可以在制作快捷方式或固定网站(IE9)时看起来更好.这样一来，收藏夹图标的大小很容易增加十倍，这会导致网站加载速度变慢(在我的情况下，16x16的收藏夹图标为1kb，16、32、64 = 30kb).

Generally it is considered good practice to serve favicon.ico in multiple sizes, because that way it looks better when a shortcut is made or the site is pinned (IE9). The size of a favicon easily increases tenfold by doing so though, which results in slower site loading (in my case the 16x16 favicon is 1kb, the 16, 32, 64=30kb).

Facebook和Yahoo等网站默认情况下会提供小于1kb的16x16网站图标，但是当您固定这些网站时，使用的图像大小合适.我假设只在需要时才加载较大的图片，从而解决了这一难题.我一直在尝试弄清楚这些网站是如何做到这一点的，但未成功.有人知道吗?

Sites like Facebook and Yahoo serve a 16x16 favicon by default that is <1kb, but when you pin these sites, the image used is proper size. I assume the larger picture is loaded only when needed, which fixes the dilemma. I have unsuccessfully been trying to figure out how these sites do this. Does anybody know this?

推荐答案

更新:

下面是我的原始答案，但是，由于写这篇文章，我相信可能会有更好的方法来用HTML 5处理Favicon.我会为Internet Explorer 9及以下版本创建32x32 favicon(仅该大小)，但使用其他为其他浏览器(包括移动设备)创建更高分辨率的图标(PNG文件类型)的方法.您可以在此处查看我的答案以获取更多信息.

My original answer is below, however, since writing this post I believe there may be a better way to handle Favicons with HTML 5. I would create a 32x32 favicon (only that size) for Internet Explorer 9 and below but use other methods for creating higher resolution favicons (PNG file type) for other browsers including mobile devices. You can see my answer here for additional information.

问题的原始答案 :

Original Answer to Question:

这是可以完成的方法:

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

在您喜欢的程序中创建图标.创建一个64x64、32x32、16x16. (注意:可能不需要64x64，并且会增加文件大小.但是，请至少使用32x32和16x16)另存为icon-64.png(适用于64x64大小)icon-32.png(32x32)和icon-16.png( 16x16)放在png2ico所在的文件夹中.尽量减少颜色.

Create your Icons in your favorite program. Create a 64x64, 32x32, 16x16. (Note: 64x64 is probably not needed and will increase file size. However, use at least 32x32 and 16x16) Save as icon-64.png (for 64x64 size) icon-32.png (32x32) and icon-16.png (16x16) in the same folder as png2ico. Keep the colors to a minimum.

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

Open Command Prompt - Change directories to the png2ico folder. (cd \png2ico)

在正确的目录中再次运行以下命令:

Once in the right directory run this command:

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

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

Note: The difference in file size for the addition of a 64x64 size icon increased the file by 2kb. I would just use 32x32 and 16x16. (Run same code as above removing icon-64.png)

从png2ico文件夹中获取favicon.ico文件.将其上传到服务器，然后将<link rel="shortcut icon" href="http://example.com/favicon.ico" />添加到标题中，一切就好了.

Grab the favicon.ico file from the png2ico folder. Upload it to the server add <link rel="shortcut icon" href="http://example.com/favicon.ico" /> to the header and you are good to go.

在此过程中，请继续为iPad和iPhone创建图标. 您可以在此处找到有关推荐尺寸以及如何在您的网站中实现这些尺寸的更多信息.

While you are at it go ahead and create Icons for iPad and iPhone. You can find more info on recommended sizes here and how to implement them into your site.

还可以在此处找到有关Favicons的更多常规信息.

Also more general info on Favicons can be found here.

注意:我不知道这是Facebook还是Yahoo的工作方式，但这回答了您有关如何完成工作的问题.

Note: I do not know if this is how Facebook or Yahoo do theirs but this answers your question of how it can be done.

这篇关于如何具有多个Favicon大小，但默认情况下仅投放16x16?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！