Favicon 怎么制作和设置？favicon.ico 尺寸、代码和放置位置

Favicon 是什么？

Favicon 是网站的小型品牌图标，常见位置包括浏览器标签页、书签栏、历史记录、搜索结果、手机主屏快捷方式和 PWA 安装入口。它不影响页面能不能打开，却会影响用户能不能快速认出你的网站。

它会显示在哪些地方

• 浏览器标签页：打开多个页面时，用户靠小图标快速找到你的网站。
• 书签和历史记录：图标会和站点标题一起显示，方便再次访问。
• 搜索结果：Google 等搜索结果可能展示站点 favicon，用于增强品牌识别。
• 手机主屏：用户把网页添加到主屏幕时，系统会使用 Apple Touch Icon 或 manifest 图标。

为什么不能只把 Logo 缩小

Favicon 最常见的显示尺寸只有 16px 或 32px。完整 Logo、长文字、细线条在这个尺寸下很容易糊成色块。更稳的做法是保留一个核心符号、首字母或简单几何形，再用背景色、圆角和对比度加强识别。

Favicon 图标怎么制作？

制作 favicon 有三种常见方式：用 Logo 或图片生成、用文字首字母生成、直接画像素图。哪一种更合适，取决于你手里有没有清晰 Logo，以及小尺寸下还能不能看清。

用 Logo、PNG 或 JPG 生成 favicon

已经有品牌 Logo 时，直接导入Favicon 图标在线生成器最快。透明 PNG、JPG、SVG、WebP 都可以作为源图；导入后选择居中裁切、完整留白或方形拉伸，再检查 16px、32px、48px 预览。透明 Logo 如果太细，可以加纯色或渐变圆角底。

如何在线生成 favicon 图标

想快速完成 favicon 图标在线生成，先上传一张方形源图，再选背景色、圆角和缩放方式，确认小尺寸预览后导出 favicon.ico 和多尺寸 PNG。这个流程适合新站上线、旧站换图标，以及把 PNG/JPG 快速变成可用的网站图标。

用文字首字母制作 favicon

没有 Logo 时，可以用品牌首字母做一个图标。比如站点名是 Deer Image，就用 D 或 DI，配一个高对比背景。文字图标的优点是小尺寸清楚，缺点是品牌独特性弱一点；颜色和圆角要尽量稳定，后续不要频繁改。

手动画像素 favicon

像素画适合极简符号、游戏站、小工具站或独立开发者项目。画布按 16/32px 思路设计，边缘要干净，颜色不要太多。用画笔、橡皮、取色和填充工具微调后，直接预览浏览器标签栏效果。

好 favicon 的判断很简单：缩到 16px，还能一眼看出它和别的网站不一样。

favicon.ico 和多尺寸图标怎么选？

基础网站至少准备 favicon.ico；想兼容现代浏览器、iPhone 主屏和 PWA，建议同时准备 32px PNG、180px Apple Touch Icon、192/512px manifest 图标。搜索结果中的 favicon 建议使用正方形、48px 倍数尺寸的图标。

源图建议多大

源图建议至少 512×512，最好是方形 PNG、SVG 或清晰 Logo。大图转小图比小图放大更稳，边缘也更干净。照片可以做 favicon，但主体必须足够简单，否则缩小后会看不出内容。

透明图标要不要加背景

透明图标看起来干净，但浅色 Logo 在浅色标签栏里会消失，深色 Logo 在深色主题里也可能不明显。把图标缩到 16px 后还看得清，就可以透明；看不清就加圆角底色。

favicon.ico 放哪里？代码怎么写？

favicon.ico 通常放在网站根目录，HTML 代码放在 head 里。Next.js、Vite、Astro、静态站点一般把图标文件放到 public 目录，部署后就能通过根路径访问。

HTML head 代码

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

文件名可以按自己的项目调整。只要路径能直接访问，浏览器就能找到对应图标。比如 /favicon.ico、/favicon-32x32.png、/apple-touch-icon.png 都应该返回图片，而不是 404 页面。

manifest 图标代码

{
  "name": "你的站点名称",
  "short_name": "站点简称",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

不做 PWA 时，manifest 不是硬性要求；但 192px 和 512px 图标常用于安卓桌面快捷方式、安装入口和未来的 Web App 能力，顺手生成一份更省心。

只要 ICO 文件还是要 favicon 整包？

只要替换一个 favicon.ico，用格式转换页更快；需要浏览器图标、手机图标、manifest、HTML 代码和预览，用 Favicon 生成器更稳。两个入口服务的不是同一个需求。

只需要单个 favicon.ico

如果你已经有一张方形 PNG 或 JPG，只想得到一个 favicon.ico，用PNG 转 ICO或JPG 转 ICO更直接。转换页适合快速替换网站根目录的 favicon.ico。

需要网站图标整包

如果还需要 Apple Touch Icon、manifest 图标、HTML 代码、背景色、圆角、文字或像素修正，用Favicon 图标在线生成器更合适。导入图片后可以在 16/32/48px 预览里检查小尺寸效果，避免上线后标签页里看不清。

从制作到上线的完整流程

1. 准备清晰方形 Logo，透明 PNG 或 SVG 更适合。
2. 导入 Favicon 生成器，选择裁切、留白或背景圆角。
3. 检查 16/32/48px 预览，不清楚就简化图形或加底色。
4. 导出 favicon.ico 和整包 ZIP，把文件放到 public 或网站根目录。
5. 把生成的 HTML link 代码放进 head，部署后刷新检查。

Favicon 不显示怎么排查？

Favicon 不显示通常是路径、缓存、尺寸或抓取权限出了问题。先确认文件能直接打开，再检查 HTML 引用和缓存。

浏览器标签页不显示

• 路径错误：直接访问 /favicon.ico，看是否返回图标而不是 404。
• 缓存没更新：浏览器会强缓存 favicon，换文件名或加 ?v=2 更容易刷新。
• 图形太复杂：源图细节太多，缩小后像一团色块，需要简化图形。
• 透明看不清：深浅主题下都试一下，必要时加背景底色。

搜索结果不显示

搜索结果中的 favicon 由搜索引擎抓取和更新，不会改完立即出现。按 Google Search Central 的要求，图标需要可抓取、是有效图片、为正方形，并建议尺寸为 48px 的倍数。修改后等待重新抓取，再观察搜索结果更新。

上线前检查清单

上线前按这几项扫一遍，能避开大多数 favicon 问题。

• 根目录文件：/favicon.ico 能直接访问。
• HTML head：已写入 rel="icon"、apple-touch-icon 和 manifest 引用。
• 尺寸完整：至少有 16/32/48px ICO；推荐有 180、192、512px PNG。
• 小尺寸可读：16px 预览里能认出品牌或首字母。
• 深浅背景都清楚：透明 Logo 在浅色和深色标签栏里都不丢失。
• 缓存策略：改版时考虑更换文件名或加版本号，避免用户一直看到旧图标。

需要一口气生成这些文件，直接用Favicon 图标在线生成器导出整包；只处理单个 ICO 文件，用图片格式转换就够了。