logo
GeekFormat

网站图标生成器

单页 Favicon 生成器

预览

text · G
--
16×16
--
32×32
--
180
--
192
--
512
压缩包包含：favicon.ico · 16/32/180/192/512 png · site.webmanifest

HTML 安装代码

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

文件放到网站根目录，代码插入 <head> 即可。

GeekFormat在线Favicon生成器，帮你快速制作符合现代浏览器标准的完整网站图标包，不用打开PS或设计软件。三种生成模式：①文字模式：输入1-2个字母/汉字，8种字体可选，字号滑块调节，文字色+背景色自定义；②图片模式：上传PNG/JPG/WebP图片，自动居中裁剪为正方形；③Emoji模式：输入或选择Emoji表情快速生成。支持方形/圆角矩形/圆形三种形状，可选透明背景，实时预览5种尺寸（16×16/32×32/180×180/192×192/512×512），160ms防抖实时重新生成，一键打包下载ZIP包含：favicon.ico（兼容旧IE）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（iOS书签图标）、android-chrome-192x192.png、android-chrome-512x512.png（PWA图标）、site.webmanifest（PWA配置），并提供标准HTML头部链接代码一键复制，纯Canvas本地生成不上传图片。

适用场景

  • 新建个人博客、公司官网、独立站时快速制作favicon，不用开设计软件
  • 前端开发做项目Demo/原型/Landing Page时快速生成临时图标用
  • 用品牌首字母快速生成文字图标用于内部系统、后台管理系统
  • 用Emoji做个人项目、开源项目文档站点的favicon，有趣又省事
  • 客户网站上线前生成完整图标包，一次搞定桌面、iOS、Android、PWA所有尺寸
  • 活动页、营销落地页快速制作专属favicon，和主视觉保持颜色一致
  • PWA项目打包前生成全套必需图标和webmanifest配置文件
  • 给GitHub Pages、Vercel、Netlify部署的项目快速添加favicon
  • 开发调试时临时替换favicon看效果，不用反复切图
  • 个人作品集/简历网站用字母或简单Emoji做有个人特色的favicon
  • 学习网站开发时理解favicon各种尺寸和HTML引用方式
  • 替换旧网站favicon，一键生成符合现代标准的完整图标包升级

功能特点

  • 三种图标来源：文字（1-2字符，8种字体）、上传图片（PNG/JPG/WebP自动居中裁剪）、Emoji表情（12个快捷Emoji+自定义输入）
  • 三种形状样式：直角方形、22%圆角矩形、圆形裁剪，覆盖从传统网站到现代App图标的风格
  • 透明背景选项：一键切换透明/有色背景，适配深色模式和不同浏览器标签页背景
  • 文字完整自定义：文字颜色+背景颜色选择器，8种系统字体（Arial/Verdana/Georgia/Times New Roman/Courier New/Impact/Tahoma/Trebuchet MS），字号滑块0.48-0.82比例精细调节
  • 8种系统字体：从无衬线(Arial/Verdana/Tahoma/Trebuchet MS)、衬线(Georgia/Times New Roman)到等宽(Courier New)、粗体标题(Impact)，满足不同品牌风格
  • 5种尺寸实时预览：16×16（浏览器标签）、32×32（任务栏）、180×180（苹果touch图标）、192×192/512×512（Android/PWA），边调边看效果
  • 完整标准图标包：一键下载ZIP包含favicon.ico + 5个PNG + site.webmanifest共7个文件，覆盖桌面、移动、PWA全部场景
  • favicon.ico兼容旧浏览器：自动生成标准ICO格式文件，兼容IE等老旧浏览器，不只生成PNG
  • apple-touch-icon：生成180×180图标用于iOS Safari添加到主屏幕
  • PWA支持：包含192/512安卓Chrome图标和site.webmanifest配置文件，满足渐进式Web应用要求
  • HTML代码一键复制：提供标准link标签代码片段，直接复制粘贴到网站<head>里就行
  • 160ms防抖实时预览：调整颜色/字体/字号/形状后自动重新生成，边调边看效果不用点击生成按钮
  • 图片自动居中裁剪：上传图片自动按正方形居中裁剪，不需要提前裁剪成1:1比例
  • 纯Canvas本地处理：所有图标用浏览器Canvas API本地绘制打包ZIP，图片不上传服务器，敏感logo安全无泄露

