那些遇到过的问题

Favicons - 最佳实践

Leo*_*eon 101 favicon apple-touch-icon

我正试图了解Favicons,Touch图标和现在的Tile图标所需的所有这些不同尺寸和格式.

我已经阅读了这篇文章:http: //www.jonathantneal.com/blog/understand-the-favicon 但我仍然有点朦胧,确切地说在所有设备和浏览器上看起来相当不错> = IE8 .

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

ICO
favicon.ico(32x32)

PNG
favicon.png(96x96)

Tile Icon
tileicon.png(144x144)

Apple Touch图标
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">
Run Code Online (Sandbox Code Playgroud)

我错过了什么吗？

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

phi*_*e_b 109

Favicon比听起来更复杂.10年前,favicon.ico是唯一需要的项目.然后,有触摸图标,然后多个触摸图标显示各种iOS设备屏幕分辨率,然后有Windows的图块图标...

这里的一些答案非常全面 - 而且势不可挡(所有这一切,只针对一个图标？).然而,他们未能指出Windows的310x310磁贴图标建议为558x558.由于它们是几个月前编写的,因此它们没有提及Android Chrome M39的最新清单或OS X El Capitan上Safari的固定标签SVG图标.

每平台设计是另一个棘手而又被忽视的话题.例如,favicon通常是透明的.但是iOS不支持透明度(例如,比较SO触摸图标以及将SO添加到iPhone主屏幕时获得的图标).

出于这些原因,我认为对于favicon的最佳做法是不要手动创建它.相反,使用工具自动化整个过程并实施平台指南.

我建议你使用RealFaviconGenerator.它会生成完成工作所需的所有图片和HTML代码:

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

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

完全披露:我是这个网站的作者.

  • 这是有目的的.只要它位于站点的根目录中,就不需要声明`browserconfig.xml`.IE会自动查找它.在其他情况下(当您在选项中输入特定路径时),将生成声明. (3认同)

小智 56

以下是移动设备和平板电脑的完整(我知道)图例:

<!-- 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"/>
Run Code Online (Sandbox Code Playgroud)

对于IE11,这是一个FAQ

  • 哦 - 狗屎 - 现在每个公司都有自己的东西,我们必须包含大量其他无用的代码.;) (60认同)
  • 但这不包括"apple-touch-icon-precomposed.png"和"apple-touch-icon.png" (4认同)
  • 哦 - 很棒 - IE11也是新的!感谢您发布信息. (2认同)
  • +1但我不确定这是否是*最佳实践*,尽管它是彻底的.对于最佳实践(恕我直言)和更实用的方法,请参阅下面的Neil Robertson建议的优秀备忘单. (2认同)

Muh*_*eed 24

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

以下是我使用的一些片段以及我收集信息的相关链接.有关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">
Run Code Online (Sandbox Code Playgroud)

我的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>
Run Code Online (Sandbox Code Playgroud)

我的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"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

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

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
Run Code Online (Sandbox Code Playgroud)

总开销

如果您不支持1.5KB的启动画面,那么如果您删除3KB额外HTML的注释.如果您在HTML内容上使用GZIP压缩(现在每个人都应该这样做),那么每个请求支持大约634字节的开销来支持所有平台或446字节而没有启动屏幕.我个人认为它值得支持IOS,Android和Windows设备,但它是你的选择,我只是提供选项!

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

这种情况与供应商特定的图标,启动画面和特殊标签,以控制Web浏览器或固定图标是荒谬的.在一个完美的世界中,我们都会使用favicon.svg文件,它可以在任何大小上都很好看,并且可以放在页面的根部.在撰写本文时,只有FireFox支持此功能(请参阅CanIUse.com).

但是,图标不是目前唯一的设置,还有其他一些供应商特定设置(如上所示),但favicon.svg文件将涵盖大多数用例.

更新

已更新,以包含新的Android/Chrome版本M39 + favicon /主题选项.有趣的是,他们采用了与Microsoft类似的方法,但使用的是JSON文件而不是XML.

  • 这太多了。（不是您的回答，而是浏览器供应商有这么多要求的事实：）。 (2认同)

Joo*_*stS 6

最简单的解决方案是使用一个（！）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">
Run Code Online (Sandbox Code Playgroud)

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

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

大小正是 Android 主屏幕使用的大小。Apple 主屏幕图标大小为 60px(3x)，因此 180px 会缩小。其他平台使用默认的快捷图标，该图标也会缩小。

归档时间：

查看次数：

69070 次

最近记录：

7 年，4 月 前
Favicon尺寸？ 312
更多相关链接
相关归档
"/favicon.ico"vs <link rel ="快捷图标"/> 90
无法使用Express.js更改Favicon 52
使用favicon与CSS 45
使用 FastAPI 设置网站图标？ 27
如果我将/favicon.ico作为image/vnd.microsoft.icon提供,而不是image/x-icon,它会在任何浏览器上中断吗？ 10
显示Android WebView的favicon 7
将favicon添加到没有HTML的Flask服务器 6
如何将网站图标添加到 nextjs 应用程序结构中？- 可能存在水分问题 3
为什么我的网站不显示我的网站？ 1
为此网站定义的favicon在哪里？ 1
难疑归档
撤消尚未推送的Git合并 3695
在'for'循环中访问索引？ 3312
舍入到最多2位小数(仅在必要时) 2492
.prop()vs .attr() 2249
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
重命名pandas中的列 1601
你怎么读斯坦丁？ 1389
如何克隆仅Git存储库的子目录？ 1298
visibility:hidden和display:none之间有什么区别？ 1121
功能编程是否取代了GoF设计模式？ 1028