Favicon 术语表

Favicon 是浏览器在标签页、书签和历史记录中为你的网站显示的小图标。它是什么、你需要哪些尺寸和格式，以及如何添加。

App 图标代表主屏幕或启动器上已安装的应用，而不是浏览器标签页里的网站。每个平台从哪里读取它，以及要发布什么。

favicon 是那个小小的标签页图标；Open Graph 图像是你的链接被分享时那张大的预览图。不同的文件做不同的活：这里说清哪个是哪个。

logo 是你完整的品牌标志；favicon 是一个必须在 16 像素下读得清的微型衍生物。为什么你不能直接缩小 logo，以及如何衍生一个能用的。

手工制作 favicon 意味着自己导出每个尺寸、自己写标签；生成器在几秒内把两件事都做掉。什么时候手工来做没问题，什么时候不行。

Favicon 尺寸完整指南。涵盖浏览器、iOS、Android 和 PWA 的每一个尺寸、哪些是必备的，以及每个文件放在哪里。

<link rel="icon"> 标签告诉浏览器你的 favicon 在哪里。rel、href、type 和 sizes 各自的作用、标签放在哪里，以及值得发布的现代标签组。

"shortcut icon" 是 favicon 的一个遗留 rel 值。为什么 "shortcut" 关键字是多余的、你是否还需要它，以及该改写成什么。

浏览器对 favicon 的缓存比大多数资源更狠、更持久，而且与页面分开缓存。它们为什么这么顽固，以及如何强制 favicon 刷新。

favicon 可以响应操作系统的浅色或暗色设置：一张内嵌媒体查询的 SVG，或用 link 标签上的 prefers-color-scheme 切换的两张 PNG。

Google 会在你的搜索结果旁显示一个 favicon，主要在移动端。它需要的尺寸和格式、它如何找到图标，以及你的为什么可能不出现。

无论你是否链接它，浏览器和爬虫都会从你的域名根目录请求 /favicon.ico。为什么这个文件属于根目录，以及框架如何改变你放它的位置。

BIMI 在支持的收件箱里把你的品牌 logo 显示在邮件旁：邮件界的 favicon。它需要什么：一个 SVG Tiny PS logo、DMARC 强制执行，以及往往还需要一张证书。

favicon 在方形的位置里渲染，所以一个非方形图像会被留边或拉伸。为什么方形实际上是必需的，以及如何处理一个宽幅 logo。

favicon 很小：一个 favicon.ico 通常是几千字节，PNG 尺寸远小于 100KB。是什么决定了大小，以及为什么一个过大的 favicon 是一个警示信号。

ICO 与 PNG favicon 对比：色深、透明度、文件大小与浏览器支持，以及无冲突地同时发布两者所需的 head 标签。

SVG favicon 是一个矢量文件，在每个尺寸下都保持锐利，并能响应暗色模式。浏览器支持情况、link 标签，以及要保留的后备方案。

favicon.ico 是浏览器在未声明图标时从你站点根目录请求的图标。文件里面有什么、放在哪里，以及为什么要保留它。

你可以把 favicon 作为 base64 data URI 内联，而不用单独的文件。这在什么时候能省下一次请求，以及它会在哪些位置悄悄失效。

一些浏览器会在标签页里播放 GIF favicon。哪些支持、为什么网站转而用 JavaScript 表示实时状态，以及何时该保持静态。

WebP favicon 在大多数现代浏览器里能用，但并非到处都行，而且对 /favicon.ico 永远无效。什么时候 WebP 图标没问题，以及为什么 PNG 和 ICO 仍是稳妥之选。

透明的 favicon 在标签页里看起来干净，但在 iOS 主屏幕上会出问题，因为那里会合成到黑色上。什么时候透明有帮助，什么时候该用实心背景。

你可以用一行内联 SVG 把 emoji 当作 favicon：作为快速占位符很方便。为什么它在每种操作系统上渲染不同，以及何时该导出一个真实文件。

Manifest 图标是 manifest.json 里 icons 数组中的条目。每个字段的作用、要声明的尺寸，以及浏览器如何从中挑选。

Maskable 图标填满整个方形，让平台能把它裁剪成任意形状。80% 安全区、manifest 的 purpose 字段，以及如何测试它。

Web app manifest 是一个 JSON 文件，告诉浏览器你的网站被安装后如何表现：它的名称、图标、颜色和显示模式。它包含什么，以及为什么需要。

在浏览器提议安装之前，PWA 需要特定的图标：manifest 里的 192x192 和 512x512、最好还有一个 maskable，以及给 iOS 的 apple-touch-icon。

manifest 的 display 属性决定一个已安装 PWA 的样子：browser、minimal-ui、standalone 或 fullscreen。每种模式显示什么，以及该选哪个。

manifest 里有两个各司其职的颜色：theme_color 为你应用周围的操作系统界面着色，background_color 绘制启动画面。外加 meta theme-color。

apple-touch-icon 是 iOS 在把网站添加到主屏幕时使用的 PNG。180x180 尺寸、link 标签，以及为什么透明会变成黑色。

theme-color meta 标签告诉浏览器该把页面周围的界面涂成什么颜色。它出现在哪里、暗色模式变体，以及对应的 manifest 字段。

Safari 固定标签页使用一个用 rel="mask-icon" 声明的单色 SVG。这个文件必须长什么样、color 属性，以及它是否还重要。

precomposed 变体告诉老版 iOS 不要给主屏幕图标加它那层光泽高光。它现在是否还起作用，以及今天该用什么。

browserconfig.xml 和 msapplication-* meta 标签为 Windows 和旧版 Edge 定义固定网站的磁贴。它们曾经的作用，以及你是否还需要它们。

apple-mobile-web-app-capable meta 标签让一个主屏幕 Web 应用在 iOS 上全屏运行。它的作用、状态栏标签，以及现代的 manifest 替代方案。

apple-touch-startup-image 为添加到 iOS 主屏幕的 Web 应用设置启动画面。为什么它每个设备尺寸都需要一张图，以及涉及的媒体查询。