跳到正文

Favicon 网站图标生成

Favicon Generator

一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。

favicon 几年前就不再是一个文件了:一个站点需要根目录请求用的 .ico,标签栏用的三种尺寸的 PNG,因为 iOS 无视 manifest 而需要的 Apple 触控图标,以及因为 Android 会裁成它自选形状而需要的 maskable 图标。这个工具全部生成,加上 manifest 和要粘贴的标记。

🔒 完全在你的浏览器里运行faviconwebicongenerator

把 logo 拖进来

512×512 或更大的方形 PNG 效果最好。SVG 需要先栅格化。

怎么用

  1. 拖入 512px 或更大的方形 logo

    所有东西都由缩小得来,所以集合里最大的图标和你的起点一样好,不会更好。

  2. 设名称和短名称

    短名称是主屏幕图标下面显示的,Android 和 iOS 都在十二个字符左右截断。

  3. 选主题色和启动色

    它们进 manifest:主题色在 Android 上给浏览器界面着色,背景色是 PWA 启动后绘制之前显示的颜色。

  4. 拿 zip 并粘贴标记

    文件放在站点根目录;`<link>` 块放进 `<head>`。两者一起生成,所以路径是一致的。

常见问题

maskable 图标是干什么的?

Android 把主屏幕图标裁成设备自选的形状——圆形、圆角方形、水滴形——只保证中央 80%。maskable 图标不管你的边距设置如何总是留 10% 边距,所以裁剪碰不到图案。

能改用 SVG favicon 吗?

可以加一个,在支持的地方它是最好的选择——但它替代不了这个集合。iOS 上的 Safari 要触控图标,Android 要 manifest 图标,根目录的 .ico 不管怎样都会被请求。先把 SVG 栅格化,把 PNG 拖到这里。

边距该留多少?

设计成填满画框的标志不留;16px 下需要呼吸空间的文字标志留百分之十到十五。标签栏尺寸是边距代价最大的地方,因为能让出的空间太少了。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。