favicons.zip 里有什么
上传一张图片,生成器就会在浏览器里生成现代网站需要的全部文件:
| 文件 | 尺寸 | 用途 |
|---|---|---|
favicon.ico |
16、32、48 px 合在一个文件里 | 浏览器标签页、书签、Windows,以及任何请求 /favicon.ico 的工具 |
favicon-16x16.png |
16×16 | 普通屏幕上的标签页 |
favicon-32x32.png |
32×32 | 高分辨率屏幕上的标签页、快捷方式 |
favicon-48x48.png |
48×48 | Google 搜索结果、桌面快捷方式 |
apple-touch-icon.png |
180×180 | iPhone、iPad 的"添加到主屏幕" |
android-chrome-192x192.png |
192×192 | Android 主屏幕 |
android-chrome-512x512.png |
512×512 | 以应用形式安装的网站(PWA)及其启动画面 |
site.webmanifest |
— | 告诉 Android/Chrome 两个大图标在哪里 |
README-favicon.html |
— | 需要粘贴的 HTML 标签 |
什么样的原图效果最好
- 正方形、简洁、醒目。 16 px 下一共只有 256 个像素。带标语的完整 Logo 会糊成一团,而单个字母或符号依然清晰。很多品牌会专门为 favicon 准备一个简化版标志。
- 至少 512×512。 最大的图标是 512 px,比它小的原图会被放大而发虚。SVG Logo 最理想——会先以高分辨率渲染再缩小。
- 透明 PNG 或 SVG。
.ico和小尺寸 PNG 会保留透明背景,所以图标在浏览器的浅色和深色主题下都好看。 - 不是正方形? 图片会完整放进正方形里,不做裁剪,两侧留出透明空白。如果想铺满整个正方形,可以先 裁剪图片,或用 圆形裁剪 做一个圆形版本。
Apple touch 图标的背景
iOS 的主屏幕图标不支持透明,透明区域会变成黑色。因此 180×180 的 apple-touch-icon.png 一定会带纯色背景。默认是白色;可以用上传区旁边的颜色选择框换成你的品牌色(取色器 可以从 Logo 中取出颜色)。其他尺寸仍保持透明。
文件放在哪里
- 解压后把所有文件上传到网站 根目录,确保
https://yoursite.com/favicon.ico能打开图标。 - 把
README-favicon.html里的标签粘贴到每个页面的<head>中(或主题的页头模板里):
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
- 如果网站在子目录下,请相应修改路径。
在 WordPress 中,外观 → 自定义 → 站点身份 → 站点图标 只需一张 512×512 的图片即可完成设置,使用 android-chrome-512x512.png 就行。Shopify、Wix、Squarespace 等建站平台也有类似的"favicon"设置项。
附带的 site.webmanifest 只列出了图标。如果希望访客能把网站安装成应用,请补充 name、short_name、theme_color、background_color 和 "display": "standalone"。
"换了 favicon,看到的还是旧的"
favicon 的缓存比网站上几乎任何东西都顽固。
- 直接打开
https://yoursite.com/favicon.ico并强制刷新(Ctrl + F5,Mac 上为 Cmd + Shift + R)。 - 给链接加上版本号,比如
href="/favicon.ico?v=2",浏览器就会把它当作新文件。 - 如果使用了 CDN 或缓存插件,记得清除缓存。
- 书签和主屏幕快捷方式在重新创建之前会一直显示旧图标。
- Google 只有在重新抓取你的首页之后才会更新搜索结果中的图标,可能需要几天到几周。Google 要求图标为正方形且边长是 48 px 的倍数——48×48 的 PNG 和
.ico都符合要求。
相关工具
- 把照片做成图标之前先去掉背景:去除背景。
- Logo 只有 WebP 格式?如果编辑软件打不开,就先转成 PNG。
- 需要一张普通的 512×512 图片用于店铺或头像?调整为 512×512。