2026 年需要哪些 favicon 尺寸？

含 16、32 和 48 px 图像的 favicon.ico、180 px 的 apple-touch-icon，以及供清单使用的 192 和 512 px 图标，就能覆盖几乎所有浏览器和手机。单独的 16 和 32 px PNG 以及一个 SVG 也值得加上，而 Favicon 生成器会把它们一并做好。

ICO、PNG 和 SVG 格式的 favicon 有什么区别？

ICO 是最初的容器格式，浏览器至今仍会自动从网站根目录请求它，因此能覆盖旧版浏览器和书签。PNG 是标签页和手机图标的稳妥之选。SVG 是单个矢量文件，任何尺寸都保持清晰，但并非所有浏览器都支持，所以这套图标把三种都包含在内。

favicon 文件和 link 标签应该放在哪里？

把文件上传到网站对外提供访问的文件夹，通常是首页旁边的根目录。然后把生成的标签粘贴到每个页面的 head 元素里。如果图标放在子文件夹，请先在工具里填写那个文件夹，这样标签和清单里的路径才会正确。

替换文件后，为什么我的 favicon 没有变化？

浏览器缓存 favicon 的方式和页面是分开的，可能会把旧图标留上好几天。请用 Ctrl+Shift+R 刷新图标自己的地址，清除该网站缓存的图片，或者在无痕窗口里测试。给文件改名并更新标签，也能强制重新下载。

可以用表情符号当 favicon 吗？

可以。切换到「Emoji」，输入或粘贴一个表情符号，再选择大小和可选的背景。PNG 和 ICO 文件是用这台设备的表情符号字体绘制的，所以在哪里看都一样。SVG 则使用实时文本，因此每位访客的系统会绘制它自己版本的表情符号。

Android 图标和清单图标有什么用？

192 和 512 px 的 PNG 会写进 site.webmanifest。Android 用它们作主屏幕快捷方式图标和启动画面，可安装的网页应用也需要它们。清单里还保存着你的应用名称、短名称和颜色，这些都可以在工具里设置。

ArrayKit

Favicon 生成器

把 Logo、几个字母或一个表情符号变成一整套 favicon 图标——favicon.ico、各尺寸 PNG、Apple touch icon、Android 图标和 HTML 标签——全部在你的浏览器中生成。

Favicon 生成器

你的 Logo 或文字在这个标签页里绘制到画布上，并在你的设备上打包进 ZIP。不会上传任何内容，所以尚未发布的品牌素材保持私密。

打开应用图标生成器

关于 Favicon 生成器

Favicon 生成器能用同一个来源生成整套网站图标。你可以从 Logo 之类的图片开始，也可以输入 1 到 3 个字符，或选一个表情符号。每个图标都是按它自己的像素尺寸单独绘制的，而不是从一张大图缩小而来：16、32 和 48 px 以 PNG 图像的形式装进同一个 favicon.ico，此外还有单独的 16 和 32 px PNG、180 px 的 Apple touch icon（苹果触摸图标），以及 Android 使用的 192 和 512 px 图标。套件里同时附带一份 Web 应用清单和一组 link 标签；文字或表情符号来源还会额外生成一个真正的 SVG favicon。下载之前，预览会逐像素展示每个尺寸，并放进浅色和深色的浏览器标签页里看效果。所有内容都在你的设备上渲染，你的图片绝不会被上传。

功能特性

来源可以是图片、文字或表情符号，下载前有实时预览
favicon.ico 内含 16、32 和 48 px 的图像，另有单独的 16 和 32 px PNG
180 px 的 Apple touch icon，填满底色并保持方角，好让 iOS 自己加圆角
192 和 512 px 的 Android 图标，并配有对应的 site.webmanifest
文字和表情符号来源会生成真正的 favicon.svg，任何尺寸都保持清晰
图片来源可调整适配方式、内边距、圆角半径和背景
从 16 到 180 px 的逐像素精确预览，以及浅色和深色的模拟浏览器标签页
所有文件打成一个 ZIP，link 标签可直接粘贴进页面的 head

