Favicons – 最佳实践

我试图让我的脑袋周围所有这些不同的大小和格式，需要Favicons，触摸图标，现在平铺图标也是如此。

我读过这篇文章： http ： //www.jonathantneal.com/blog/understand-the-favicon，但我仍然有点朦胧，究竟是什么使用，看起来相当不错，在所有设备和浏览器> = IE8 。

我想我应该创build以下内容：

ICO
favicon.ico（32×32）

PNG
favicon.png（96×96）

平铺图标
tileicon.png（144×144）

苹果触摸图标
apple-touch-icon-precomposed.png（152×152）
基于这个https://github.com/h5bp/html5-boilerplate/issues/1367

…然后使用这个代码来服务他们？ 

<link rel="apple-touch-icon" href="path/to/touchicon.png"> <link rel="icon" href="path/to/favicon.png"> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- or, set /favicon.ico for IE10 win --> <meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png">

我错过了什么？

我不清楚这是否会覆盖IE 10？

Favicon比它听起来更复杂。 10年前， favicon.ico是唯一需要的项目。 然后，有触摸图标，然后多个触摸图标会给各种iOS设备的屏幕分辨率，然后有Windows的瓷砖图标…

这里的一些答案是非常全面的 – 而且是压倒性的（所有这些，只是为了一个favicon？）。 然而，他们失败表明Windows的310×310平铺图标推荐为558×558 。 而且由于它们是在几个月前编写的，所以他们没有提到Android Chrome M39的近期清单或OS X El Capitan上Safari的固定标签SVG图标 。

平台devise是另一个艰难而又被忽视的话题。 例如，favicon往往是透明的。 但iOS不支持透明度（例如，比较SO触摸图标和将您添加到iPhone的主屏幕时获得的图标 ）。

由于这些原因，我认为是favicon的最佳做法是不要手动创build它。 相反，使用一个工具来自动执行整个过程并执行平台指南。

我build议你使用RealFaviconGenerator 。 它会生成您完成工作所需的所有图片和HTML代码：

  • favicon.ico和桌面浏览器的PNG图标
  • 适用于iOS和Android设备的Apple触摸图标
  • Windows 8磁贴
  • 在OS X El Capitan上的Safari的固定选项卡图标

例如，它不仅生成msapplication-TileImage图片和标记，而且还生成IE11支持的最新browserconfig.xml文件。 它也在几个月前更新，以支持Android Chrome清单和Safari OS X El Capitan。

充分披露：我是这个网站的作者。

以下是移动设备和平板电脑的完整（正如我所知）的favicon示例： 

 <!-- non-retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon57.png" sizes="57x57"> <!-- non-retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon72.png" sizes="72x72"> <!-- non-retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon76.png" sizes="76x76"> <!-- retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon114.png" sizes="114x114"> <!-- retina iPhone iOS 7 --> <link rel="apple-touch-icon" href="icon120.png" sizes="120x120"> <!-- retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon144.png" sizes="144x144"> <!-- retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon152.png" sizes="152x152"> <!-- Win8 tile --> <meta name="msapplication-TileImage" content="favicon-144.png"> <meta name="msapplication-TileColor" content="#B20099"/> <meta name="application-name" content="name" /> <!-- IE11 tiles --> <meta name="msapplication-square70x70logo" content="tile-tiny.png"/> <meta name="msapplication-square150x150logo" content="tile-square.png"/> <meta name="msapplication-wide310x150logo" content="tile-wide.png"/> <meta name="msapplication-square310x310logo" content="tile-large.png"/>

对于IE11， 这里是一个常见问题

有许多不同的图标，甚至可以为各种设备设置启animation面。 这个答案经历了如何支持他们。

以下是我使用的相关链接，以及我收集信息的一些片段。 查看我的博客 ，了解有关ASP.NET MVC Boilerplate项目模板的更多信息和更多信息，包含所有内置的开发工具（包括示例图像文件）。

