如何从 Logo 创建 Favicon（所有尺寸详解）

要从 Logo 创建 Favicon，请从一个正方形 Logo（SVG，或 512x512 及以上尺寸的 PNG）开始。导出一个 favicon.ico，最好在其中包含 16、32 和 48px 的版本，然后添加一个 180x180 的 Apple 图标和用于 manifest 的 192/512 PNG 文件，并在 HTML 中链接它们。这只需要五个文件（ICO、SVG、Apple 图标和两个 manifest PNG），而不是十几个。以下是制作每个文件及其放置位置的方法。

简短回答：你需要的 Favicon 文件

现代最小集包括一个 ICO、一个 SVG、一个 Apple 触摸图标和两个 manifest PNG。当你拥有多尺寸 ICO 时，单独的 16/32/48 PNG 文件和 Microsoft 磁贴图片是 unnecessary。

许多生成器会给你一个包含十几个文件的 ZIP 包，但大多数浏览器根本不需要它们。512x512 的主图已经足够，你无需制作更大的尺寸。

详解各尺寸图标：它们的用途是什么

favicon.ico（16、32、48）

ICO 是一种容器格式，可将多个位图打包在一个文件中。常见的组合是 16、32 和 48px；如果你在意 Windows 大图标，再添加 256px。

它仍然值得保留。爬虫、Feed 阅读器和链接预览机器人通常默认从网站根目录获取 /favicon.ico。Chromium 的行为有所不同：在发布的请求测试中，只有当页面未声明任何图标时，它才会获取 /favicon.ico。如果声明了 SVG，它仅请求 SVG，且优先使用 ICO 而非独立的 PNG 链接。

跳过独立的 32x32 PNG。 有些指南列出了它，但该测试显示在存在 ICO 时它不会被使用。该测试仅涵盖 Chromium，因此 Firefox 和 Safari 的行为尚未经过验证。

favicon.svg

SVG 图标在 Chrome 80+、Firefox 41+ 和 Edge 中可用。Safari 的支持较新且不稳定，且在 iOS 版 Safari 中无法使用。请将 SVG 视为补充，绝不能替代 ICO。

apple-touch-icon（180x180）

180x180 是 Retina iPhone 的尺寸（60pt @ 3x）。只需一个 180px 的文件就足够了：iOS 会将其缩放以适配其他设备，包括 iPad。

清单图标（192 和 512）

Android Chrome 和已安装的网络应用会从 Web App 清单中读取图标。192px 文件用作启动器图标，512px 文件用作安装/启动画面图标。

Google 搜索需要什么

Google 会从你的主页读取图标。任何有效的图标格式均可，包括 ICO、PNG 和 SVG。图标必须是正方形，且至少为 8x8px。Google 建议尺寸大于 48x48，且为 48 的倍数。每个主机名只能使用一个图标。如果图标不合适，Google 会替换为通用的地球图标。

导出前准备好你的标志

正方形、大尺寸且透明

最佳源文件是 SVG。否则，请使用 512x512 或更大尺寸的方形 PNG。只进行缩小操作：从 1024px 缩小到 16px 能保留边缘细节，而从 32px 缩小到 16px 则不能，放大只会导致模糊。

如果你的标志不是正方形，请先使用 Tool Cloud 的图片裁剪和调整大小工具进行裁剪或填充。

保持 PNG 透明并采用 sRGB 色彩空间。不要合并图层或为了“以防万一”而添加背景。

网站图标可以是 JPG 格式吗？可以，但 PNG 或 SVG 效果更清晰。JPG 不支持透明背景，因此将 JPG 转换为 ICO 时会出现实心方块，且在极小尺寸下会显现压缩噪点。

简化至 16 像素

带有标语的完整标志在浏览器标签页中会变得模糊不清。推荐的做法是：

• 一个醒目且高对比度的图形标志
• 使用两到三种纯色
• 最多包含一两个粗体字符，不要使用文字商标

在实际尺寸下测试。如果半秒内无法辨认，请进一步简化。

提示：使用两张图片以获得最佳 ICO 效果

为了获得最高质量，建议为 16 和 32 像素尺寸使用简化的图形，而为 48 和 256 像素尺寸使用细节更丰富的图形。构建两个 ICO 文件，然后将简化版用作 favicon.ico，详细版用于 Windows 快捷方式。这是可选步骤，对于大多数网站来说，单个经过良好简化的标志就足够了。

将你的标志转换为 ICO 及其余全套文件

方案 1：生成网站图标全套包

打开 Tool Cloud 的网站图标生成器，上传你的方形标志并下载标准尺寸的 ZIP 包。使用与上表匹配的文件，并单独创建缺失的文件（如 SVG 或 192/512 PNG）。忽略 HTML 中未引用的任何文件。

方案 2：将标志转换为单个 ICO 文件

如果你只需要 favicon.ico，请使用 图片转 ICO 转换器。上传你的标志并进行转换，然后将结果重命名为 favicon.ico。检查 ICO 中包含的尺寸；如果缺少 16 或 32 像素版本，请改用上述生成器。

