无需图片 · 免费 · 无需注册
文字 Favicon 生成器
用 1–3 个字母、缩写或汉字制作网站图标。自定义字体、配色与形状，按实际尺寸确认清晰度，再免费下载 ICO、PNG 和网站安装文件包。
自定义文字网站图标
输入 1–3 个字符。16 像素下，1–2 个字通常更清楚。
字体以当前设备可用的字库为准。下载的是已经渲染好的图片，在其他设备上使用时，字形不会因字体缺失而改变。
按实际尺寸预览 Favicon
下方按实际像素展示。下载前，先确认小尺寸下的辨识度。
下载 ICO 与 PNG 图标文件
包含 1 个 ICO、6 种尺寸 PNG、Web manifest 和 HTML 代码，无水印。
添加到 HTML 的 head 中
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<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">manifest 仅包含基本的图标引用，不会自动添加离线能力，也不代表网站已完成 PWA 配置。
如何用文字生成 Favicon
1. 输入文字
建议从一个字或两个首字母开始。完整名称缩小后容易丢失细节。
2. 调整样式和留白
选择字体与对比清楚的颜色，调整留白，检查 16、32、48 像素的预览。
3. 下载并配置
下载文件包，放入网站公开目录，并添加对应的 HTML 标签。使用框架时请确认实际路径。
字母、缩写与汉字的网站图标示例
没有现成 Logo 时，可以先用名字中最容易被记住的部分作为网站标识。个人博客、作品集和小型项目都可以从一个字或一组缩写开始。以下是设计思路，可在上方编辑器中自行尝试。
个人博客：从一个汉字开始
选择姓名、笔名或栏目名里有辨识度的一个字。单字能留出更多空间，但汉字笔画较多时，粗体也可能挤在一起。请重点看 16 像素预览，必要时尝试更简单的字或拼音首字母。
工作室与作品集：使用简称
两个字的简称，比完整名称更适合放在浏览器标签页里。先比较单字和双字版本，再调整字体与留白；不要仅凭放大图判断效果，尤其要留意笔画密集的汉字。
产品与开源项目：使用首字母
英文名称或拼音名称可以尝试两个首字母。若项目已有常用的三字母缩写，也可以放入编辑器比较。缩小后读不清时，优先减少字符，再调整字重，不必勉强保留全部缩写。
怎样让文字图标在 16 像素下保持清晰
放大预览适合看配色和风格，实际尺寸预览更适合判断辨识度。建议每次只调整一个选项，直接比较小图变化，避免大图很好看、标签页里却看不清。
先选文字，再选字体
长名称不必全部放进图标。可以比较一个汉字、两个简称字或拼音首字母，选择与网站名称容易建立联系的版本。字符越多，每个字符能分到的像素就越少。
字重要清楚，也要保留笔画间隙
细笔画缩小后容易变淡，但最粗的字重也可能让汉字内部空间挤在一起。对照 16 和 32 像素预览，选择轮廓清楚、内部仍能分辨的字重，而不是一律使用特粗。
同时检查浅色和深色背景
文字与底色需要有足够明显的差别。切换预览背景，检查圆角和圆形的透明边缘。圆形中可容纳文字的空间更小，使用同样的留白值时，字可能比方形版本更小。
在留白与文字大小之间取舍
文字显得太小时可以减少留白；笔画贴边时则增加留白。修改圆角或切换形状后，要重新看小尺寸预览。大图里宽松的边距，缩小后可能让双字简称变得难以辨认。
Favicon 文件格式与 PNG 尺寸
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16 / 32 / 48 px | 一个 ICO 中包含三种尺寸的 PNG 图像，用于网站图标。 |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16 / 32 / 48 px | 独立的小尺寸图标，适用于标签页、书签等网站界面。 |
| apple-touch-icon.png | 180 × 180 px | 可用作主屏幕图标。需要不透明底图时，请选择方形背景。 |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 / 512 px | 供随附 manifest 引用的大尺寸普通图标，不是 Maskable 图标。 |
manifest 仅包含基本的图标引用，不会自动添加离线能力，也不代表网站已完成 PWA 配置。
如何把生成的 Favicon 添加到网站
按网站所用的技术选择配置方式。除非同时修改引用路径，否则建议保留下载包中的文件名；替换旧图标后，还要检查网站实际提供的文件。
普通 HTML 与静态网站
将 ZIP 解压到网站对外提供文件的根目录，再把编辑器中的 HTML 标签加入页面 head。如果图标放在子目录，需要同步修改图标与 manifest 的路径，并检查 site.webmanifest 内部引用的图片路径。
查看安装代码Next.js 项目
根据项目使用的图标文件约定或 metadata 配置接入 ICO、PNG。添加新引用前，先确认项目是否已经定义图标，避免旧配置继续生效。站内指南介绍了文件位置和常见冲突。
查看 Next.js Favicon 配置指南WordPress 网站
设置「站点图标」时可使用下载的 512 像素 PNG。这个流程由 WordPress 生成所需图片尺寸，无需把 ZIP 里的每个文件都上传。请按站内指南找到当前 WordPress 设置中对应的入口。
查看 WordPress 站点图标指南换了 Favicon，为什么网站还没有显示？
先确认下载文件本身正确，再检查网站的路径和配置。这里能生成预览，并不代表线上网站已经引用到新文件。
浏览器仍然显示旧图标
直接打开网站部署后的图标地址，确认它是否已经变成新设计。如果文件正确，可以用新的浏览器会话检查，并排查浏览器和 CDN 缓存。同时检查 HTML、框架 metadata 或站点设置里是否还存在旧图标引用。
图标不显示，或看起来模糊
确认图标地址返回的是图片，而不是错误页面或登录页。需要较大图标时，应使用相应尺寸的导出文件，不要放大 16 像素 PNG。如果源文件本身就难以辨认，可减少字数，再调整字重和留白。
Google 搜索结果还没有更新
Google 需要重新抓取网站首页和图标文件。保持图标地址稳定、允许抓取，并留出处理时间。浏览器里已经显示新图标，不意味着搜索结果会立即更新；符合要求也不保证一定展示。
文字 Favicon 生成器常见问题
什么是文字 Favicon？
文字 Favicon 用字母、缩写或少量字符，在浏览器标签页中标识网站。没有现成 Logo，或完整文字标志缩小后看不清时，都可以使用这种方式。
输入几个字比较合适？
编辑器支持最多 3 个字符。在 16 × 16 像素下，1–2 个粗体字符通常更清楚。请按实际预览判断；细笔画或三个较宽的字符可能难以辨认。
支持汉字和带重音的字母吗？
支持，但当前设备需要有能够显示这些字符的字体。组合重音与对应字母按一个字符计数。下载前请确认预览中没有缺字；PNG 和 ICO 会保留当前渲染结果。
为什么字体选项标注 Arial、Georgia 和 Courier？
这些选项使用常见字体系列，并在缺少对应字体时回退到系统字体。不同系统上的实际字形可能不同。下载的 PNG 和 ICO 已经是像素图片，网站访问者无需安装这些字体。
需要上传文字或注册账户吗？
不需要。文字渲染和图标生成都在当前浏览器内完成，不会将输入文字上传到服务器，也无需注册即可下载。
可以在 Next.js 或 WordPress 中使用吗？
可以使用生成的 ICO 和 PNG，但安装位置不同。请参考站内 Next.js 或 WordPress 指南，确认文件目录或站点图标设置。随附 HTML 代码适合作为普通 HTML 网站的配置起点。
有了 manifest 就完成 PWA 配置了吗？
没有。这里的 manifest 仅提供名称、颜色和普通图标引用。PWA 还需要结合项目进行配置与测试。如需 Maskable 图标、更多平台素材和详细 manifest 设置，请使用 PWA 图标生成器。
文字图标与图片 Logo，该选哪一种？
只需要字母、缩写或汉字时，可以继续使用本页编辑器。需要组合图形、名称和标语时，可使用 Logo Maker；已有图片则交给 Favicon 生成器处理。完整 Logo 缩小后看不清时，也可以尝试更简洁的图形标识。