将以下标记添加到您的html头部。 注释掉的部分完全是可选的。 虽然未注释的部分build议覆盖所有的图标用法。 不要害怕，如果它是评论帮助你。 

 <!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ --> <!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. --> <!--<link rel="shortcut icon" href="favicon.ico">--> <!-- favicon-96x96.png - For Google TV. --> <link rel="icon" type="image/png" href="/contenthttp://img.dovov.comfavicon-96x96.png" sizes="96x96"> <!-- favicon-16x16.png - The classic favicon, displayed in the tabs. --> <link rel="icon" type="image/png" href="/contenthttp://img.dovov.comfavicon-16x16.png" sizes="16x16"> <!-- favicon-32x32.png - For Safari on Mac OS. --> <link rel="icon" type="image/png" href="/contenthttp://img.dovov.comfavicon-32x32.png" sizes="32x32"> <!-- Android/Chrome --> <!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory. https://developer.chrome.com/multidevice/android/installtohomescreen. --> <link rel="manifest" href="/content/icons/manifest.json"> <!-- theme-color - The colour of the toolbar in Chrome M39+ http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android --> <meta name="theme-color" content="#1E1E1E"> <!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. --> <link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192"> <!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. --> <!-- <meta name="mobile-web-app-capable" content="yes"> --> <!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter. https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 --> <!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. --> <!--<meta name="apple-mobile-web-app-title" content="">--> <!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. --> <!--<meta name="apple-mobile-web-app-capable" content="yes">--> <!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. --> <!--<meta name="apple-mobile-web-app-status-bar-style" content="black">--> <!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch --> <link rel="apple-touch-icon" sizes="57x57" href="/contenthttp://img.dovov.comapple-touch-icon-57x57.png"> <!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 --> <link rel="apple-touch-icon" sizes="114x114" href="/contenthttp://img.dovov.comapple-touch-icon-114x114.png"> <!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 --> <link rel="apple-touch-icon" sizes="72x72" href="/contenthttp://img.dovov.comapple-touch-icon-72x72.png"> <!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 --> <link rel="apple-touch-icon" sizes="144x144" href="/contenthttp://img.dovov.comapple-touch-icon-144x144.png"> <!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. --> <link rel="apple-touch-icon" sizes="60x60" href="/contenthttp://img.dovov.comapple-touch-icon-60x60.png"> <!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 --> <link rel="apple-touch-icon" sizes="120x120" href="/contenthttp://img.dovov.comapple-touch-icon-120x120.png"> <!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 --> <link rel="apple-touch-icon" sizes="76x76" href="/contenthttp://img.dovov.comapple-touch-icon-76x76.png"> <!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 --> <link rel="apple-touch-icon" sizes="152x152" href="/contenthttp://img.dovov.comapple-touch-icon-152x152.png"> <!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 --> <link rel="apple-touch-icon" sizes="180x180" href="/contenthttp://img.dovov.comapple-touch-icon-180x180.png"> <!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 --> <!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"> <!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"> <!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"> <!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"> <!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone --> <link rel="apple-touch-startup-image" href="/contenthttp://img.dovov.comapple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"> <!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile! browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images: mstile-70x70.png - For Windows 8.1 / IE11. mstile-144x144.png - For Windows 8 / IE10. mstile-150x150.png - For Windows 8.1 / IE11. mstile-310x310.png - For Windows 8.1 / IE11. mstile-310x150.png - For Windows 8.1 / IE11. See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. --> <!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. --> <!--<meta name="application-name" content="">--> <!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). --> <meta name="msapplication-TileColor" content="#5cb95c"> <!-- msapplication-TileImage - Windows 8 - The tile image. --> <meta name="msapplication-TileImage" content="/contenthttp://img.dovov.commstile-144x144.png">

