熱門單位/瀏覽器/操作系統的網站圖標/圖標

Question

我一直在使用圖標生成器來為網站的各種流行單元/瀏覽器/ OS創建圖標/圖標

結果是：

<link rel="shortcut icon" href="favicon.ico />
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="160x160" href="favicon-160x160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />

當然，這似乎有點過頭了。 我從未見過任何網站使用這么多圖標變體

我希望該圖標在大多數最受歡迎的廣告單元中都可用，因此人們也可以將該網站添加到主屏幕等中（帶有該圖標）

但是，這一切真的必要嗎，還是我可以輕松地將其縮減為幾個？

例如，如果我僅將一個 152x152尺寸用於Apple設備，而跳過較小的尺寸，會發生什么情況？

Answer 1

完全過分了 對於Apple，您僅需要以下內容

 apple-touch-icon.png (57x57 iPhone and iPod touch) apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen) apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch) apple-touch-icon-144x144.png (144x144 retina iPad) 

但是，如果您錯過任何這些，則會發生以下情況：

 The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element's size defaults to 60 x 60. 

  If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

  If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

（摘自IOS開發人員庫 ）

因此，您可以輕松地僅使用144x144.png而不會發生任何事情，這取決於您的圖標設計在小尺寸外觀上是否不錯，但是您只能使用一種尺寸

Answer 2

第一個解決方案-根目錄中的文件

創造：

• 像往常一樣，將favicon.ico作為16x16 ICO圖片。 這是用於IE的舊版本。
• apple-touch-icon.png為152x152 PNG圖片。 這適用於所有iOS設備和Android Chrome。
• favicon-196x196.png作為196x196 PNG圖片。 這適用於最新的台式機瀏覽器（以及Android Chrome瀏覽器，在撰寫本文時，它也偏愛Apple Touch圖標）。
• mstile-144x144.png作為144x144 PNG圖片。 對於Windows 8 / IE 10和Windows 8.1 / IE 11

將它們放在您網站的根目錄中。

向他們聲明：

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

如您所料，圖標在必要時會縮小。

是的，未聲明favicon.ico 。 只要它在網站的根目錄中，IE就會找到它。 如果您使用的話，對於browserconfig.xml也是一樣。

替代解決方案-文件不在根目錄中

創建與上面相同的圖標。

將它們放在您網站的某個位置，例如。 /path/to/icons 。

向他們聲明：

<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />

Answer 3

經過更多研究后，我得出了以下解決方案：

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />

該頁面幫助了一些http://www.jonathantneal.com/blog/understand-the-favicon/

favicon.png是96x96

favicon.ico為48x48（或一個文件包含3個變體）

apple-touch-icon.png為152x152

mstile.png是144x144

因此，文件有點大，但是通過這種方式，我不需要大量的版本和文件。 另外，用戶下載（即使在手機上）下載的4-8 kb文件也不是很多，並且任何設備都應抓取該文件並在需要時將其縮小

Answer 4

我的解決方案：

1）准備分辨率為310x310和PNG格式的圖標圖像。

2）轉到http://faviconit.com ，生成您的圖標，下載並解壓縮，將其全部復制到項目中的某個文件夾中（在我的情況下為root / favicon / ）

3）然后轉到http://www.favicon-generator.org/ ，生成圖標 ，下載並解壓縮，然后僅將android-icons （ android-icon-*。png ）和manifest.json復制到項目中的某個文件夾中（在我的情況下是root / favicon / ）

4）不要忘記更改manifest.json和browserconfig.xml中的路徑

5）然后在您的html頭中使用類似以下內容的代碼：

<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">