> ## Content Index
> Fetch the complete content index at: https://www.tool-cloud.com/blog/zh-hans/llms.txt
> Use this file to discover other available public pages before exploring further.
# 如何从 Logo 创建 Favicon（所有尺寸详解）
- URL: https://www.tool-cloud.com/blog/zh-hans/how-to-create-a-favicon-from-a-logo/
- Published: 2026-10-04T23:09:46.000Z
- Updated: 2026-10-04T23:25:06.000Z
- Description: 将你的 Logo 转化为清晰的 Favicon。了解哪些尺寸仍然重要，如何准备 PNG、JPG 或 SVG 格式的 Logo，以及每个文件在 HTML 中的确切放置位置。
- Author: Tool Cloud Team
- Tags: 指南, 图片, 文件格式
要从 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](https://seotest.app/blog/how-to-make-a-favicon-png-ico-svg-apple-touch)。
| 文件 | 尺寸 | 用途 | 使用者 |
| -------------------- | ------------- | ---------------- | ----------------------- |
| favicon.ico | 16, 32, 48 打包 | 经典 Favicon，根目录回退 | 浏览器标签页、Feed 阅读器、链接预览机器人 |
| favicon.svg | 可缩放 | 任意尺寸下的清晰图标 | 现代桌面浏览器 |
| apple-touch-icon.png | 180x180 | 主屏幕图标 | iPhone 和 iPad |
| icon-192.png | 192x192 | 启动器图标 | Android Chrome、PWA 清单 |
| icon-512.png | 512x512 | 安装和启动画面图标 | Android Chrome、PWA 清单 |
只需一个主标志，将其调整为精简版的图标文件集。
许多生成器会给你一个包含十几个文件的 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 的网站图标生成器](https://www.tool-cloud.com/zh-hans/image/generate%5Ffavicon/)，上传你的方形标志并下载标准尺寸的 ZIP 包。使用与上表匹配的文件，并单独创建缺失的文件（如 SVG 或 192/512 PNG）。忽略 HTML 中未引用的任何文件。
### 方案 2：将标志转换为单个 ICO 文件
如果你只需要 favicon.ico，请使用 [图片转 ICO 转换器](https://www.tool-cloud.com/zh-hans/image/convert%5Fto%5Fico/)。上传你的标志并进行转换，然后将结果重命名为 `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 代码片段
将所有文件上传至网站根目录，然后将以下代码添加到 `` 中。`sizes` 属性遵循 [关于 Chrome 如何选择图标的说明](https://dev.to/vannsl/the-surprisingly-weird-world-of-favicons-and-how-to-survive-it-5a2l)：
```html
```
几点注意事项：
- 使用 `rel="icon"`。`rel="shortcut icon"` 是旧式用法；“shortcut”未注册且多余。
- 浏览器按类型而非位置选择图标，因此顺序并不关键。`type="image/svg+xml"` 属性允许不支持 SVG 的浏览器跳过它并使用 ICO。
- 为 ICO 指定具体尺寸，并为 SVG 添加 `sizes="any"`。如果在 ICO 上添加 `any`，可能会导致 Chrome 优先选择它而不是 SVG。
### Web 应用清单
```json
{
"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 查询字符串，或在无痕窗口中检查。