在线工具AI 产品汇

工具箱 › 图片 › 网站图标

网站图标生成

拖入一张 logo 即生成内嵌 16 至 128 五种尺寸的 favicon.ico、192 与 512 的 PNG、180 的 apple-touch-icon,并给出 HTML 标签、PHP 与 site.webmanifest 三种引用代码,全部在浏览器本地完成。

点击选图、拖进来,或直接 Ctrl/⌘ + V 粘贴 正方形 logo 效果最好;图片只在你的浏览器里处理,不上传
—原图
—ICO 体积
16 · 32 · 48 · 64 · 128ICO 内尺寸

会生成哪些文件

<code>favicon.ico</code> 里内嵌 16、32、48、64、128 五个尺寸,浏览器会自动挑最合适的那张,不用额外引 PNG。

另外单独给出 192 与 512 的 PNG:前者是 manifest 列表里的常客,后者给 PWA 的大屏图标与安装横幅用;勾上开关还会多一份 180×180 的 apple-touch-icon。

完整放入还是填满裁切

<code>contain</code>(默认)把整张图放进方形画布、不裁掉任何部分,图标四周会留白 —— 适合带透明背景的 logo。

<code>cover</code> 铺满画布并裁掉溢出部分,画面更满,但 logo 的边缘可能被切掉一截。原图不是正方形时两者差别很明显,预览区能直接看出来。

标签代码里的 theme-color

meta 里的 <code>theme-color</code> 固定给了站点的蓝色(#2563eb),要和你的品牌色一致就把它换成自己的色值;manifest 里的 <code>background_color</code> 同理,那是安装后启动画面的底色。

manifest 那段是 <code>site.webmanifest</code> 的内容,存成文件后用 <code>&lt;link rel="manifest"&gt;</code> 引上,页面标签页与安装横幅才会用上你的图标。

能力边界

单张上限 40MB、一次一张,不做批量。ICO 里的图是 PNG 编码的(Vista 之后的通行做法),个别十几年前的工具读不出 PNG 格式的条目。

文件都在你自己的浏览器里生成,不上传,下载后放到站点根目录即可 —— 路径(<code>/favicon.ico</code>)可以在上面改。

常见问题

为什么不生成 SVG favicon?

SVG favicon 要在 HTML 里加一行 <code>&lt;link rel="icon" type="image/svg+xml" href="..."&gt;</code>,浏览器支持度比 ICO 晚了好几年。本工具给的是最保险的那套:要矢量就单独导一份 SVG 再补上这行,两边并存不影响。

生成后站点标签页还是旧图标?

多半是缓存。favicon 本身缓存很顽固,改完先强制刷新(Ctrl/⌘ + Shift + R),还不行就把文件重命名成 favicon-2.ico 再改路径,绕过旧缓存。

ICO 体积会很大吗?

取决于图。简单扁平图标五个尺寸加起来通常几十 KB;渐变和细节多的图会到几百 KB。页面上的「ICO 体积」是生成完的真实字节数,超标时先用上面的改尺寸工具压一下原图再回来。