favicon 尺寸問題

Favicon dimensions

最近更新網站的 favicon.ico 圖示檔案，需要美女設計師重新設計圖示，那麼需要設計什麼尺寸的圖示呢？有沒有固定的标準？

百度上的解釋是

又查了下其他的資料

在棧溢出找到了詳細的解釋：https://stackoverflow.com/questions/2268204/favicon-dimensions

I have a favicon with the dimensions of height=26px / width=20px named favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
           

Question: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?

答案

favicon 圖示支援 16-32-48 像素的 ICO 圖檔。ICO 格式的圖檔與PNG格式的圖檔不同。這裡需要一個方形的圖檔。原始答案建議大家使用一個生成器自動生成favicon圖示（http://realfavicongenerator.net/)）。

The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I’m the author of this site.

綜合分析

favicon 必須是正方形（height===width）桌面浏覽器和IOS不支援其他形狀的圖示。圖示的格式可以使ico或者是png格式。下面是兩種類型的圖示的比較。

Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.

The favicon is supported by several files:

• A

  favicon.ico

  icon.
• Some other PNG icons.

In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.

favicon.ico

盡管所有的浏覽器都支援ICO檔案圖示，這個檔案類型主要支援早期的IE浏覽器。ICO格式不同于png格式。因為一些智能浏覽器可以很好的轉化PNG圖檔，即使這些圖檔使用被錯誤的重命名為ICO字尾。一個ICO檔案可以包含幾個圖檔，微軟推使用16×16或者 32×32的尺寸，例如，在位址欄中的圖檔是16像素的，在工作列中的快捷方式是32像素的。

Although all desktop browsers can deal with this icon, it is primarily for older version of IE.

The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.

An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in

favicon.ico

. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

使用下面的語句聲明圖示，并把圖示放在根目錄下面，不推薦讓浏覽器自動尋找png圖示。

Declare the favicon with:

<link rel="icon" href="/path/to/icons/favicon.ico" target="_blank" rel="external nofollow" >
           

However, it is recommended to place

favicon.ico

in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.

PNG icons

新版IE浏覽器和chrome-FF浏覽器都推薦使用PNG格式，尺寸從16-32不等。例如，Safari可以使用最大196的圖示

Modern desktop browsers (IE11, recent versions of Chrome, Firefox…) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and “as big as possible”. For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

下面詳細介紹了不同裝置不同浏覽器推薦的尺寸

What are the recommended sizes? Pick your favorite platforms:

• Most desktop browsers: 16x16, 32x32, “as big as possible”
• Android Chrome: 192x192
• Google TV: 96x96
• … and others that are more or less documented.

可以聲明多個路徑

The PNG icons are declared with:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" target="_blank" rel="external nofollow"  sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" target="_blank" rel="external nofollow"  sizes="32x32">
...
           

注意：FF不支援sizes屬性，會使用最後的PNG圖檔，是以確定最後的是 32 像素的圖檔。并且在FF中可以防止瞎子啊一個不需要的大圖檔。

Beware: Firefox does not support the

sizes

attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.

Chrome不支援sizes屬性，會下載下傳所有的聲明的圖示，是以最好不要聲明太多的圖示。

Also note that Chrome does not support the

sizes

attribute and tends to load all declared icons. Better not declare too many icons.

Mobile platforms

This question is about desktop favicon so there is no need to delve too much in this topic.

Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).

Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.

Microsoft defines the tile picture and the

browserconfig.xml

file.

Conclusion

Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I’m the author of this site.

結論：生成一個可以在任何浏覽器可以很好使用的favicon是很複雜的，原作者建議使用自己的圖示生成器。