步骤 1
选择基础并调整预览
选择从图片或文字开始，并一边查看正方形预览，一边调整背景、圆角、文字大小和颜色。
确认点
- 可选择图片或文字作为基础
- 正方形预览会跟随当前设置变化
- 小尺寸 favicon 也能保持清晰
本画面的操作
01
选择基础
可以添加图片文件，也可以输入短文字来创建 favicon。
02
调整文字标志
选择字体、字重、文字大小和文字颜色，并确认与背景的对比度。
03
正方形预览
生成前可确认背景、圆角以及文字或图片的显示效果。
使用方法
favicon 创建的使用方法
favicon 创建工具可在浏览器内从图片或短文字生成一整套 favicon。你可以在正方形预览中调整背景、圆角、文字大小和颜色，再确认生成后的尺寸预览与输出文件。
- 步骤
- 2 步
- 指南
- 附截图说明
- 内容
- 注意事项与 FAQ
适用场景
适合在这些时候使用
- 在网站上线前准备完整 favicon 套件
- 不依赖图像编辑软件生成 favicon
- 同时准备 PWA 图标和 manifest
- 把 logo 图片快速转换为 favicon.ico
- 直接复制可用的 HTML 示例到站点中
- 快速制作简洁的文字 favicon
可实现内容
这个工具可以做什么
- 一次生成 favicon.ico 与多尺寸 PNG
- 生成 SVG favicon 与 site.webmanifest
- 调整背景、留白与圆角
- 支持 ZIP 下载与 HTML 示例复制
- 同时支持图片输入与文字标志输入
- 在浏览器内完成整套 favicon 制作
步骤
步骤
这里按顺序整理操作流程与确认点，便于边看页面边继续操作。
步骤 2
生成并保存 favicon 文件
生成 favicon 套件后，确认尺寸预览、输出文件列表、HTML 示例和 manifest。
确认点
- 确认 16x16 与 32x32 的显示效果
- 确认 favicon.ico、PNG、SVG 与 manifest 输出
- 可保存 ZIP 或复制 HTML 示例
本画面的操作
01
生成 favicon
根据当前设置生成 favicon 套件，生成后右侧预览和文件列表会更新。
02
尺寸预览
确认 16x16、32x32、180x180、192x192 的显示效果，检查小尺寸下是否清晰。
03
保存文件与复制代码
可单独保存文件或 ZIP，并复制 HTML 示例和 manifest 反映到网站中。
注意事项
注意事项
将使用前应先判断的重要点按原因归纳整理。
确认
让小尺寸也容易辨认
favicon 会以 16x16 或 32x32 显示。短文字和简单图形通常比复杂图片更容易识别。
确认
确认背景与内容的对比度
使用纯色或渐变背景时，请确认文字或图形不会融入背景。
确认
同时应用 HTML 示例和 manifest
除了生成的文件，也请把 HTML 示例和 manifest 反映到网站中，让浏览器和主屏幕图标正确识别。
FAQ
关于 favicon 生成 的常见问题
这里先整理能帮助使用前判断的常见问题。
图片会上传到外部服务器吗？
不会。favicon 的生成完全在浏览器内完成，图片文件不会发送到外部。
可以生成哪些文件？
可以生成 favicon.ico、多尺寸 PNG、SVG favicon、site.webmanifest 以及 HTML 示例。
没有图片也可以使用吗？
可以。文字标志模式可让您使用简短文字生成简单 favicon。
可以把所有文件一起打包下载吗？
可以。生成后的 favicon 套件可以用 ZIP 一次性保存。
支持生成 PWA 用的 manifest 吗？
支持。根据所选预设，可同时生成 site.webmanifest。
能确认小尺寸下的显示效果吗？
可以。您可以在预览区查看 16x16、32x32 等尺寸下的显示效果。
下一步指南
相关指南
这里整理了相关指南，便于继续操作时不迷失。
