正确定义网站图标答案

【问题标题】：Properly define icon for website正确定义网站图标
【发布时间】：2014-04-19 18:59:38
【问题描述】：

假设我有一个带有我想用于我的网站的图标的 SVG。

我应该将它转换成什么尺寸和格式？
我的 HTML 会是什么样子？

我知道如何指定一个简单的 16x16 图标，但我的目标是让图标在尽可能多的用例中都能正常工作并且看起来不错。例如图标、书签、iPhone 触摸图标、桌面图标、Windows 8 固定网站等等。

所以，基本上是在寻找一个 HTML 示例，尽可能多地涵盖图像文件的格式和大小。

【问题讨论】：

我无法清楚地理解您想要做什么？您想涵盖所有常见的图像尺寸，如 16x16、24x24、32x32 等？你能详细说明一下吗？
找到了一个有用的网站，所以自己添加了一个答案。看到之后你应该清楚我的意思;)

标签： html icons favicon apple-touch-icon pinned-site

【解决方案1】：

找到了一个非常有用的网站，RealFaviconGenerator.net。您只需上传您的图像，它会为您处理其余的。它生成的 HTML 如下所示：

<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">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

所有链接都包含图片应有的尺寸。此外，此处未提及的 favicon.ico 因为假定它位于其默认位置，因此包含几种不同的大小。我认为是 16、24 和 32。

很棒的网站！

【讨论】：

哦，是的，多么棒的资源！好吧，我是RFG的作者，所以我可能不公正:)关于不同图片的大小和它们的大小，你可以在这里找到一个列表：realfavicongenerator.net/faq#why_so_many_files
@philippe_b 太棒了！我是公正的，我发现它也是一个很好的资源：p

【解决方案2】：

我会研究类似 ico-moon 应用程序。它提供了一个非常易于使用的字体/svg 生成器，可能更适合您。

http://icomoon.io/app/#/select

【讨论】：