使用方法

  1. 选择生成模式：「文字」输入字母/汉字、「图片」上传logo、「Emoji」选择表情
  2. 调整样式：选择字体（文字模式）、调节字号、选文字颜色和背景颜色、选择形状（方/圆角/圆）、选择是否透明背景
  3. 观察右侧5种尺寸实时预览，确认16×16小图标清晰可辨
  4. 点击「下载ZIP包」按钮保存图标包到本地，复制HTML代码片段，解压后把文件放网站根目录，代码粘贴到<head>中

常见问题

生成的ZIP包里面包含哪些文件？

包含7个标准文件：favicon.ico（32×32嵌入ICO格式，兼容旧浏览器）、favicon-16x16.png（浏览器标签栏小图标）、favicon-32x32.png（浏览器任务栏/书签）、apple-touch-icon.png（iOS Safari添加到主屏幕180×180）、android-chrome-192x192.png和android-chrome-512x512.png（Android/PWA图标）、site.webmanifest（PWA配置文件定义图标和主题色）。

文字模式可以输入几个字符？

建议输入1-2个字符（字母、数字或汉字），比如品牌首字母「G」、双字母「GF」或单字「极」，因为favicon尺寸很小（16×16像素只有16个像素宽），字符太多会看不清。工具自动截断到最多2个字符。

支持上传什么格式的图片？

支持PNG、JPG/JPEG、WebP三种常见图片格式。上传后工具会自动将图片按正方形居中裁剪（取中间正方形区域），不需要你提前裁成1:1比例。建议使用正方形、背景简洁清晰的logo图片效果最好。

生成的HTML代码怎么用？

下载ZIP解压后把里面的所有文件放到你网站根目录，然后复制工具提供的HTML代码（4行link标签）粘贴到你网页<head>标签内即可。代码已经包含了所有需要的图标引用，包括favicon、apple-touch-icon和manifest。

圆形/圆角/方形有什么区别？

方形是传统favicon样式，直角矩形；圆角矩形是现代网站和App常用风格（22%圆角）；圆形适合社交媒体风格或品牌要求圆形图标的场景。注意：favicon实际显示时浏览器通常会自己加圆角或遮罩，三种形状主要影响PWA添加到桌面时的图标外观。

透明背景有什么用？

默认是有背景色的图标；开启透明背景后背景层不绘制，只有文字/Emoji/图片本身是不透明的。透明favicon适合需要和浏览器标签栏背景融合的场景，或者你的logo本身就是透明背景PNG。注意：文字/Emoji模式透明背景时要确保文字颜色在浅/深背景下都清晰可见。

Emoji模式可以用任意Emoji吗？

可以。可以直接输入任何Emoji（最多2个），或者从工具提供的12个常用Emoji快捷选择（🔥🚀✨🎯💡✅🌈🧠💎📦🪄❤️）。Emoji渲染依赖系统字体，效果在不同设备可能略有差异。

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

不同场景使用不同尺寸：浏览器标签栏用16×16，书签栏/任务栏用32×32，iOS添加到主屏幕用180×180，Android桌面和PWA用192/512。只放一个favicon.ico在高DPI屏幕和移动端会模糊，多尺寸PNG确保在任何设备上都清晰锐利。

可以用来生成PWA图标吗？

可以。ZIP包里的android-chrome-192x192.png、android-chrome-512x512.png和site.webmanifest就是为PWA（渐进式Web应用）准备的，webmanifest文件里包含了图标路径和主题色配置，放到网站根目录即可满足PWA图标要求。

上传的logo图片会上传到服务器吗？

不会。所有图标绘制、缩放、ICO生成、ZIP打包全部在你浏览器本地通过Canvas API和JSZip库完成，图片数据不会离开你的电脑，内网环境、未公开logo都可以放心使用。

为什么我做的16×16小图标看着模糊？

16×16像素总共只有256个像素点，非常小，如果你的设计太复杂（比如多个小字、太多细节）缩小后必然糊。建议favicon设计尽量简洁：一个字母、一个简单图形或单个Emoji效果最好，这也是为什么favicon通常就是品牌logo的简化版本。

怎么让favicon在浏览器里更新？

浏览器会缓存favicon，更新后如果看到还是旧图标，可以：①强制刷新页面（Ctrl+F5/Cmd+Shift+R）；②清除浏览器缓存；③给favicon路径加版本号参数（如favicon.ico?v=2）。

favicon.ico和PNG图标都需要吗？

现代浏览器都支持PNG favicon，但favicon.ico是兼容古老浏览器（主要是IE系列）的传统格式，为了最好的兼容性工具都生成了。如果只需要现代浏览器支持，其实PNG就够，但全放上去更稳妥。

