Favicon 图标生成器

功能简介

Favicon 生成器把一个字母、一个 Emoji 或你的 Logo 做成现代网站需要的全部图标：按各个尺寸渲染图标、打包 favicon.ico、生成 Web App Manifest，并给出可以直接粘贴到页面 <head> 里的 <link> 标签，最后打成一个 ZIP 下载。

用文字生成是最快得到干净图标的方式：输入一到三个字符或一个 Emoji，选择颜色、字体和形状（方形、圆角或圆形）即可。文字图标还会额外生成可缩放的 favicon.svg，在任何尺寸和高清屏上都清晰。

使用方法

1. 在「来源」里选择「文字」或「图片」。选图片时点「选择图片…」，挑一张正方形的 PNG、SVG 或 JPG。
2. 设置「形状」；打开「填充背景」会把图标放在彩色底块上，关闭则保持透明。
3. 填写「网站名称」：别人把网站添加到手机主屏幕时，它就是图标下方显示的名字，会写进 site.webmanifest（安卓）和 apple-mobile-web-app-title 标签（iOS）。再填写上传图标的「图标所在目录」，一般是 /。
4. 看一下预览：16 像素那个就是浏览器标签页上显示的样子。
5. 点「下载 ZIP」，把文件上传到网站，再把 HTML 粘贴到 <head> 里。

示例

默认设置会生成这些标签：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

小提示

• 浏览器会长期缓存 favicon，换图标后用无痕窗口打开页面才能看到变化。
• iOS 会把 Apple 触摸图标的透明部分填成黑色，想要干净的主屏图标就保持背景填充。