如何创建网站图标
使用正确的工具创建一个网站图标只需两分钟即可完成。从方形源图像（至少 512×512 像素）开始，通过 favicon generator 运行它，并获得完整的包：多尺寸 .ico、SVG、apple-touch-icon 和清单 PNG。本指南介绍了从源代码准备到浏览器验证的每一步。如需深入参考，另请参阅 full tutorial。
网站图标是浏览器在选项卡栏、地址栏和书签列表中显示的小图标。在移动设备上，当用户保存您的网站时，它会成为主屏幕图标。在 Windows 上，它出现在任务栏引脚和桌面快捷方式上。获得正确的网站图标是一个小小的努力，但却具有巨大的品牌影响力——每个页面视图都从位于用户选项卡中的图标开始。
现代图标设置不是一个单一的文件——它是一个协调的集合。多尺寸 .ico 处理通用浏览器回退。 SVG 在现代浏览器上提供清晰的可扩展渲染，包括暗模式支持。 iOS 用于主屏幕安装的是 180×180 PNG (apple-touch-icon)。 192×192 和 512×512 PNG 提供 Android PWA 安装提示。一张精心准备的源图像会立即生成所有这些内容。
源图像准备是最容易被忽视的步骤。你的标志必须是方形的——不对称的裁剪总是会产生拉伸的结果。设计品牌标志的简化版本，使其在小尺寸下清晰可读：减少细线、删除微小文本并增加对比度。如果您跳过此简化过程，在 512×512 下看起来很优雅的内容在 16×16 下可能会变成难以阅读的斑点。
SVG 是理想的源格式，因为它与分辨率无关。矢量图形可以栅格化为任何像素密度，而不会造成质量损失。如果您只有栅格 PNG 或 JPG，请确保在生成之前它至少为 512×512 - 从任何较小的尺寸缩小会导致模糊，并在每个调整大小步骤中复合，并导致模糊的选项卡图标。
.ico 格式是一个容器，而不是单个图像。它在单个文件中保存多个光栅帧（通常为 16×16、32×32、48×48 和 64×64）。浏览器解析 ICO 目录并仅渲染与其所需的显示密度最匹配的帧。这种单文件方法意味着您不需要为每种分辨率提供单独的链接标签 - 一个标签涵盖所有选项卡大小。
将源图像上传到 favicon generator。该工具在您的浏览器中本地处理所有内容 - 您的图像永远不会离开您的设备。它会在几秒钟内生成一个下载包，其中包含 favicon.ico、favicon.svg、apple-touch-icon.png (180×180)、android-chrome-192x192.png、android-chrome-512x512.png 和 site.webmanifest，以及可粘贴的 HTML 链接标签。
放置文件很简单。将所有生成的文件放入站点的公共根目录中 - 与您的 index.html 服务相同的文件夹。对于 Vite 和创建 React 应用程序项目，这是 /public 文件夹。对于 Next.js App Router 项目，将 favicon.ico 放在 /app 中，将 PNG 文件放在 /public 中。对于静态站点，请将所有内容与 HTML 文件放在一起。
HTML 链接标签告诉浏览器每个上下文使用哪个文件。最少一行：`<link rel='icon' href='/favicon.ico'>`。完整的推荐集又添加了三行：一行用于 SVG 变体，一行用于 apple-touch-icon，一行用于 Web 清单。将生成的代码片段粘贴到“<head>”元素中。标签顺序并不重要，只要它们在“</head>”之前即可。
当网站图标似乎没有更新时，浏览器缓存是造成混乱的主要原因。浏览器会按源缓存 /favicon.ico，并且可能不会像对待其他资源那样遵守标准缓存控制标头。如果旧图标仍然存在，请打开一个新的隐身窗口，或将缓存破坏查询字符串（如 `?v=2`）附加到链接标记中的 href，以强制浏览器获取更新的文件。
常见错误包括上传非方形图像（产生拉伸图标）、使用低于 256×256 像素的源（在较大显示尺寸下模糊）以及省略 apple-touch-icon（iOS 主屏幕安装显示页面屏幕截图）。这三个问题都是通过从方形 512×512 PNG 或 SVG 源开始并让生成器处理每个输出大小来解决的。
暗模式支持值得从一开始就建立起来。当用户的系统处于深色模式时，许多浏览器会以深色镶边呈现选项卡栏。如果您的图标是透明背景上的深色标记，它可能会消失在深色选项卡中。发送带有嵌入式 `@media (prefers-color-scheme: dark)` 样式块的 SVG 图标，该块可切换填充颜色 - 不需要额外的 HTML 标签，只需更新的 SVG 文件。
部署后使用 live favicon tester 验证您的网站图标。测试器模拟浏览器选项卡、书签和安装提示上下文，并显示图标如何并排呈现 16、32、48、128 和 512 像素。还要手动检查 Chrome 和 Safari 中的固定选项卡，并使用 iOS 上的“添加到主屏幕”来确认 apple-touch-icon。
有关特定于平台的演练，请参阅 favicon for WordPress、favicon for Shopify、favicon for React 和 favicon for Next.js。生成的文件集在所有平台上都是相同的 - 不同的是上传文件的位置以及平台如何注入或覆盖 HTML 链接标签。
每当您重塑品牌时，请重新访问您的网站图标。在网站重新设计上线后很长时间内，缓存的网站图标仍会保留在书签和移动主屏幕中。更新链接标记 href 中的版本字符串会强制浏览器在下次访问时获取新文件，从而逐渐替换所有缓存位置中的旧图标。请参阅 best favicon format 指南，了解文件大小和兼容性权衡的逐格式细分。
工作原理
- 1
准备一个方形源图像
将您的徽标或图标导出为具有透明背景的 512×512 PNG，或导出为具有方形 viewBox 的 SVG（例如，`viewBox='0 0 512 512'`）。简化在 16×16 分辨率下不可见的精细细节。
- 2
生成您的网站图标包
将源上传到 [favicon generator](tool:favicon-generator)。该工具一次性生成 favicon.ico（多尺寸 16/32/48/64）、favicon.svg、apple-touch-icon.png (180×180)、android-chrome-192x192.png、android-chrome-512x512.png 和 site.webmanifest。
- 3
将所有文件复制到站点根目录
将下载 zip 中的每个文件放入项目的公共根目录 - 为 index.html 提供服务的目录。对于 Next.js App Router，favicon.ico 进入 /app； PNG 进入 /public。
- 4
将 HTML 链接标签粘贴到 <head> 中
复制生成的 HTML 片段并将其添加到“<head>”元素中。全套内容涵盖 .ico 后备、SVG 变体、apple-touch-icon 和清单链接 — 总共六行。
- 5
跨浏览器和设备进行验证
在 Chrome、Safari、Firefox 和 Edge 中打开您的网站。检查选项卡、书签栏和地址栏。在 iOS 上，点击共享表和“添加到主屏幕”以测试 apple-touch-icon。使用 [favicon tester](utility:favicon-tester) 进行快速模拟。
- 6
更新现有网站图标时缓存失效
如果替换实时图标，请增加链接标签 href 中的版本字符串（`?v=2`、`?v=3` 等）。这迫使所有浏览器在下一个页面加载时获取更新的文件，而不是提供缓存的版本。
立即尝试
立即创建您的网站图标
Favicon 生成器常见问题
创建网站图标最简单的方法是什么？+
将 512×512 方形 PNG 或 SVG 上传到 FetchFavicon 生成器。它会在一秒钟内生成所有必需的文件 - .ico、SVG、apple-touch-icon、清单 PNG - 以及可粘贴的 HTML，无需注册，也无需服务器上传。
我的源图像应该是什么尺寸？+
至少 512×512 像素，最好是 SVG。较小的风险会导致 Windows 使用的 256×256 尺寸和 PWA 安装提示所需的 512×512 尺寸出现可见模糊。放大小图像会导致每个调整大小步骤的质量损失。
我需要 apple-touch-icon 吗？+
是的，如果任何访客使用 iPhone 或 iPad。如果没有它，iOS 主屏幕安装将显示页面的低质量屏幕截图缩略图，而不是您的品牌标记。您只需要一个 180×180 PNG 链接到`<link rel='apple-touch-icon'sizes='180x180'href='/apple-touch-icon.png'>`。
为什么我的网站图标没有显示在浏览器选项卡中？+
最常见的是缓存问题。打开私人/隐身窗口并导航到您的网站。如果它仍然没有出现，请验证 favicon.ico 是否在您的域根目录中提供，并且链接标记 href 路径是否正确解析 - 检查是否有拼写错误和缺少前导斜杠。
我需要 .ico 和 SVG 吗？+
是的，为了全面覆盖。 .ico 处理旧版浏览器、Windows 快捷方式以及直接获取 /favicon.ico 的第三方工具。 SVG 可在 Chrome、Firefox、Edge 和 Safari 15+ 上处理清晰的渲染，并支持暗模式颜色切换。组合文件大小通常小于 30 KB。
网站图标更改需要多长时间才能传播？+
从几秒到几天不等，具体取决于浏览器缓存原始内容的积极程度。最快的修复方法是将新的查询字符串 (`?v=2`) 附加到您的 favicon href。这使得浏览器将其视为新 URL 并立即获取新副本。
我可以使用 JPEG 作为我的网站图标源吗？+
您可以将 JPEG 上传到生成器，但 JPEG 不支持透明度。如果您的图标需要透明背景（在浏览器选项卡中看起来最好），请从 PNG-32 或 SVG 开始。生成器将正确转换为 .ico 和 PNG。