对多数浏览器标签够用。若做 PWA 或注重 iOS 主屏幕，请再准备 PNG 图标。

可以只用 SVG 吗？

现代浏览器支持增强中，但 ICO/PNG 组合仍是最稳妥的默认方案。

为什么我改了图标标签还是旧的？

缓存。试无痕窗口、改文件名或给 href 加版本参数。

常常同源，但 favicon 要为极小尺寸单独简化；页头 Logo 可以更细。

Favicon 是标签栏里那颗小图标，用户靠它扫一眼认出你的站。制作并不复杂：准备简洁的方形稿 → 导出多尺寸（常打成 `.ico`）→ 在 HTML 里引用，必要时再补 iOS 触控图标。下面按步骤说明，也可直接打开 Favicon 生成器。

16×16 像素时，细线、小字、复杂渐变都会糊掉。用大色块、少细节的图形，比把完整Slogan 塞进图标更有效。

尽量正方形。长条 Logo 请先裁成方构图，再生成，否则四周容易空、主体过小。

母版用 SVG 或至少 256×256（更好 512×512）的 PNG，缩小才有余地。

经典做法是一个 `favicon.ico` 内含 16、32、48 等尺寸，桌面浏览器兼容最好。

用站内 Favicon 生成器上传 PNG/SVG/JPG，选尺寸套餐后下载即可，免去手工拼容器。

现代站也可同时提供 PNG：例如 32×32、180×180。PWA 还要在 web app manifest 里声明图标列表。

常见是把 `favicon.ico` 放在网站根目录，或按框架（Next、Astro 等）约定放进 `public/`。

基础引用示例：`<link rel="icon" href="/favicon.ico" sizes="any">`。若还有 PNG，可再加 `rel="icon" type="image/png" sizes="32x32"`。

iOS 主屏幕图标常用 180×180 PNG：`<link rel="apple-touch-icon" href="/apple-touch-icon.png">`。

硬刷新或无痕窗口打开站点，看标签栏是否更新（浏览器会强缓存 favicon）。

用手机「添加到主屏幕」检查 apple-touch-icon 是否清晰、有无多余边距。

换品牌色后记得同时更新 ICO、PNG 与 manifest，避免旧图标残留。

只把大图改名为 favicon.ico，却未真正包含多尺寸——部分环境显示模糊。

只用 SVG favicon：支持在变好，但企业内网旧浏览器仍可能空白，ICO/PNG 更稳。

透明底在部分 Windows 标签上显得「碎」，可改为实色底小标。

上传方形 Logo，用 [[favicon-generator|Favicon 生成器]] 下载多尺寸 favicon，再按上文写入 HTML。