如何擁有多個favicon尺寸，但默認只提供16x16的尺寸？

Question

通常認爲好的做法是以多種尺寸提供favicon.ico，因爲這樣當製作快捷方式或站點被固定時（IE9），它看起來會更好。儘管如此，favicon的大小很容易增加十倍，這會導致站點加載速度較慢（在我的情況下，16x16圖標爲1kb，16,32,64 = 30kb）。

像Facebook和雅虎這樣的網站在默認情況下會提供一個16x16的圖標，它是< 1kb，但是當您固定這些網站時，使用的圖片大小適當。我認爲只有在需要時才加載更大的圖片，這可以解決困境。我沒有試圖弄清楚這些網站是如何做到這一點的。有人知道嗎？

Answer 1

更新：

我原來的答案是低於，但是，因爲寫這篇文章，我相信有可能是一個更好的方式來處理與HTML 5網頁圖標我將創建一個32×32圖標（僅大小）對於Internet Explorer 9及更低版本，但使用其他方法爲其他瀏覽器（包括移動設備）創建更高分辨率的圖標（PNG文件類型）。您可以通過see my answer here瞭解更多信息。

---

原始答覆問題：

這裏是它是如何做：

1. Download 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 
   

   注：增加了一個64×64大小的圖標的文件大小的差異由2KB的文件增加。我只會使用32x32和16x16。 （運行與上面相同的代碼刪除icon-64.png）

5. 從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。

另外more general info在Favicons上可以找到這裏。

注意：我不知道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將任何圖像轉換爲多分辨率圖標。

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

爲了您爲什麼Facebook和雅虎能有高清晰度的「固定」的圖像問題，那是因爲他們也有apple-touch-icon和og:image。

Answer 4

或者您可以登錄任何安裝了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 cheat sheet @https://github.com/audreyr/favicon-cheat-sheet以獲得更多的favicon信息。