所有浏览器和设备的favicon / start sreens [英] favicon / start sreens for all browsers and devices
问题描述
我想知道我是否覆盖了所有浏览器和设备的所有favicons /启动闪屏？
这足够了吗？或者我应该覆盖的主要是什么？我缺少任何以下：
< link rel =iconhref =/ images / favicons / favicon.png >
< link rel =apple-touch-iconhref =/ images / favicons / touch-icon-iphone.png>
< link rel =apple-touch-iconsizes =76x76href =/ images / favicons / touch-icon-ipad.png>
< link rel =apple-touch-iconsizes =120x120href =/ images / favicons / touch-icon-iphone-retina.png>
< link rel =apple-touch-iconsizes =152x152href =/ images / favicons / touch-icon-ipad-retina.png>
< meta name =application-namecontent =site>
< meta name =msapplication-TileColorcontent =＃ffffff>
< meta name =msapplication-square70x70logocontent =/ images / favicons / msapplication-tiny.png>
< meta name =msapplication-square150x150logocontent =/ images / favicons / msapplication-square.png>
< meta name =msapplication-wide310x150logocontent =/ images / favicons / msap plication-wide.png>
< meta name =msapplication-square310x310logocontent =/ images / favicons / msapplication-large.png>
感谢
删除 favicon.ico 文件在您的网站的根目录。 无需声明和它是预期包含16x16,32x32和48x48的图片。
现代浏览器还会查找PNG图标。您可以通过以下方式处理大多数情况：
< link rel =icontype =image / pnghref = favicon-16x16.pngsizes =16x16>
< link rel =icontype =image / pnghref =/ favicon-32x32.pngsizes =32x32>
iOS
如果您结合使用iOS 6和iOS 7尺寸，iPad和iPhone，以及Retina和非Retina，可以为您提供8个 Apple touch图示：
< link rel = -touch-iconsizes =57x57href =/ apple-touch-icon-57x57.png>
< link rel =apple-touch-iconsizes =114x114href =/ apple-touch-icon-114x114.png>
< link rel =apple-touch-iconsizes =72x72href =/ apple-touch-icon-72x72.png>
< link rel =apple-touch-iconsizes =144x144href =/ apple-touch-icon-144x144.png>
< link rel =apple-touch-iconsizes =60x60href =/ apple-touch-icon-60x60.png>
< link rel =apple-touch-iconsizes =120x120href =/ apple-touch-icon-120x120.png>
< link rel =apple-touch-iconsizes =76x76href =/ apple-touch-icon-76x76.png>
< link rel =apple-touch-iconsizes =152x152href =/ apple-touch-icon-152x152.png>
Android
Android Chrome使用Apple触摸图标。但它也记录了一个 196x196 PNG图标，将替换触摸图标...有一天。所以：
< link rel =icontype =image / pnghref =/ favicon-196x196.png sizes =196x196>
Windows 8.0平铺图片
< meta name =msapplication-TileColorcontent =＃da532c>
< meta name =msapplication-TileImagecontent =/ mstile-144x144.png>
Windows 8.1图片图片
< meta name =msapplication-TileColorcontent =＃ffffff>
< meta name =msapplication-square70x70logocontent =/ images / favicons / msapplication-tiny.png>
meta name =msapplication-square150x150logocontent =/ images / favicons / msapplication-square.png>
< meta name =msapplication-wide310x150logocontent =/ images / favicons / msap plication-wide.png>
< meta name =msapplication-square310x310logocontent =/ images / favicons / msapplication-large.png>
或使用 browserconfig.xml 您网站的根目录（或在 head 部分中声明），其中包含以下内容：
< browserconfig>
< msapplication>
< tile>
< square70x70logo src =/ mstile-70x70.png/>
< square150x150logo src =/ mstile-150x150.png/>
< square310x310logo src =/ mstile-310x310.png/>。
< wide310x150logo src =/ mstile-310x150.png/>
< TileColor>＃da532c< / TileColor>
< / tile>
< / msapplication>
< / browserconfig>
其他人
Google TV，Opera快速拨号和其他功能如何？他们希望PNG图标：
< link rel =icontype =image / pnghref =/ favicon- 160x160.pngsizes =160x160>
< link rel =icontype =image / pnghref =/ favicon-96x96.pngsizes =96x96>
（...）
生成这些图片和HTML代码
您可以立即生成所有这些图片和HTML代码。全面披露：我是这个网站的作者。
I was wondering if i have everything covered to include all favicons / start splash screens for all browsers and devices?
Is this enough? Or what are the main ones I should be covering? Am i missing any below:
<link rel="icon" href="/images/favicons/favicon.png">
<link rel="apple-touch-icon" href="/images/favicons/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/touch-icon-ipad-retina.png">
<meta name="application-name" content="site">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
<meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
<meta name="msapplication-wide310x150logo" content="/images/favicons/msap plication-wide.png">
<meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png">
Thanks
Classic favicon for desktop browsers
Drop a favicon.ico file in the root directory of your web site. It does not need to be declared and it is expected to contain 16x16, 32x32 and 48x48 pictures.
Modern browsers will also look for PNG icons. You can address most cases with:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
iOS
If you combine iOS 6 and iOS 7 sizes, iPad and iPhone, and Retina and non-Retina, that gives you 8 Apple touch icons:
<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">
Android
Android Chrome uses the Apple touch icon. But it also documents a 196x196 PNG icon that will replace the touch icon... someday. So:
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
Windows 8.0 tile picture
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Windows 8.1 tile pictures
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
<meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
<meta name="msapplication-wide310x150logo" content="/images/favicons/msap plication-wide.png">
<meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png">
or use a browserconfig.xml dropped in the root of your web site (or declared in the head section), with the following content:
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
The other guys
What about Google TV, Opera Speed dials and others? They expect PNG icons:
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
(...)
Generate these pictures and HTML code
You can generate all these pictures and HTML code at once. Full disclosure: I'm the author of this site.
这篇关于所有浏览器和设备的favicon / start sreens的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