制作 180、192 和 512 像素的 PNG 文件

将你的方形主图调整为 180x180、192x192 和 512x512，并将其分别命名为 apple-touch-icon.png、icon-192.png 和 icon-512.png。

对于 Apple 图标，请使用不透明背景，并将标志居中并留出边距。iOS 不支持透明背景且会自动进行圆角处理，因此请勿预先做圆角。始终提供你自己的纯色背景，而不要依赖 iOS 自动填充的背景。

各文件在 HTML 中的放置位置

HTML 代码片段

将所有文件上传至网站根目录，然后将以下代码添加到 <head> 中。sizes 属性遵循 关于 Chrome 如何选择图标的说明：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

几点注意事项：

• 使用 rel="icon"。rel="shortcut icon" 是旧式用法；“shortcut”未注册且多余。
• 浏览器按类型而非位置选择图标，因此顺序并不关键。type="image/svg+xml" 属性允许不支持 SVG 的浏览器跳过它并使用 ICO。
• 为 ICO 指定具体尺寸，并为 SVG 添加 sizes="any"。如果在 ICO 上添加 any，可能会导致 Chrome 优先选择它而不是 SVG。

Web 应用清单

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chrome 的安装条件要求同时提供 192px 和 512px 图标。避免在单个文件中使用 "purpose": "any maskable"。对于可适配图标，请创建一个单独的文件，将图案放置在中心安全区内（在 512x512 画布中约为 409x409）。

在 WordPress、Squarespace、Shopify 和 Wix 中添加网站图标

各平台的菜单名称可能不同，请以你的后台显示为准。

• WordPress： 外观 > 自定义 > 站点标识 > 站点图标。上传一张 512x512 的 PNG 图片。
• Squarespace： 设计 > 浏览器图标。使用 300x300 的正方形 PNG 即可（也接受 ICO 格式）。
• Shopify： 主题设置 > 网站图标。上传一张 512x512 的正方形 PNG 图片。
• Wix： 设置 > 网站设置 > 网站图标（可能需要高级套餐）。

为什么你的网站图标模糊或无法更新

图标模糊或显示为实心方块

模糊通常是由于放大小型位图，或在 16px 尺寸下使用了过于复杂的 Logo 所致。解决方法是使用 SVG 并在 ICO 文件中提供 32px 或更大的版本，切勿将 16x16 的图片放大。Logo 背景呈实心方块，说明源文件没有透明度，通常是 JPG 格式。

仍显示旧图标

浏览器会缓存网站图标数天甚至数周。请按以下顺序尝试：

1. 强制刷新页面。
2. 直接访问 /favicon.ico 并刷新该页面。
3. 添加查询字符串，例如 /favicon.ico?v=2。
4. 在无痕窗口中检查。
5. 确认文件返回 HTTP 200 状态码，并清除 CDN 缓存。

iOS 主屏幕图标是按快捷方式单独缓存的，因此现有快捷方式不会自动更新，用户必须重新添加网站。如果是品牌重塑，请使用新的文件名。

Google 搜索未显示图标

更新可能需要几天到几周的时间，更改图标 URL 可能会延迟这一过程。确保你的首页通过 rel="icon" 引用了图标，且其尺寸符合上述规则。Google 并没有明确的 KB 大小限制；其规则主要关注尺寸。

实际操作建议

从 512px 或更大的正方形主图开始，并为标签页尺寸简化设计。上传文件后，将 HTML 代码片段和 Web 应用清单粘贴到你的网站中，并再次确认 Web 应用清单的链接存在。最后，以 16px 查看效果：如果标志不够清晰，请进一步简化。

常见问题

2026 年我还需要 favicon.ico 吗？

需要。无论你的 HTML 标签如何设置，浏览器、Feed 阅读器和链接预览机器人都会从网站根目录请求 /favicon.ico，因此这是一项低成本的风险保障。建议在一个文件中打包 16、32 和 48px 的版本。

Favicon 可以是 JPG 格式吗？

技术上可以，但 PNG 或 SVG 能提供更清晰的效果。JPG 不支持透明背景且存在压缩伪影，而照片包含的细节对于 16x16 像素来说过于复杂。

Google 搜索需要的 Favicon 尺寸是多少？

Google 需要至少 8x8px 的正方形图像，并推荐大于 48x48px 的尺寸。Google 不支持 SVG，因此请在首页声明 rel=icon 的 ICO 或 PNG 文件。

我需要单独的 16x16、32x32 和 48x48 PNG 文件吗？

通常不需要。多尺寸 ICO 文件已涵盖这些尺寸，Chromium 的请求测试发现当存在 ICO 文件时，独立的 PNG 文件未被使用。Firefox 和 Safari 未经过此项测试。

为什么我的新 Favicon 没有显示？

浏览器会积极缓存 Favicon，时间可能长达数天甚至数周。尝试强制刷新，直接在地址栏输入 /favicon.ico，添加 ?v=2 查询字符串，或在无痕窗口中检查。