我有一个尺寸为height = 26px/width = 20px的图标,名为favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
但是,在我的浏览器中,我的favicon.png都是扭曲的.
问题:我的favicon.png应该是特定尺寸吗？另外,我可以使用非标准尺寸/尺寸,如果是,如何使用？
我正试图了解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">
我错过了什么吗？
我不清楚这是否会涵盖IE 10？
题
方法1
放置favicon.ico在主目录中命名的文件是一种方法.浏览器始终请求该文件.您可以在apache日志文件中看到它.
方法2
部分中的HTML标记<head>:
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
从2019年开始,应该使用哪些favicon尺寸,文件格式和元/链接标签？这包括苹果图标,Windows,Android和人们今天使用的其他设备.
我使用Opera,我可以看到它支持svg格式.这是现在使用svg的最佳解决方案吗？有没有选项"一个文件适合所有"？
我一直在浏览许多网站并检查了不同的"favicon生成器".所有这些都是岁,并且主要使用png文件.
示例: 应该使用哪些代码ico和svg？
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
或者如果ico包含更多尺寸,是否应指定尺寸？我找不到一个好的答案.
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
请提供应使用哪些favicons的维度,文件格式和元/链接标记.
当一个网站提供多个 faviconlink标签时，浏览器会采用什么样的规则来确定实际使用哪个图标？
例如，IMDB的 html src包含以下片段：
<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">
选择哪个图标以及其他图标的用途是什么？
我注意到rel="shortcut icon"总是被设置为最高优先级。如果是这样，浏览器将如何处理具有多个标签的网页shortcut icon？
我正在使用这个在线favicon生成器为我的网站创建一个favicon,工具输出提供了很多图标,而不仅仅是网站图标.我很好奇你认为哪一个网站是强制性的,你觉得哪些是不必要的:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
关于网站图标的所有讨论都建议创建不同大小的网站图标以针对不同的客户。例如，请参见以下答案：favicon是否必须为32x32或16x16？
我的问题：真的有必要生成这么多不同大小的图标吗？如果我创建了一个大小为200x200的大型图标，该怎么办？我看到各种浏览器（例如Chrome和Firefox）会自动将其缩小以在浏览器选项卡中显示缩小的图标。
那么，如果要选择一个大小为200x200的大型网站图标，会有什么问题？
注意：我希望网站图标可以在符合标准的任何设备浏览器上运行（如果网站图标适用于该图标）。例如，如果iOS Safari违反了标准，那么我对支持它就不会太烦。