网站图标简史
favicon（“收藏夹图标”的缩写）由 Internet Explorer 5 于 1999 年引入，作为显示在地址栏中的 16×16 ICO 文件。 W3C 于 2000 年使用 HTML 元素对其进行了标准化。
在接下来的二十年里，需求急剧扩大：
- 2007 年： Apple 为 iOS 书签推出了 Apple Touch 图标 (57×57 PNG)
- ]2010 年： Android Chrome 添加了对网络应用程序的支持图标
- 2012 年： Windows 8 为固定 Metro 应用引入了图块图标
- ]2019 年： SVG 图标获得了浏览器支持，从而实现了与分辨率无关的深色模式感知图标
- 2023: PWA 安装要求标准化为 192×192 和 512×512
2026 年所有必需的网站图标尺寸
| 文件 | 大小 | 用途 |
|---|---|---|
| favicon.ico | 16×16， 32×32、48×48（多分辨率） | 浏览器选项卡、IE/旧版后备 |
| favicon-16x16.png | 16×16 | 小浏览器选项卡 |
| favicon-32x32.png | 32×32 | 浏览器选项卡、浏览器工具栏 |
| apple-touch-icon.png | 180×180 | iOS/macOS Safari 书签和主页屏幕 |
| android-chrome-192x192.png | 192×192 | Android Chrome 主页屏幕 |
| android-chrome-512x512.png | 512×512 | Android PWA 启动画面屏幕 |
| mstile-150x150.png | 150×150 | Windows 8/10 开始菜单tile |
| safari-pinned-tab.svg | SVG | Safari 固定标签（黑白SVG) |
| favicon.svg | SVG | 现代浏览器，深色模式自适应 |
SVG 图标：自适应深色模式支持
SVG 图标支持 CSS 媒体查询，启用亮/暗模式响应图标：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>此 SVG 自动在浅色模式下显示浅色图标，在深色模式下显示深色图标 - 非常适合需要适应系统主题的徽标。
在 ToolDolfen 上生成完整的网站图标集
- 打开 Favicon网站图标生成器。
- 上传高分辨率方形 PNG（推荐 512×512 或 1024×1024 — 更大的源 = 更好的质量）大小）。
- 生成器生成完整的 ZIP 包，其中包含：
- 所有必需的 PNG 尺寸 - ICO 文件（多分辨率） - Web 清单 JSON 模板 - 实施的 HTML 代码片段
- 解压 ZIP 并将文件放入项目的公共目录中。
- 将提供的 HTML 代码段添加到
。