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

PNG转ICO转换器

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

将PNG转换为包含多个尺寸的ICO。保留透明度，检查小尺寸预览，并在本地下载真实图标文件。

PNG ICO PWA

制作你的图标包

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

1上传
2调整
3下载

等待选择图片

将图片拖放到这里

PNG · 最大5 MB

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

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

调整你的图标

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

图片适配

背景

透明

纯色

#FFFFFF

留白6%

圆角0%

ICO 尺寸（可多选）

256

自适应图标

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

浏览器标签

https://example.com

iOS主屏幕

你的图标将显示在这里

PWA / 安卓

你的图标将显示在这里

三步制作 favicon

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

1选择你的图片

将PNG转换为包含多个尺寸的ICO。保留透明度，检查小尺寸预览，并在本地下载真实图标文件。

2调整并预览

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

3下载并添加到网站

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

一个标志，适配每个屏幕

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

网站 favicon

我的网站×

16 × 16

32 × 32

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

iPhone 与 iPad

我的网站

180 × 180

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

PWA 与 Android

安装应用

192 × 192

512 × 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">

将图标包解压到 Nuxt 项目根目录的 public/。保留文件名，让 site.webmanifest 与 favicon.ico 放在一起，而不是放入 app/。
将代码加入 app/app.vue 的 script setup 块。替换指向旧文件的图标链接，然后重新构建并发布你的项目。

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

在你的网站打开 /favicon.ico、/apple-touch-icon.png 和 /site.webmanifest。检查响应成功且内容确为图片或 JSON；返回 HTML 错误页的 200 响应仍是错误路径。也需检查 manifest 内每个图标地址。

若仍显示旧图标，检查页面 head 是否有重复链接，在浏览器开发者工具中禁用缓存并刷新。若使用 CDN 或 service worker，也检查其缓存。对照实际 16 与 32 像素预览，精简细小文字和细线，不只看大图。

这些文件提供图标和 manifest 元数据，本身不会让网站成为可安装的 PWA。本例按域名根目录部署；若部署在子目录，需调整全部链接及 manifest 内的图标路径。

Nuxt 4 · public/ · Nuxt 4 · useHead