最佳实践

最新问题:

在2022年创建图标的最佳做法是什么？

这是2013年人们最初提出的问题:

我正试图理解所有这些不同的大小和格式，这些都是收藏夹图标、触摸图标和现在的平铺图标所需要的。

我读过这篇文章: Http://www.jonathantneal.com/blog/understand-the-favicon 但是我还是不太清楚究竟应该使用什么，这样在所有设备和浏览器上看起来都相当不错。

我认为我应该创建以下内容:

ICO
Favicon.ico (32x32)

巴布亚新几内亚
Png (96x96)

瓷砖图标
Tileicon.png (144x144)

苹果触摸图标
基于此 https://github.com/h5bp/html5-boilerplate/issues/1367

的 apple-touch-icon-precomposd.png (152x152) < br >

然后用这个密码把他们交出来？

<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？

81085 次浏览
小开

以下是手机和平板电脑的完整插图示例(据我所知) :

<!-- 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，给你是一个常见问题

小开

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

这里的一些答案是非常全面的-和压倒性的(所有这一切，只为一个图标?).然而，它们未能表明 the 310x310 tile icon for Windows is recommended to be 558x558。因为它们是几个月前写的，它们没有提到最近的 manifest for Android Chrome M39或 在 OS X El Capitan 上为 Safari 固定标签 SVG 图标。

每个平台的设计是另一个困难的，但被忽视的话题。例如，图标通常是透明的。但是 iOS 不支持透明性(举个例子，比较一下 触摸图标和你在 iPhone 主屏幕上添加 SO 时得到的结果)。

由于这些原因，我认为对于图标的最佳实践是 没有手动创建它。相反，应该使用一个工具来自动化整个过程并执行平台指导方针。

我建议你使用 RealFaviconGenerator。它生成所有的图片和 HTML 代码，你需要完成这项工作:

  • 用于桌面浏览器的 favicon.ico和 PNG 图标
  • Apple touch icon for iOS and Android devices
  • Windows 8瓷砖
  • Pinned tab icon for Safari on OS X El Capitan

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

全面披露: 我是这个网站的作者。

小开

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

下面是我使用的一些片段和我收集信息的相关链接。有关 NET MVC 样板文件项目模板的更多信息和更多信息，请参见 我的博客，所有这些内置在开箱即用(包括示例图像文件)。

Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don't be scared, most if it is comments to help you.

<!-- 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>

我的 Manif.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"
}
]
}

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

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.5 KB。如果您在 HTML 内容上使用 GZIP 压缩，这是现在每个人都应该做的事情，那么每个请求大约需要634字节的开销来支持所有平台，或者446字节没有启动画面。我个人认为它值得支持 IOS，Android 和 Windows 设备，但它是你的选择，我只是给出选项！

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

这种使用厂商特定的图标、启动画面和特殊标签来控制网页浏览器或固定图标的情况是荒谬的。在一个完美的世界里，我们都会使用一个 Favicon.svg 文件，它可以在任何大小下都很好看，并且可以放在页面的根目录下。在编写本文时，只有 FireFox 支持这一点(见 CanIUse.com)。

然而，图标并不是目前唯一的设置，还有其他一些供应商特定的设置(如上所示) ，但是一个 Favicon.svg 文件可以覆盖大多数用例。

更新

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

小开

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

我没有找到任何符合我要求的东西，所以我创建了 faviconbuild，并在 麻省理工学院执照下发布了它。

The purpose of this project is to create a central, maintainable, and locally runnable cross platform utility to building favicons and supporting markup. It leverages the power of 想象力 so you would need to download that for your platform or use the ones I provide in my 释放. Please feel free to use this in commercial or personal projects, contribute, submit feature requests, or simply use as a source of inspiration for your own utilities.

该项目包含一个 Windows 批处理文件和一个 Unix/Mac (或者通过 Cygwin 的 Windows) bash 脚本。您可以从内部帮助选项 -h 或—— help 获得受支持选项的完整列表。

ex:

./faviconbuild.sh -h

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

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

小开

最简单的解决方案是使用一个(!) 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中的“ til es”。它支持快捷方式、书签和浏览器标签中的图像。

这个尺寸正是 Android 主屏幕使用的尺寸。苹果的主屏幕图标大小是60px (3倍) ，所以180px，并将按比例缩小。其他平台使用默认的快捷方式图标，这个图标也会缩小。


提交答案