如何使用 Favicon 生成器

选择「Image」「Text」或「Emoji」，然后拖入 Logo、输入最多 3 个字符，或选一个表情符号
调整适配方式、内边距、颜色和圆角形状，预览和浏览器标签页会同步更新
输入应用名称、主题色，以及图标将从哪个文件夹提供访问
下载 ZIP，把文件上传到你的网站，并把 link 标签粘贴进页面的 head

示例

输入

Source: emoji 🚀 on a rounded tile · theme colour #4f46e5 · icons in the site root

输出

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">

这是为文字或表情符号来源写出的标签；图片来源会省去 SVG 那一行。

常见错误与故障排除

上传新文件后，显示的仍是旧的 favicon。 — 浏览器会把 favicon 缓存很久。请直接打开图标的地址，用 Ctrl+Shift+R（Mac 上是 ⌘⇧R）强制刷新它，然后再刷新页面。无痕窗口会立刻显示当前的图标。
图标在浏览器标签页里模糊不清，糊成一团。 — 请从至少 512 px 的正方形图片开始，并让图案保持简洁，因为细节在 16 px 下会消失。宽幅的 Logo 通常加大内边距，或使用「Cover」适配，效果更好。
Apple touch icon 的四角是黑的，或者背景变成了黑色。 — iOS 会把透明像素涂成黑色。180 px 的图标会用你的图标背景色填满；如果图标本身是透明的，则用 Web 应用清单中的背景色填满；它的四角保持方形，由 iOS 自己加圆角。
文件列表里没有 favicon.svg。 — 只有「Text」和「Emoji」来源才有真正的 SVG，因为其中的字符仍保持为文本。照片或 Logo 文件放进 SVG 只是给位图套了个壳，所以这类来源由 PNG 和 ICO 文件负责。

常见问题

2026 年需要哪些 favicon 尺寸？: 含 16、32 和 48 px 图像的 favicon.ico、180 px 的 apple-touch-icon，以及供清单使用的 192 和 512 px 图标，就能覆盖几乎所有浏览器和手机。单独的 16 和 32 px PNG 以及一个 SVG 也值得加上，而 Favicon 生成器会把它们一并做好。
ICO、PNG 和 SVG 格式的 favicon 有什么区别？: ICO 是最初的容器格式，浏览器至今仍会自动从网站根目录请求它，因此能覆盖旧版浏览器和书签。PNG 是标签页和手机图标的稳妥之选。SVG 是单个矢量文件，任何尺寸都保持清晰，但并非所有浏览器都支持，所以这套图标把三种都包含在内。
favicon 文件和 link 标签应该放在哪里？: 把文件上传到网站对外提供访问的文件夹，通常是首页旁边的根目录。然后把生成的标签粘贴到每个页面的 head 元素里。如果图标放在子文件夹，请先在工具里填写那个文件夹，这样标签和清单里的路径才会正确。
替换文件后，为什么我的 favicon 没有变化？: 浏览器缓存 favicon 的方式和页面是分开的，可能会把旧图标留上好几天。请用 Ctrl+Shift+R 刷新图标自己的地址，清除该网站缓存的图片，或者在无痕窗口里测试。给文件改名并更新标签，也能强制重新下载。
可以用表情符号当 favicon 吗？: 可以。切换到「Emoji」，输入或粘贴一个表情符号，再选择大小和可选的背景。PNG 和 ICO 文件是用这台设备的表情符号字体绘制的，所以在哪里看都一样。SVG 则使用实时文本，因此每位访客的系统会绘制它自己版本的表情符号。
Android 图标和清单图标有什么用？: 192 和 512 px 的 PNG 会写进 site.webmanifest。Android 用它们作主屏幕快捷方式图标和启动画面，可安装的网页应用也需要它们。清单里还保存着你的应用名称、短名称和颜色，这些都可以在工具里设置。

Favicon 生成器

Favicon 生成器

关于 Favicon 生成器

功能特性

如何使用 Favicon 生成器

示例

常见错误与故障排除

常见问题

相关工具

更多图片工具