Favicon 生成器

使用指南

Favicon 生成器 — 从图片生成 favicon.ico

上传一张图片，一键生成 favicon.ico、apple-touch-icon 以及各尺寸 PNG 图标，适用于浏览器标签页、PWA、iOS 主屏幕、Android 应用等。

支持的尺寸

16x16浏览器标签

32x32浏览器标签（高分辨率）

48x48Windows桌面

192x192Android应用

512x512PWA应用

180x180iOS设备（apple-touch-icon）

包含详细的使用说明和示例代码

图标使用说明

如何在您的网站上实现生成的图标

图标预览

favicon-32x32.png

favicon-192x192.png

apple-touch-icon.png

使用步骤

将所有图标文件上传到您网站的根目录或指定的图标目录
在您网站的HTML '<head>'部分添加以下代码：

<!-- Basic icon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG icons for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- Apple Touch Icon for iOS devices -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA manifest file -->
<link rel="manifest" href="/site.webmanifest">

不同尺寸的用途

favicon.ico:传统浏览器标签和书签的图标
16x16:浏览器标签图标
32x32:较高分辨率的标签和Windows任务栏
48x48:Windows桌面图标
192x192:Android应用图标
512x512:PWA应用图标
apple-touch-icon.png:iOS设备添加到主屏幕的图标

网站清单文件(site.webmanifest)

如需支持PWA功能，可创建名为site.webmanifest的文件，内容如下：

{
  "name": "Your Website Name",
  "short_name": "Short Name",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}