网站图标生成
用文字、表情符号或 Logo 图片，一次生成 favicon.ico、各尺寸 PNG 以及 iPhone 和 Android 用的图标。
1. 输入文字或选择图片
输入要做成图标的文字（也可以用表情符号），或选择 Logo 等图片。
制作方式
最多 3 个字。图标显示得很小，建议 1～2 个字。
字体
2. 选择形状和颜色
选择背景的形状、颜色和内容的大小，可在预览中立即查看效果。
形状
背景颜色
只有 iPhone 主屏幕用的图标（apple-touch-icon）设为透明会显示成黑色，所以会填充为上面选择的背景颜色。
文字颜色
深色模式的颜色
只有 favicon.svg 会变色。选择“自动”时，只有在深色屏幕上看不清的颜色才会反转明暗。
3. 确认效果并保存
确认在浏览器标签页和主屏幕上的显示效果，再打包成 ZIP 一次保存。
输入文字后，这里会显示预览
浏览器标签页（浅色・深色）
作为添加到主屏幕时的名称，写入 site.webmanifest。
加入 64、128、256px，用于 Windows 桌面快捷方式等大尺寸显示的场合。文件会变大。
要贴到网站的 HTML
把 ZIP 中的文件放到网站根目录（/），再把这段 HTML 贴到 <head> 中。
查看 HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">
<link rel="manifest" href="/site.webmanifest">ZIP 中的文件
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
处理在本设备内完成，图片不会被上传。
觉得好用的话，欢迎分享
使用方法
1. 输入文字
在选中“文字”的状态下，轻点“图标文字”输入框，输入 1～3 个字，也可以用表情符号。字形可在下方的“字体”中选择。
在左侧栏选中“文字”的状态下，点击“图标文字”输入框，输入 1～3 个字，也可以用表情符号。右侧栏的预览会立即变化。字形可在下方的“字体”中选择。
2. 选择形状和颜色
轻点“全屏选择形状和颜色”，打开全屏编辑画面。在下方设置栏的“形状”标签中轻点“圆形”，再在“颜色”标签中轻点一个背景色块。中间的预览可以立即确认浅色和深色屏幕上的效果。
在“选择形状和颜色”栏的“形状”中点击“圆形”，再在“背景颜色”中点击一个色块。通过右侧栏的预览，可以立即看到在浅色、深色屏幕和浏览器标签页上的效果。点击预览上方的“全屏编辑”，可以一边看大预览一边选择。
3. 用图片制作时
用 Logo 等图片制作时，轻点上方的“图片”，再从“选择文件”中选择图片。会打开全屏编辑画面，整张图片会放进图标中。想铺满到边缘时，在下方设置栏的“适配方式”中轻点“裁剪填满”。
用 Logo 等图片制作时，点击左侧栏上方的“图片”，再把图片拖放进来（也可以点击“选择文件”）。整张图片会放进图标中。想铺满到边缘时，在“选择形状和颜色”栏的“适配方式”中点击“裁剪填满”。
4. 一次保存全部文件
轻点“确认效果并保存”栏中的“打包下载 ZIP”，会把全部文件保存为一个 ZIP。要贴到网站的 HTML，可用下方的“复制 HTML”复制。
点击右侧栏的“打包下载 ZIP”，会把 favicon.ico、favicon.svg、各尺寸的 PNG 和 site.webmanifest 保存为一个 ZIP。要贴到网站的 HTML，可用下方的“复制 HTML”复制。
适用场景
马上给自己的网站配上图标
博客、个人网站或自己做的 Web 应用，标签页上显示的图标用一个字或表情符号几秒就能做好，不需要设计软件。
自己搭建网站的人
所需尺寸一次搞定
一次生成 favicon.ico、16/32px 的 PNG，以及 iPhone 和 Android 用的图标，打包成 ZIP 保存，不用逐个尺寸导出。
网页制作者、工程师
用店铺或公司的 Logo 制作
只要选择 Logo 图片，就会做成适合标签页和主屏幕的尺寸，透明背景也能保留。
店铺、小公司的负责人
用于 HTML 练习页面
附带要贴的 HTML，可以清楚知道哪个文件该放在哪里。课堂或练习中做的页面也能用。
学编程的人、老师
使用前须知
- 直接使用细小的文字或照片，在 16px 下会糊成一团看不清。建议使用轮廓清晰的标志，或 1～2 个字。
- 不生成 Windows 磁贴用图片。用本工具生成的文件，现在的浏览器和手机都能正常显示。
- 想先裁掉 Logo 周围的空白时，“裁剪图片”很方便。
网站图标需要的文件和尺寸
网站图标（favicon）是显示在浏览器标签页、书签、搜索结果和手机主屏幕上的网站图标。不同位置使用的尺寸不同，所以通常要用同一张图准备好几种文件。本工具会一次生成现在的浏览器和手机所需的文件，并准备好要贴到网站的 HTML。
favicon.ico 是一个文件里包含 16、32、48px 三种尺寸的格式，旧版浏览器和 Windows 快捷方式也能显示。iPhone 主屏幕用的图标（apple-touch-icon）不能透明，圆角也由 iPhone 自动处理，所以本工具会保持方形并填充背景色。favicon.svg 可以随深色模式改变颜色，Chrome、Firefox、Edge 的标签页会使用它。
常见问题
汇总了制作和放置网站图标时容易遇到的疑问。
图片会被上传到哪里吗？
不会。从读取图片、绘制图标到打包成 ZIP，全部在这台设备的浏览器中完成。选择的图片和输入的文字不会被发送到任何地方。
什么样的图片比较合适？
正方形、轮廓清晰的图片。16px 非常小，细小的文字和照片会糊掉。建议只用 Logo 的标志部分，或用“文字”做成 1～2 个字的图标。横向的图片可以在“适配方式”中选择“完整显示”或“裁剪填满”。
能用表情符号做网站图标吗？
可以。在“图标文字”中输入表情符号，就会做成表情符号图标。表情符号的样式取决于所用设备（iPhone、Android、Windows 等）。
生成的文件要放在哪里？
解压 ZIP，把里面的文件全部放到网站的根目录（能通过 https://example.com/favicon.ico 打开的位置）。然后复制“要贴到网站的 HTML”，贴到每个页面的 <head> 中。
只有 favicon.ico 可以吗？
如果只是在浏览器标签页上显示，一个 favicon.ico 就够了。如果希望添加到手机主屏幕时图标也清晰好看，请放好 ZIP 中的全部文件并贴上 HTML。
背景可以透明吗？
可以。打开“透明背景”后，背景和形状以外的部分会变透明。不过 iPhone 主屏幕用的 apple-touch-icon.png 透明部分会显示成黑色，所以会填充为“背景颜色”中选择的颜色。
WordPress 也能用吗？
可以。在 WordPress 的“外观”→“自定义”→“站点身份”中的“站点图标”里，选择 ZIP 中的 android-chrome-512x512.png（因为需要 512px 以上的图片）。
换了网站图标，显示却没有变
浏览器有时会长时间缓存网站图标。刷新页面后仍未改变时，请清除浏览器缓存，或稍等一段时间再确认。
能生成 SVG 格式的网站图标吗？
可以。ZIP 中包含 favicon.svg。在深色模式下，会换成“深色模式的颜色”中设置的颜色（选择“自动”时，只有看不清的颜色才会反转明暗）。文字以所选字体的图片嵌入，SVG 只负责给它上色。
可以免费使用吗？
免费。无需注册，也没有广告，生成数量也没有限制。
其他工具
- 二维码生成
用网址、文字或 Wi-Fi 信息生成二维码。还可以选择形状、颜色、中间的图标和带照片的样式。
- 图片转 WebP
把 PNG 或 JPEG 转换成体积小、画质好的 WebP 格式。
- 图片转 PNG
把 JPEG 或 WebP 转换为不损失画质的 PNG 格式。
- 图片转 JPG
把 PNG 或 WebP 转换为随处都能打开的 JPG（JPEG）格式。
- HEIC 转 WebP
把 iPhone 拍摄的 HEIC 照片转换为更轻、更好用的 WebP。
- HEIC 转 PNG
把 iPhone 拍摄的 HEIC 照片无损转换为随处都能打开的 PNG。