112

更新的问题：

在 2022 年创建网站图标时，什么被认为是最佳实践？

这是 2013 年提出的原始问题：

我正试图了解所有这些不同的大小和格式，这些都是 Favicons、Touch 图标和现在 Tile 图标所需的。

我读过这篇文章： http ://www.jonathantneal.com/blog/understand-the-favicon 但我仍然有点模糊到底该使用什么在所有设备和浏览器上看起来都相当不错> = IE8 .

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

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

平铺图标
tileicon.png (144x144)

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
基于此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？

4

5 回答 5

121

Favicon is way more complex than what it sounds. 10 years ago, favicon.ico was the only needed item. Then, there was the touch icon, then multiple touch icons dues to the various iOS devices screen resolutions, then there was the tile icon for Windows...

Some answers here are very comprehensive - and overwhelming (all this, only for a favicon?). Yet, they fail at indicating that the 310x310 tile icon for Windows is recommended to be 558x558. And since they were written a few months ago, they do not mention the recent manifest for Android Chrome M39 or the pinned tab SVG icon for Safari on OS X El Capitan.

Per-platform design is another tough, yet neglected topic. For example, favicon are often transparent. But iOS does not support transparency (for an example of this, compare the SO touch icon and what you get when you add SO to your iPhone's home screen).

For these reasons, what I consider a best practice for favicon is to not create it manually. Instead, use a tool to automate the whole process and enforce platform guidelines.

I advice you to use RealFaviconGenerator. It generates all pictures and HTML code you need to get the job done:

  • favicon.ico and PNG icons for desktop browsers
  • Apple touch icon for iOS and Android devices
  • Windows 8 tiles
  • Pinned tab icon for Safari on OS X El Capitan

For example, it not only generates the msapplication-TileImage picture and markup but also the more recent browserconfig.xml file supported by IE11. It was also updated a few months ago to support the Android Chrome manifest and Safari OS X El Capitan.

Full disclosure: I'm the author of this site.

于 2014-05-23T08:16:12.957 回答
56

这是手机和平板电脑的 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，这是一个常见问题解答

于 2013-09-27T08:32:07.157 回答
27

您可以为各种设备设置许多不同的图标甚至启动画面。这个答案贯穿了如何支持他们所有人。

以下是我使用的一些片段，以及我收集信息的相关链接。有关ASP.NET MVC Boilerplate项目模板的更多信息和更多信息，请参阅我的博客，所有这些都是开箱即用的（包括示例图像文件）。

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

<!-- 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="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-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="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-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="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/apple-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="/content/images/mstile-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 的启动屏幕。如果您在 HTML 内容上使用 GZIP 压缩，现在每个人都应该这样做，那么每个请求的开销约为 634 字节以支持所有平台或 446 字节而没有启动画面。我个人认为支持 IOS、Android 和 Windows 设备是值得的，但这是您的选择，我只是提供选项！

关于当前 Web 图标/启动画面/设置情况的旁注

这种使用供应商特定图标、启动屏幕和特殊标签来控制 Web 浏览器或固定图标的情况是荒谬的。在一个完美的世界中，我们都将使用一个 favicon.svg 文件，该文件可以在任何大小下看起来都不错，并且可以放在页面的根部。在撰写本文时，只有 FireFox 支持此功能（请参阅CanIUse.com）。

然而，如今图标并不是唯一的设置，还有其他几个特定于供应商的设置（如上所示），但 favicon.svg 文件将涵盖大多数用例。

更新

更新以包括新的 Android/Chrome 版本 M39+ 图标/主题选项。有趣的是，他们采用了与 Microsoft 类似的方法，但使用的是 JSON 文件而不是 XML。

于 2014-10-17T11:20:47.667 回答
7

最简单的解决方案是使用一个（！）PNG 图像（2020 年）。

只需将其添加到文档的头部：

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

最后一个链接适用于 Apple（主屏幕），第二个链接适用于 Android（主屏幕），第一个链接适用于其余部分。

请注意，此解决方案不支持 Windows 8/10 中的“磁贴”。它确实支持快捷方式、书签和浏览器选项卡中的图像。

大小正是 Android 主屏幕使用的大小。Apple 主屏幕图标大小为 60 像素（3x），因此为 180 像素，并将按比例缩小。其他平台使用默认快捷方式图标，该图标也会按比例缩小。

于 2018-02-06T16:06:01.890 回答
1

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

我没有找到任何符合我要求的东西，所以我创建了faviconbuild并在MIT license下发布了它。

该项目的目的是创建一个集中的、可维护的和本地可运行的跨平台实用程序来构建网站图标和支持标记。它利用了Imagemagick的强大功能，因此您需要为您的平台下载它或使用我在我的版本中提供的那些。请随意在商业或个人项目中使用它，贡献，提交功能请求，或简单地用作您自己的实用程序的灵感来源。

该项目由一个适用于 Windows 的批处理文件和一个适用于 Unix/Mac（或通过 Cygwin 的 Windows）的 bash 脚本组成。您可以从内部帮助选项 -h 或 --help 获得支持的选项的完整列表。

前任：

./faviconbuild.sh -h

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

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

于 2015-10-10T04:52:04.383 回答