Icon Workshop
更小的图标，
更亮的网络。

一张图片，适配每个屏幕。

Favicon 与应用图标生成器

小小图标，留下长久印象。

将图片转换为网站 favicon、应用图标和开箱即用的图标包。

PNG ICO PWA

制作你的图标包

将图片转换为 favicon、应用图标等。

  1. 1上传
  2. 2调整
  3. 3下载
等待选择图片
将图片拖放到这里

PNG、JPG 或 SVG · 最大 5 MB

图片在浏览器内处理，不会离开你的设备。

16 × 16
32 × 32
48 × 48
180 × 180
192 × 192
512 × 512

调整你的图标

微调外观，适配每个屏幕。

6%
0%

查看实际使用效果(上传后预览图标)

浏览器标签

×
https://example.com

iOS主屏幕

你的图标将显示在这里

PWA / 安卓

你的图标将显示在这里

三步制作 favicon

从一张图片，到一整套图标。

1选择你的图片

选择清晰的标志或简洁图形，方形图片效果更好。

2调整并预览

调整适配方式、背景与留白，检查小尺寸下的清晰度。

3下载并添加到网站

导出图标包，将文件放入网站，并把图标链接加入 HTML。

一个标志，适配每个屏幕

了解生成文件的实际使用场景。

网站 favicon

我的网站×
16 × 16 网站 favicon 示例16 × 16
32 × 32 浏览器标签图标示例32 × 32

16 × 16 和 32 × 32 图标，让用户在标签页和书签中认出你的网站。

iPhone 与 iPad

我的网站
iPhone 与 iPad · 180 × 180180 × 180

网站添加到主屏幕时，使用 180 × 180 的 apple-touch 图标。

PWA 与 Android

安装应用
PWA 与 Android · 192 × 192192 × 192
PWA 与 Android · 512 × 512512 × 512

192 × 192 和 512 × 512 是 Web 应用 manifest 常用的图标尺寸。

图标包包含什么？

适用于各个平台的完整图标包。

  • favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
  • apple-touch-icon.png180 × 180
  • icon-192.png192 × 192
  • icon-512.png512 × 512
  • site.webmanifestWeb 应用清单

将图标添加到网站

将这些链接放到 HTML 的 <head> 中。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

常见问题

什么是 favicon？

在浏览器标签页和书签中代表你的网站的小图片。

应该使用什么图片格式？

透明标志推荐使用 PNG，也支持 JPG、WebP 和安全的 SVG。

可以使用非方形图片吗？

可以。选择适应、裁切或拉伸，生成方形图标。

为什么需要多个图标尺寸？

浏览器和主屏幕使用不同尺寸，小图标适合标签页，大图标适合应用快捷方式。