Favicon Standard - 2022 - svg、ico、png 和尺寸？

Question

到 2022 年应该使用哪些图标尺寸、文件格式和元/链接标签？这包括苹果图标、windows、android 和人们今天使用的其他设备。

我使用 Opera，我可以看到它支持 svg 格式。它是当今使用 svg 的最佳解决方案吗？有没有“一个文件适合所有人”的选项？

我一直在浏览许多网站并检查了不同的“网站图标生成器”。它们都已有多年历史，主要使用 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">

请提供应该使用哪些网站图标的尺寸、文件格式和元/链接标签。

原文由 Jakub Muda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

免责声明：我是 RealFaviconGenerator 的作者，我希望它是最新的（主要见下文）。因此，如果这个答案与 RFG 生成的相符，请不要感到惊讶。

一刀切的神话

没有“一刀切”的图标。你不能创建一个单一的 SVG 图标并期望它在任何地方都能工作。

从技术角度来看，单个 SVG 图标将是一件好事。但从 UI 和 UX 的角度来看，这并不是一个理想的结果。比较 iOS 和 Android。在 iOS 上，所有主屏幕图标都是圆角的正方形（ iOS 用黑色填充 Touch 图标的透明区域）。在 Android 上，主屏幕图标通常使用非方形和透明度（包括 Google 应用程序图标）。提交一个触摸图标，Android Chrome 就会使用它。但是您将无法匹配 Android 图标指南，而专用图标可以。

所以我建议刻意避免使用单个图标。而是尽可能单独针对每个平台（并非总是如此）。

图标，每个平台的平台

苹果浏览器

iOS Safari 需要一个 触摸图标。截至今天，这是一个 180x180 PNG 图像。此图像不应使用透明度，添加到主屏幕时其角将自动圆角。声明：

 <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

多年来，这个图标已成为许多浏览器的“默认高分辨率图标”。因此，添加到书签等时，您会在其他地方找到它。

安卓铬

Android Chrome 依赖于 Web App Manifest 。虽然这个清单不是专门针对 Android Chrome 的，但它目前是它的主要支持者。因此，目前，将 Web App Manifest 中的图标用于 Android Chrome 仍然是相当安全的。

顾名思义，Web App Manifest 是针对 Web 应用程序的。但是任何网站都可以使用它来引用某些图标。

Android 需要 192x192 PNG 图标，允许并鼓励透明度。

清单声明为：

 <link rel="manifest" href="/icons/site.webmanifest">

边缘和 IE 12

Microsoft 引入了 browserconfig ，这是一个 XML 文档，其中列出了适合 Metro UI 的各种图标。

文件和 背景颜色 声明为：

 <meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

经典桌面浏览器

Windows/macOS Chrome、Windows/macOS Firefox、Safari、IE ……这一切都有些模糊。从历史上看，只有一个 favicon.ico 文件，仍然受支持。然而，最近的浏览器宁愿选择更轻的 PNG 图标。加上一些浏览器无法在 ICO 文件中选择正确的图标（这种格式可以嵌入多个版本的图标），导致错误使用低分辨率图标。

人们可能会想完全放弃旧的 favicon.ico 。尽管我想在 RFG 中实现这一飞跃，但我没有运行必要的测试来评估对旧浏览器的影响。

因此，我今天仍然推荐使用 favicon.ico 嵌入 16x16、32x32 和 48x48 图标的组合：

 <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

其它浏览器

其他浏览器可能有专用图标。例如 Coast by Opera 正在寻找 228x228 图标。关注这些浏览器的必要性并不明显。当他们找不到“他们的”图标时，他们通常会使用触摸图标或其他图标。

结论

正如开头所宣布的，这正是 RealFaviconGenerator 创建的。

原文由 philippe_b 发布，翻译遵循 CC BY-SA 4.0 许可协议