📝 博客 · 2026-08-02 · ⏱ 16 分钟

Favicon.ico 生成器：网站图标制作

Favicon.ico 生成器使用教程：从图片生成 ICO/PNG 多尺寸图标，适配浏览器标签页、桌面快捷方式、苹果触摸图标。

Favicon网站图标ICO生成前端开发

Favicon.ico 生成器：网站图标制作

网站没有 favicon 浏览器标签页显示默认图标、收藏夹没标识、PWA 无法安装——favicon 是网站的"门面"。本文详解 favicon 的生成与使用。

什么是 Favicon？

Favicon（Favorite Icon）是网站的小图标，显示在：

常见格式

格式尺寸用途
.ico16x16, 32x32, 48x48老浏览器兼容
.png16-512 多尺寸现代浏览器
.svg矢量高 DPI 屏幕
apple-touch-icon180x180iOS 主屏

52tool Favicon 生成器

工具地址：Favicon 生成器

功能

实战 1：生成标准 Favicon

上传 256x256 的 Logo PNG：

输出：

直接上传到网站根目录即可使用。

实战 2：从 SVG 生成

上传 Logo SVG：

实战 3：仅生成 ICO

只需要 .ico 文件：

选项：仅 ICO
尺寸：16, 32, 48

输出 favicon.ico。

HTML 集成

基础集成

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

现代 HTML

<!DOCTYPE html>
<html>
<head>
  <!-- 标准 favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- SVG favicon（现代浏览器） -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  
  <!-- PNG 多尺寸 -->
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  
  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  
  <!-- Android Chrome -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
</head>

manifest.json

{
  "name": "My Website",
  "short_name": "MyWeb",
  "icons": [
    {
      "src": "/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

各尺寸用途

16x16

32x32

48x48

64x64

96x96

128x128

152x152

180x180

192x192

512x512

制作要点

1. 原图分辨率

原图至少 512x512 像素，才能生成多尺寸而不模糊。

2. 简洁设计

favicon 显示在 16x16 像素时几乎没细节，设计要极简：

3. 透明背景

PNG 透明背景，避免白色方块：

背景：透明
前景：彩色 Logo

4. 颜色对比

favicon 在浏览器标签页背景上要清晰：

5. SVG 优先

SVG 矢量格式任意尺寸清晰：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

但 Safari 老版本不支持，需配合 PNG fallback。

各浏览器兼容

Chrome / Edge / Firefox

支持：

Safari

iOS Safari

<!-- 关闭自动光泽 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">

Android Chrome

IE / 老浏览器

实战场景

场景 1：个人博客

简单方案：

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3 个文件：

场景 2：企业官网

完整方案：

favicon.ico
favicon.svg
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
manifest.json
browserconfig.xml（Windows 磁贴）

场景 3：PWA 应用

// manifest.json
{
  "name": "MyApp",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

场景 4：动态 favicon

JavaScript 动态修改 favicon（如通知未读数）：

function setFaviconBadge(count) {
  const canvas = document.createElement('canvas');
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext('2d');
  
  // 画背景
  ctx.fillStyle = '#ff0000';
  ctx.beginPath();
  ctx.arc(16, 16, 16, 0, Math.PI * 2);
  ctx.fill();
  
  // 画数字
  ctx.fillStyle = '#ffffff';
  ctx.font = 'bold 20px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(count, 16, 16);
  
  // 应用到 favicon
  const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'icon';
  link.href = canvas.toDataURL();
  document.head.appendChild(link);
}

setFaviconBadge(5); // 显示数字 5

常见问题

Q: 浏览器不显示新 favicon？

A: 浏览器强缓存 favicon。解决：1) 强制刷新（Ctrl+F5）；2) 加版本号：/favicon.ico?v=2；3) 清浏览器缓存；4) 用开发者工具 Network 面板禁用缓存。

Q: favicon 显示空白？

A: 检查：1) 文件路径正确；2) HTTP 头 Content-Type 正确（image/x-icon 或 image/png）；3) 文件未损坏；4) 透明背景配置正确。

Q: SVG favicon 不显示？

A: Safari 不支持 SVG favicon。Chrome/Edge/Firefox 支持。需要 PNG fallback。

Q: apple-touch-icon 不生效？

A: 检查：1) 尺寸 180x180；2) PNG 格式；3) 路径正确；4) iOS 设备先"添加到主屏幕"测试；5) 清 iOS Safari 缓存（设置 → Safari → 清除历史记录）。

Q: 如何测试 PWA 安装图标？

A: Chrome DevTools → Application → Manifest 查看配置。或实际安装到桌面测试。

Q: 工具会泄露我的 Logo 吗？

A: 52tool Favicon 生成器在浏览器端运行，原图不上传服务器。适合处理品牌 Logo 等敏感图片。

与其他工具配合

Favicon + Logo 生成

工具：Logo 生成

先用 Logo 工具设计 Logo，再用 Favicon 生成器转 favicon。

Favicon + 二维码

工具：二维码生成器

品牌一致性：favicon 与二维码 Logo 用同一图。

Favicon + SVG 编辑

工具：SVG 编辑器

SVG favicon 用 SVG 编辑器优化。

常见问题解答

Q: favicon.ico 必须放根目录吗？

A: 不必。但默认浏览器请求 /favicon.ico，放根目录省配置。放别处需 HTML 指定。

Q: 同一域名不同页面能不同 favicon 吗？

A: 能。每个 HTML 页面单独指定 。如管理员页面用红色 favicon，用户页面用蓝色。

Q: 怎么生成圆形 favicon？

A: 原图做圆形透明背景，导出 PNG。或在生成器中选择"圆形"形状。注意 favicon.ico 格式不支持半透明，需用 PNG。

Q: favicon 能动吗？

A: .gif 支持，但不推荐（用户体验差且分散注意）。现代方案用 JavaScript 动态切换 favicon 模拟动画。

Q: dark mode 怎么适配 favicon？

A: SVG favicon 用 CSS media query：

<svg>
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
  </style>
  <circle class="icon" cx="16" cy="16" r="14" fill="black"/>
</svg>

Q: 工具有 API 吗？

A: 52tool 当前提供网页版。需要批量生成可用 RealFaviconGenerator API 或 favicons-webpack-plugin 等 npm 包。

总结

favicon 是网站必备：

记住：原图至少 512x512，设计极简，透明背景，SVG 优先。

📚 推荐阅读

Base64 编解码：文本/图片/文件 Base64 编解码教程：文本、图片、文件互转，前端 data URI、邮件附件、JWT 等实战场景，附 JavaScript/Python/Java 实现。 颜色对比度检测：WCAG 无障碍 颜色对比度检测教程：WCAG 2.1 AA/AAA 标准、4.5:1 比例、色盲友好设计，让你的网站符合无障碍标准。 在线取色器：HEX/RGB/HSL 在线取色器教程：从图片取色、HEX/RGB/HSL 互转、配色方案生成、颜色对比度检查，前端设计师必备。
备案图标

苏公网安备 32050602010540号


备案号:苏ICP备17028448号 | 独立开发者出品 · 找我合作
🛒 数字商品店 · ¥9.9 起 💰 友链 / Banner 位招租 · 首单 7 天免费试投
🛒 商店 · 🔗 友链 · 💼 赞助 · 📰 RSS · 🗺️ Sitemap