支持SVG favicon吗？

目前生成标准PNG+ICO图标包，SVG favicon虽然现代浏览器已支持但兼容性还不统一。工具的ZIP覆盖了绝大多数场景，如果需要SVG可以自行额外添加SVG文件到HTML头部。

手机上能用吗？

可以。工具做了响应式布局，在手机上调参数、预览、下载都可以，但生成ICO和打包ZIP对手机浏览器性能有一定要求，建议电脑上操作体验更好。

关于Favicon网站图标

Favicon（Favorites Icon的缩写，也叫网站图标、书签图标）是浏览器标签页、书签栏、历史记录、地址栏中显示的小图标，是网站品牌识别的最基本元素之一。一个没有favicon的网站在众多标签页中会显示空白文档图标，显得不专业；一个设计良好的favicon能让用户在一堆标签里快速找到你的网站，是网站上线前必备的基础资源。

现代网站需要的不只是一个favicon.ico。随着移动设备普及和PWA（渐进式Web应用）发展，一个完整的网站图标包需要包含多种尺寸和格式：传统的favicon.ico兼容老旧浏览器，16/32 PNG用于普通浏览器标签和书签，180×180 apple-touch-icon用于iPhone/iPad用户「添加到主屏幕」，192/512 PNG用于Android桌面和PWA启动画面，还有site.webmanifest告诉浏览器这些图标的位置和主题色。手动制作所有这些尺寸、写对HTML引用代码对于非设计背景的开发者是件麻烦事。

文字favicon是最快的方式：大多数个人博客、开源项目、内部系统其实不需要复杂的logo设计，用品牌首字母（比如G代表Google、F代表Facebook）配合品牌色做一个简洁的文字图标效果就很好。工具提供8种常见系统字体、字号调节、颜色自定义，不用打开Photoshop/Figma，一分钟就能做出一个专业的favicon。

Emoji favicon是近年流行的简单方案：Emoji本身就是设计师画好的小图标，颜色鲜明识别度高，个人项目、原型、文档站点用一个相关Emoji（比如火箭🚀代表快速、灯泡💡代表创意、火焰🔥代表热门）当favicon既有趣又省事，比空白图标好太多，而且自带跨平台一致性（虽然系统间渲染略有差异）。

图片模式适合已有logo的场景：如果你已经有品牌logo图片，上传后工具自动居中裁剪为正方形，生成所有需要的尺寸。注意小尺寸下图标只有16像素宽，复杂logo缩小后会糊成一团，所以favicon通常不是完整版logo，而是logo的符号/标识部分——比如Nike的勾、Apple的苹果、麦当劳的M，简单形状在小尺寸下依然清晰可辨。

为什么要本地生成不上传服务器？一是隐私：未发布的品牌logo、客户的设计稿属于敏感资产，上传到第三方工具服务器有泄露风险；二是速度：本地Canvas绘制瞬间完成，不需要等上传下载；三是可靠：不需要网络，内网环境也能用。所有图像处理用浏览器原生Canvas API，ZIP打包用纯JS的JSZip库，不需要后端服务。

三种形状（方形、圆角、圆形）是为了适配不同平台风格：Windows传统上用方形图标，iOS/iPadOS用圆角矩形（Squircle），Android和部分网站用圆形图标。工具里的22%圆角是比较通用的圆角大小，接近现代UI风格。注意浏览器实际显示favicon时通常不会把图标裁成圆形（除了个别浏览器），圆形主要影响添加到手机桌面后的外观。

需要说明：①favicon效果高度依赖设计简洁性，复杂图案16×16下肯定模糊，建议使用简单文字/图形/Emoji；②Emoji渲染效果依赖操作系统字体，不同系统看到的Emoji可能略有差异；③ICO文件是基于32×32 PNG嵌入生成的，满足大多数兼容需求；④透明背景在某些老旧浏览器可能显示为黑色或白色背景，建议主站使用有背景色更稳妥。

术语表

