Favicon Generator
Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest
来源
拖入 PNG、JPEG、WebP 或 SVG 标志
建议使用至少 512 × 512 px 的正方形图片。SVG 文件会在渲染前进行清理。
也可以从剪贴板粘贴。
Favicon 套件
添加图片或切换到文字以生成 favicon
所有尺寸、favicon.ico 和 site.webmanifest 会一起生成。
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="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">
<meta name="theme-color" content="#ffffff">site.webmanifest
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Favicon 生成器能生成什么？
用一个标志或几个字母生成完整的 favicon 套件：favicon.ico（16、32 和 48 px）、favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png（180 px）、android-chrome-192x192.png、android-chrome-512x512.png、maskable-icon-512x512.png 和 site.webmanifest，并附带引用它们的 HTML 标签。
使用方法
- 1.拖入 PNG、JPEG、WebP 或 SVG 标志，或切换到文字并输入最多三个字符。
- 2.选择背景（透明或颜色）、内边距和形状。
- 3.为清单填写应用名称、短名称、主题色和图标路径。
- 4.查看浅色和深色背景预览以及浏览器标签页示意。
- 5.下载 ZIP 或单个文件，然后将 HTML 代码片段粘贴到 <head> 中。
各图标的生成方式
浏览器和 Android 图标遵循你的形状、内边距和透明设置。Apple touch 图标始终是不透明的方形，因为 iOS 会自行处理圆角。maskable 图标不透明，并把图案保持在安全区内（至少 10% 内边距），以便 Android 将其裁切为圆形或超椭圆。小尺寸图标会逐级缩小，确保 16 px 依然清晰。
格式、安全与限制
favicon.ico 内嵌 PNG 图像，所有现代浏览器以及 Windows Vista 及更高版本都支持；非常老旧的 Windows XP 工具可能无法读取。上传的 SVG 会被清理，脚本、事件处理器和外部引用会在渲染前移除。文字图标使用系统界面字体。所有内容都在你的浏览器本地生成。
