如何用 PNG 图片制作网站 Favicon

二维码 — 次閱讀

什么是 Favicon？

Favicon（收藏夹图标）是显示在浏览器标签页、书签栏和搜索结果中的小图标。虽然只有 16×16 到 32×32 像素大小，但它是网站品牌识别的重要组成部分。没有 favicon 的网站在浏览器标签页中只会显示一个默认的空白图标，显得不专业。

Favicon 需要哪些尺寸？

不同设备和场景对 favicon 尺寸的要求不同：

  • 16×16：浏览器标签页（最基础）
  • 32×32：Windows 任务栏、部分浏览器标签
  • 48×48：Windows 网站快捷方式
  • 64×64：Windows 任务栏高分辨率
  • 128×128：Chrome Web Store
  • 256×256：高分辨率显示器

手动制作这些尺寸费时费力。使用在线 favicon 生成器，上传一张高分辨率 PNG 图片，可以一次性生成所有需要的尺寸。

用 tool.tl 生成 Favicon 的步骤

  1. 准备 PNG 图片 — 建议使用至少 256×256 像素的正方形 PNG，背景透明效果更好
  2. 打开生成器 — 访问 tool.tl/to-favicon
  3. 上传图片 — 点击上传或拖拽 PNG 文件到页面
  4. 下载 ICO 文件 — 工具自动生成包含多种尺寸的 favicon.ico 文件，点击下载

如何将 Favicon 添加到网站

下载 favicon.ico 后，将文件放到网站根目录，然后在 HTML 的 <head> 部分添加以下代码：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

大多数现代框架（Next.js、Astro、Nuxt 等）都有专门的 favicon 配置目录，参考对应文档放置文件即可。

PNG 图片的设计建议

  • 使用简洁图形：favicon 尺寸极小，复杂的文字和细节在小尺寸下会变得模糊，使用简单的图形或单个字母效果更好
  • 避免细线条：1–2 像素的线条在 16×16 时几乎不可见
  • 透明背景：PNG 的透明背景让 favicon 在各种浏览器主题（浅色/深色）下都能适配
  • 高对比度：确保图标在白色和深色背景上都清晰可见

常见问题

Favicon 生成是免费的吗？

是的，tool.tl 的 Favicon 生成器完全免费，无需注册账号。

为什么浏览器不显示我的新 Favicon？

浏览器会缓存 favicon，更新后可能需要强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R）或清除缓存才能看到新图标。

支持 SVG 格式的 favicon 吗？

现代浏览器支持 SVG favicon，但为了兼容性，建议同时保留 .ico 格式。可以在 HTML 中同时声明两种格式，浏览器会自动选择支持的格式。

除了 PNG，还支持哪些格式？

tool.tl 的 favicon 生成器同样支持 JPG 和 SVG 作为输入格式，但建议使用带透明背景的 PNG 以获得最佳效果。