什么是多尺寸网站图标生成器？

上传一张图片，或输入 1 到 3 个字母或一个表情，即可获得从 16×16 ICO 到 1024×1024 App Store 图标的所有标准尺寸，外加一份可缩放的 favicon.svg。包含 Apple Touch、Android Chrome、MS 磁贴和 Safari 固定标签页。逐个下载或打包为 ZIP 一次获取。

既可以从你自己的 logo 开始，也可以用几个字母或一个表情，配上自定义颜色和字体快速生成图标。生成器会输出 17 个独立的 PNG 文件，覆盖经典 favicon 尺寸(16、32、48、64、96、128、256)、Apple Touch 图标(152、167、180)、1024 的 App Store 图标、Android Chrome(192、384)、MS Tile(144、150、310)以及 512 的 PWA 图标。可按平台筛选网格、选择方形、圆角或圆形形状，并在下载前对照浅色和深色标签页检查 favicon。每个 ZIP 还附带一份多分辨率 favicon.ico、一份可缩放的 favicon.svg、一段可直接粘贴的 HTML 代码以及一个在 Android 尺寸上启用 maskable purpose 的 manifest.json；填写应用名称和简称即可让它作为 PWA 安装。

使用方法

1. 上传一张高分辨率的正方形图片（至少 512×512 像素）作为源图标，或切换到文字模式输入 1 到 3 个字母或一个表情，即刻生成一个。
2. 在网格中查看所有生成的尺寸，根据需要的平台勾选或取消勾选。
3. 可单独下载某个尺寸,也可单独下载多分辨率 favicon.ico,或点击「全部下载」获取包含所有勾选尺寸、ICO 包、HTML 片段与 manifest 的 ZIP。

何时使用

• 网站上线时，需要在所有浏览器和系统中显示完整的favicon。
• 品牌升级:用新logo重新生成所有PWA和主屏幕图标。
• 添加添加到主屏幕功能时,让Android能正确渲染maskable图标。

结果

一家网络公司为客户品牌升级上传了新Logo，立即获得12种尺寸，覆盖桌面、iOS Safari、Android Chrome、Windows磁贴和PWA清单图标，直接可用。

常见问题

源图片至少要多大尺寸？

至少512×512像素，正方形，logo居中并留少量边距。小于这个尺寸放大到512 PWA图标会模糊。最好用矢量图(SVG导出1024像素PNG)作为源文件。

为什么同时需要PNG和ICO两种favicon？

现代浏览器通过 link rel='icon' 调用多尺寸 PNG，并越来越倾向于使用单个可缩放的 SVG favicon。而 .ico 文件至今仍被旧版 Windows 浏览器、部分托管平台和某些固定网站代码所要求。本生成器三者都会输出:涵盖所有现代尺寸的 PNG、一份可缩放的 favicon.svg，以及一份打包了 16、32、48px 三种分辨率的 favicon.ico。

什么是maskable图标？为什么Android需要它？

Android会根据启动器把主屏幕图标裁剪成圆形、四边圆角或圆角矩形。maskable图标在中心保留约80%的安全区，logo关键部分永远不会被切掉。建议在源图片四周加约10%的留白。

生成的文件该放在哪里？

把所有PNG放进网站的public根目录(或/static),把HTML代码片段复制到页面head中,并引入manifest.json。Apple Touch和favicon链接放在HTML head里,PWA图标由manifest引用。

为什么要提供背景色和内边距选项？

透明logo在浏览器标签页里看起来没问题,但Android或iOS加上自己的圆角矩形底色后位置可能很奇怪。在工具里加一个纯色背景再加8-12%内边距,可以让磁贴在各启动器里渲染一致。

相关工具