工具
指南

Favicon 生成器

图片

从图片或字母生成完整的 favicon 图标集 —— 输出 favicon.ico（16/32/48）、apple-touch-icon、安卓 Chrome 图标与 webmanifest，打包成 .zip。全程本地，不上传。

100% 客户端 无后端
来源
点击或拖入图片
尺寸

webmanifest 与 apple-touch-icon 能让图标在 iOS 主屏和安卓上正确显示。

预览
HTML 代码片段 
 
 
 
 
 
 
 
     
  
本页内容
什么是网站图标生成器？#


网站图标就是浏览器标签页、收藏夹列表、手机”添加到主屏幕”预览、Windows 磁贴里显示的那个小图标。麻烦的地方在于：“网站图标”并不是一个文件——不同平台要的尺寸和文件名都不一样。桌面浏览器要经典的 favicon.ico，iOS 要 180×180 的 apple-touch-icon.png，可安装的 PWA 要 192 和 512、外加一份 site.webmanifest，现代浏览器还会顺手读几个独立 PNG。把这些全手动生成一遍、再把 <head> 里那一串引用标签也配齐，正是那种你绝不该再手工做第二次的琐碎活。


本页从一个源头产出整套图标：要么是你提供的图片，要么是纯色底上加一个字母（适合快速做一个”首字母”品牌标）。勾选要的尺寸，它就把所有东西打进一个 .zip——多图 ICO、独立 PNG、webmanifest，外加一份列好 <link> 和 <meta> 标签、可直接粘贴的 HTML 片段。所有栅格化都在浏览器里完成。


怎么使用#


    

  1. 选 来源：

      

    • 图片 —— 拖入（或选择）一张大致正方形的图，它会被画进每一个选中的尺寸。
      • 

    • 字母 —— 输入一两个字符（默认 A），选一个 背景色（默认天蓝）和 前景色（默认白）。字母在每个尺寸下都居中绘在背景上。
      • 

    

    2. 

  2. 在 尺寸 里勾选你要的，可选 16、32、48、180、192、512，默认六个全开。其中 48 只会进 favicon.ico（没有独立 PNG），所以只要勾了 16 和 32，它就会自动被打包进去。
    3. 

  3. 看 预览 画布——它在透明棋盘格背景上渲染最大的那个选中尺寸，透明区域一目了然。
    4. 

  4. 点 下载 ZIP。默认全选时，压缩包里有：

      

    • favicon.ico —— 把 16、32、48 作为内嵌 PNG 打包的多图 ICO（Vista 起所有现代浏览器都认的格式）。
      • 

    • favicon-16x16.png、favicon-32x32.png —— 独立 PNG。
      • 

    • apple-touch-icon.png —— 180×180 的 iOS 图标。
      • 

    • android-chrome-192x192.png、android-chrome-512x512.png —— PWA 清单图标。
      • 

    • site.webmanifest —— 引用 192/512 图标，带主题色和背景色。
      • 

    • html-snippet.html —— <link rel="icon">、<link rel="apple-touch-icon">、<link rel="manifest">、<meta name="theme-color"> 等标签。
      • 

    

    5. 

  5. 解压到网站根目录，把片段粘进 <head>，图标就会从 / 被解析。
    6. 



主要特性#


    

  • 一个 zip 给齐命名合规的整套文件。 文件名（favicon.ico、apple-touch-icon.png、android-chrome-512x512.png、site.webmanifest）正是浏览器和构建工具默认在网站根目录找的那些。
    • 

  • 自研 ICO 编码器。 从零写的正规多图 Vista+ ICO（ICONDIR + ICONDIRENTRY 表 + 内嵌 PNG 载荷），不是只有一个 32×32 的单图残桩。
    • 

  • 字母模式，秒出品牌标。 两个字符、两个取色器就完事——给内部工具和演示做个辨识度够的图标，三十秒搞定。
    • 

  • 只产出你真用得上的文件。 取消勾某个尺寸，它对应的 PNG 和清单条目都不会生成，HTML 片段也会同步重算。
    • 

  • 开箱即粘的 head 片段。 精确的 <link> 和 <meta> 行，且只引用实际生成的资源，不会粘出一堆指向不存在文件的引用。
    • 

  • 100% 本地。 源图或字母都在浏览器里栅格化，zip 也在浏览器里打包，不上传。
    • 



实例演示#


给一个叫 “Glide” 的业余项目做图标。来源 选 字母，输入 G，背景色 设为 #0ea5e9、前景色 设为 #ffffff，六个尺寸保持全勾，点 下载 ZIP。解压后得到：


favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html


html-snippet.html 里正好是：


<link rel="icon" href="/favicon.ico" sizes="any">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">


把这八个文件丢进网站根目录、那六行粘进 <head>，所有平台——浏览器标签页、iOS 主屏幕、Android PWA——都能解析到正确的图标。


常见问题#


为什么没有独立的 48×48 PNG？#


48 只会在 favicon.ico 内部被消费（某些老工具会从 ICO 里读 48 这一项）。再单独发一个 favicon-48x48.png 纯属没有任何浏览器会去请求的死重，所以工具把 48 打进 ICO、跳过独立文件。


真的非要六个尺寸全要吗？#


要全覆盖就得全要。如果你只在乎浏览器标签页、不在乎 iOS 或 PWA，把 180、192、512 取消勾选，就只拿到 ICO 加 16/32 的 PNG——体积小得多。HTML 片段里也就只剩 icon 那几行，没有 manifest 或 apple-touch 行。


ICO 说是”内嵌 PNG”，这合规吗？#


合规。Windows Vista 起，ICO 就可以内嵌 PNG 载荷（而不是老的 BMP 格式），所有现代浏览器都认这种形式。它省去单独的 BMP 编码器，48 那个尺寸出来的文件也更小。


字母在某个尺寸下看起来没居中。#


字母在每个尺寸下都是按一致的字体居中绘制的；像 M 这种很方的字母、或者带上伸或下伸部分的字母，因为字体度量的关系，可能看着略偏高或偏低。如果一定要像素级居中，就在图像编辑器里把标识画好、改用 来源：图片。