我的browserconfig.xml文件。 上面的完整解释。 

 <?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/Content/Images/mstile-70x70.png"/> <square150x150logo src="/Content/Images/mstile-150x150.png"/> <square310x310logo src="/Content/Images/mstile-310x310.png"/> <wide310x150logo src="/Content/Images/mstile-310x150.png"/> <TileColor>#5cb95c</TileColor> </tile> </msapplication> </browserconfig>

我的manifest.json文件。 上面的完整解释。 

 { "name": "ASP.NET MVC Boilerplate (Required! Update This)", "icons": [ { "src": "\/Content\/icons\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/Content\/icons\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, { "src": "\/Content\/icons\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" }, { "src": "\/Content\/icons\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" }, { "src": "\/Content\/icons\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" }, { "src": "\/Content\/icons\/android-chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" } ] }

项目中的文件列表（请注意，如果您决定将其中的一些文件放在项目的根目录中，则这些文件的名称非常重要，以避免使用上述元标记）： 

 favicon.ico browserconfig.xml Content/Images/ android-chrome-144x144.png android-chrome-192x192.png android-chrome-36x36.png android-chrome-48x48.png android-chrome-72x72.png android-chrome-96x96.png apple-touch-icon.png apple-touch-icon-57x57.png apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon-180x180.png apple-touch-icon-precomposed.png (180x180) favicon-16x16.png favicon-32x32.png favicon-96x96.png favicon-192x192.png manifest.json mstile-70x70.png mstile-144x144.png mstile-150x150.png mstile-310x150.png mstile-310x310.png apple-touch-startup-image-1536x2008.png apple-touch-startup-image-1496x2048.png apple-touch-startup-image-768x1004.png apple-touch-startup-image-748x1024.png apple-touch-startup-image-640x1096.png apple-touch-startup-image-640x920.png apple-touch-startup-image-320x460.png

总开销

如果你拿出3KB的额外HTML的评论，如果你不支持1.5KB的启animation面。 如果您在HTML内容上使用GZIP压缩（现在每个人都应该这样做），那么每个请求将会为您留出大约634字节的开销，以支持所有平台或446字节，而不会出现启animation面。 我个人认为它值得支持IOS，Android和Windows设备，但它是你的select，我只是给出select！

关于当前Web图标/启animation面/设置情况的注意事项

这种情况与供应商特定的图标，启animation面和特殊标签来控制网页浏览器或固定图标是荒谬的。 在一个完美的世界里，我们都会使用一个favicon.svg文件，这个文件可以在任何尺寸上看起来不错，可以放在页面的根目录下。 只有FireFox在撰写本文时支持这个function（请参阅CanIUse.com ）。

然而，图标不是目前唯一的设置，还有其他几个供应商特定的设置（如上所示），但favicon.svg文件将覆盖大多数使用情况。

更新

更新为包含新的Android / Chrome版本M39 + favicon /主题选项。 有趣的是，他们对微软采取了类似的方法，但是使用的是JSON文件而不是XML。

其实我问自己同样的问题，并试图寻找任何可以集成到构build步骤中的简单项目，或者只是简化所需的资产和标记的创build。

我没有find任何符合我的要求的东西，所以我创build了faviconbuild并在MIT许可下发布了它。

这个项目的目的是创build一个中心的，可维护的，可在本地运行的跨平台工具来build立网站图标和支持标记。 它利用了Imagemagick的强大function，因此您需要为您的平台下载，或者使用我在发行版中提供的那些。 请随意在商业或个人项目中使用此function，贡献，提交function请求，或者直接将其作为您公用事业的灵感来源。

该项目包含Windowsbatch file和Unix / Mac（或通过Cygwin的Windows）的bash脚本。 您可以从内部帮助选项-h或–help中获得支持选项的完整列表。

例如： 

 ./faviconbuild.sh -h

这两个脚本parsing一个简单的文本文件 ，你也可以用-p或–parsed选项覆盖。 该文件基本上只是一个要运行的命令模板，因此如果需要，您可以更轻松地自定义输出。

我还发表了一篇关于开发的博客文章 ，以及关于bash / batch脚本的迷你教程。

Interesting Posts