基础设置如何为你的网站添加 Favicon（分步指南）June 12, 2026· 6 min read四步搞定，从空白标签页到像素级完美的品牌标识。适用于任何 HTML 网站、CMS 或框架。
快速解答
生成你的 favicon 文件，将它们放入网站的根目录，然后把 标签添加到 HTML 的
中。favicon 是显示在浏览器标签页、书签和搜索结果中的小图标。开始前你需要准备什么单个 16x16 的 favicon 如今已经不够用了。现代浏览器、iOS、Android 和 Windows 各自会请求不同的尺寸和格式。在添加任何标签之前，先确保你已经有一套完整的图标。最小集合文件尺寸谁需要它favicon.ico多分辨率默认请求 /favicon.ico 的浏览器和爬虫favicon-16x16.png16x16浏览器标签页和地址栏favicon-32x32.png32x32Retina 标签页、书签、桌面快捷方式apple-touch-icon.png180x180iOS 主屏幕Manifest 图标192x192Android 主屏幕，从 web manifest 中引用这些尺寸实际看起来是什么样16px32px48px180px按真实像素尺寸渲染，未经放大。几乎所有设计工作都集中在最左边那一块，因为那才是人们整天都在看的那个。四个步骤1生成你的 favicon 文件让生成器一次性产出所有尺寸、.ico 精灵图和一份调好的 manifest.json。丢进一个 logo、一张截图，甚至一个 emoji，就能下载完整套件。第一次做图标？先从如何制作 favicon 开始。
2把文件添加到网站根目录将下载的文件复制到为你域名根路径提供服务的目录。在静态网站上那是根文件夹；在大多数框架里是 public/ 目录。目标是让 https://yoursite.com/favicon.ico 能直接解析。
3把 link 标签添加到
在每个页面的文档 中用 标签引用各个图标（icon、apple-touch-icon 和 manifest），这通常意味着一个共享的模板或布局。4验证是否生效部署后，强制刷新并查看标签页。最可靠的检查方式是自动扫描，它会确认每个标签都能解析，并标记出任何缺失的平台图标。
link 标签
Copy code把这些粘贴到每个页面的
元素内。manifest 链接就是让你获得安装提示和主屏幕图标的东西。参见什么是 manifest.json。各平台专属快捷方式在用框架或 CMS？其中好几个会按自己的约定帮你处理 head 标签。平台指南涵盖了 Next.js、React、WordPress 和 Shopify。
常见错误错误修复方法浏览器缓存旧的 favicon 会残留。强制刷新，或在 link 的 href 后追加 ?v=2。路径错误开头的斜杠很重要。/favicon.ico 是从根路径提供的，而不是从当前文件夹。缺少 apple-touch-icon没有它，iOS 主屏幕会退而使用一张模糊的截图。还是不显示？
逐一排查 favicon 不显示或不更新，这份指南会一次一个地覆盖每种原因。常见问题favicon 文件放在哪里？把 favicon.ico 和其他图标文件放在网站的根目录（大多数框架里是 public/ 文件夹），这样它们就能从域名根路径提供，例如 https://example.com/favicon.ico。
我还需要 favicon.ico 文件吗？需要。浏览器和爬虫默认仍会请求 /favicon.ico，所以在现代 PNG 和 SVG 图标之外再提供一个多分辨率的 .ico，能给你最广泛的兼容性。
添加后为什么我的 favicon 不显示？浏览器会激进地缓存 favicon。强制刷新，在链接后追加像 ?v=2 这样的版本查询字符串，并确认文件路径正确。查看我们的 favicon 故障排查指南了解每种原因。
Generate your icon setKeep reading如何制作 Favicon（Logo、图片或 Emoji）如何测试与检查你的 Favicon（免费检查器）Favicon 不显示或不更新？9 个原因与解决办法工具Favicon 生成器从文字或表情创建Favicon 墙（灵感）Favicon 检测器修复损坏的 Favicon各技术栈最佳生成器用 AI 添加 Favicon面向 AI 构建者博客学习FaviconFavicon sizesICO vs PNGApple touch iconManifest icons所有术语 →平台Next.jsReactWordPressShopifyVue所有平台 →AI 构建工具Lovablev0ReplitBolt.newCursor所有 AI 构建工具 →简体中文其他工具关于联系隐私条款广告Feedback制作者： @the_mewcToggle theme