Favicon 生成器 - 用文字或图片制作网站图标 favicon.ico

Favicon 网站图标生成器

用一个字母、一个 emoji 或你的 Logo 生成全套网站图标：favicon.ico、苹果桌面图标、安卓/PWA 图标、SVG 图标和现成的 site.webmanifest，以及要粘贴到页面 head 里的 HTML。

在浏览器本地运行，输入的内容和文件都不会上传

来源

文字或 emoji

文字颜色

背景色

形状

应用名称

预览

128

包含的文件: favicon.ico · apple-touch-icon.png · icon-192.png · icon-512.png · icon.svg · site.webmanifest

使用步骤

选择「文字 / emoji」输入 1 到 3 个字符，或选择「图片」上传 Logo（SVG 或至少 512 像素的正方形 PNG 效果最好）。
选择颜色和形状：方形、圆角或圆形。
查看 16、32、64、128 像素下的预览，小尺寸下是否还清楚可辨。
下载 ZIP，把文件上传到网站根目录，把 HTML 粘贴到 head 中。

参数说明

favicon.ico: 内含 16、32、48 像素三个尺寸，用于浏览器标签、收藏夹和 Windows 快捷方式。
apple-touch-icon.png: 180 × 180 像素、不透明背景，用户把网站添加到 iPhone、iPad 主屏幕时使用。
icon-192.png / icon-512.png: 由 site.webmanifest 引用，用于安卓主屏幕和可安装的网页应用。
icon.svg: 供新版浏览器使用的矢量图标，来源是文字或 SVG 文件时才会生成。

需要添加的 HTML

把文件上传到网站根目录后，在每个页面的 head 中加入：

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

常见问题

这些文件都必须要吗？

根目录放一个 favicon.ico 就能覆盖所有浏览器。想在 iOS 主屏幕上显示好看的图标，加上 apple-touch-icon.png；需要安卓安装、固定到主屏幕时，再加上 manifest 和 192/512 图标。

为什么 16 像素的图标很糊？

16 × 16 像素放不下细节。请使用粗体字母或简化后的 Logo 图形，而不是带文字的完整 Logo。

换了图标但浏览器还是显示旧的？

浏览器会长时间缓存 favicon。强制刷新页面，或在链接后面加版本号，例如 /favicon.ico?v=2。

百度搜索结果里的网站图标怎么设置？

百度会抓取网站的 favicon，要求一般是正方形、清晰、放在根目录。上传后可以在百度搜索资源平台提交站点信息，更新可能需要一段时间。