Favicon
网站图标（Favorites Icon），显示在浏览器标签页、书签栏、地址栏的小图标，是网站品牌识别的基础元素，文件名通常是favicon.ico。
favicon.ico
传统的Windows图标格式文件，可以内嵌多个尺寸的图标，是为了兼容IE等老旧浏览器，现代浏览器也支持PNG favicon但ico文件兼容性最好。
apple-touch-icon
iOS Safari浏览器「添加到主屏幕」时使用的图标，尺寸180×180像素，是苹果设备专用的网站图标。
site.webmanifest
PWA（渐进式Web应用）的配置文件JSON格式，定义应用名称、图标、主题色、启动方式等信息，是现代网站提供应用化体验的必需文件。
PWA (渐进式Web应用)
Progressive Web App，可以像原生App一样安装到手机桌面的网站，需要提供大尺寸图标和manifest配置文件。
Canvas API
浏览器原生的2D绘图API，本工具用它在本地绘制各种尺寸的图标，不需要服务器处理图片。
JSZip
纯JavaScript实现的ZIP压缩库，可以在浏览器本地创建和下载ZIP文件，本工具用它打包所有图标文件。
160ms防抖
调整参数后延迟160毫秒再重新生成图标，避免你拖动滑块时每毫秒都重绘造成卡顿，体验更流畅。
居中裁剪
上传图片后自动取中间的正方形区域裁剪到1:1比例，不需要用户手动提前裁剪图片。
DPI/高分辨率屏幕
高DPI屏幕（如Retina）每个CSS像素对应多个物理像素，提供大尺寸PNG(32/180/512)能保证在高分屏上图标清晰不模糊。
透明背景
图标背景层不绘制，只有前景文字/图片，可以和浏览器标签栏背景融合，适合有特殊设计需求的场景。
浏览器缓存
浏览器会缓存favicon文件减少请求，更新图标后需要强制刷新或加版本号参数才能看到新图标。

图标尺寸用途对照表

ZIP包中每个文件的用途：

文件名尺寸使用场景
favicon.ico多尺寸内嵌传统兼容、地址栏、IE浏览器
favicon-16x16.png16×16浏览器标签页小图标
favicon-32x32.png32×32任务栏、书签栏、快捷方式
apple-touch-icon.png180×180iPhone/iPad添加到主屏幕
android-chrome-192x192.png192×192Android桌面图标、PWA小图标
android-chrome-512x512.png512×512PWA启动画面、安装弹窗
site.webmanifestJSON文本PWA配置文件，定义图标和主题色

三种形状风格说明

不同形状适合的场景：

形状风格特点最适合场景
方形直角矩形，传统经典传统网站、Windows桌面、后台系统
圆角22%圆角，现代圆润现代网站、SaaS产品、移动端风格
圆形完整圆形，社交媒体风格社交类产品、个人品牌、App图标

可用字体列表

文字模式支持的8种系统字体：

字体名类型风格描述
Arial无衬线通用、现代、中性，最安全选择
Verdana无衬线字宽大、易读，针对屏幕设计
Trebuchet MS无衬线人文主义，友好圆润
Tahoma无衬线紧凑、清晰，Windows常用
Georgia衬线经典优雅，适合传统/阅读类
Times New Roman衬线经典正式，学术/新闻传统风格
Courier New等宽程序员/技术感，代码风格
Impact粗体标题粗壮醒目，标题感强

Privacy & Security

本Favicon生成器所有图标绘制、格式转换、ICO生成、ZIP打包全部在你的浏览器本地通过Canvas API和JSZip完成，你上传的图片、输入的文字/Emoji、选择的颜色参数完全不会被上传到任何服务器，也不会被记录或存储。所有文件生成都在本地内存中完成，关闭页面后所有临时数据自动清除，未公开logo、品牌设计稿等敏感内容可以放心使用。

Authoritative References

Troubleshooting

下载ZIP后浏览器提示不安全？

ZIP文件是浏览器本地JSZip生成的，不经过服务器，完全安全。某些浏览器可能对本地生成下载有提示，选择「保留」即可。文件内容都是图片和JSON文本，没有可执行代码。

为什么上传的图片预览看着被裁了？

工具自动对上传图片进行1:1正方形居中裁剪，如果你上传的是长方形图片，边缘会被裁掉。建议最好用正方形logo上传，或者提前把logo放在正方形画布中间再上传。

16×16预览看着很糊？

16×16确实是很小的尺寸，如果图案太复杂必然模糊，这不是工具问题而是尺寸本身限制。建议简化设计：少文字、少细节、用高对比度颜色，简单图形在16px下依然清晰。

替换favicon后浏览器还是显示旧的？

浏览器会强缓存favicon，解决方法：①Ctrl+F5/Cmd+Shift+R强制刷新；②打开新标签页访问；③清除浏览器缓存和图片；④给favicon路径加查询参数 ?v=2 强制更新；⑤在隐身窗口打开看是否为新图标。