如何制作网站 favicon 图标 - 9527改图完整教程

favicon(favorite icon)是显示在浏览器标签页、书签栏、收藏夹中的小图标,是一个网站品牌识别的重要组成部分。本文将详细介绍 favicon 的概念、尺寸规范,以及如何使用 9527改图 一键将任意图片转换为标准 ICO 格式 favicon。

立即制作 favicon →

使用 9527改图一键生成 favicon

什么是 favicon

favicon 是 "favorite icon" 的缩写,通常是一个 16x16 或 32x32 像素的小图标,出现在:

浏览器标签页标题左侧
浏览器书签栏
收藏夹中网站名称左侧
移动端浏览器首页快捷方式
PWA 应用的桌面图标(此时需要 192x192 或 512x512 尺寸)

一个好的 favicon 能显著提升网站的品牌辨识度和专业感,让用户在大量标签页中快速找到你的网站。

favicon 的标准尺寸

不同场景对 favicon 的尺寸要求不同:

尺寸	使用场景	是否必需
16x16	浏览器标签页、收藏夹	必需(传统)
32x32	高 DPI 屏幕标签页、Windows 任务栏	推荐
48x48	Windows 站点图标	可选
64x64	macOS Safari 标签页	可选
96x96	Android Chrome	推荐
128x128	macOS Dock 图标	可选
192x192	Android Chrome 主屏、PWA	PWA 必需
256x256	高分辨率场景	可选
512x512	PWA 启动屏	PWA 必需

现代浏览器的最佳实践是同时提供 16x16、32x32 和 180x180(Apple Touch Icon)三种尺寸,用 PNG 格式,通过 <link> 标签分别指定。

但对于传统兼容方案,一个 32x32 的 ICO 格式文件就足够了,大多数浏览器会自动适配。

什么是 ICO 格式

ICO 是 Windows 的图标文件格式,后缀为 .ico。它和 PNG/JPG 最大的区别是:一个 ICO 文件可以包含多个不同尺寸的图标。比如一个 favicon.ico 可以同时包含 16x16、32x32、48x48 三种尺寸,浏览器会根据需要自动选择最合适的。

9527改图生成的 ICO 文件内部使用 PNG 编码,体积小、清晰度高,兼容所有现代浏览器。

立即制作 favicon →

使用 9527改图一键生成 favicon

使用 9527改图制作 favicon

使用 9527改图制作 favicon 只需要 3 步:

步骤 1:准备源图

准备一张图片,可以是 logo、品牌图标、产品图等。最佳实践:

图片本身接近正方形(如果是长方形,可以选择"裁剪填充"模式裁切)
分辨率尽量高(建议 512x512 以上),这样缩小到 16x16 也不失真
图片内容简洁明了,小尺寸下细节会丢失,主元素要突出

步骤 2:上传到 9527改图并设置参数

访问 9527改图主页,拖拽或点击上传你的图片。然后在设置栏中:

目标宽度:输入 32(推荐,通用兼容)
画面比例:点击 1:1 按钮锁定正方形
缩放模式:选择"裁剪填充"(推荐,适合正方形图标)
输出格式:下拉选择 ICO (图标)
点击"批量下载"或单张"下载"按钮

步骤 3:获取 favicon.ico

处理完成后,浏览器会自动下载一个 yourname_resized.ico 文件,这就是你的网站 favicon。

小贴士:文件名后缀 _resized 是工具默认添加的。下载后建议重命名为 favicon.ico(标准命名),方便浏览器自动识别。

HTML 中如何引用 favicon

把 favicon.ico 上传到网站根目录(与 index.html 同级),现代浏览器会自动读取并显示,无需在 HTML 中写任何代码。

但为了兼容性最佳(特别是多尺寸场景),建议在 <head> 中显式声明:

<!-- 传统 ICO favicon(兼容老浏览器) -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<!-- 32x32 PNG favicon(现代浏览器) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- 16x16 PNG favicon(标签页) -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon(iOS Safari 添加到主屏) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome 主屏图标 -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">

<!-- 网站 manifest -->
<link rel="manifest" href="/manifest.json">

favicon 设计建议

一个专业的 favicon 应该:

简洁:在 16x16 像素下能清晰识别的设计,避免复杂细节
对比强烈:主元素与背景有明显色差
品牌一致:使用品牌主色调,与 logo 风格统一
避免文字:小尺寸下文字会模糊,优先使用图形/字母缩写
测试多场景:在浅色标签页、深色标签页、书签栏分别查看效果

常见问题

Q: ICO 和 PNG favicon 哪个好?: 都支持。ICO 兼容老浏览器(IE);PNG 体积更小、清晰度更高(Chrome/Firefox/Safari 现代浏览器)。建议同时提供两种。
Q: 上传后图片会上传服务器吗?: 不会。9527改图完全在您的浏览器本地处理图片,绝不上传任何服务器,适合处理含商业机密的 logo。
Q: 制作好的 favicon 不显示怎么办?: 排查清单:① 文件名是否为 favicon.ico 且放在根目录;② 浏览器是否强制刷新(Ctrl+F5);③ 是否在 HTML 中正确引用;④ 文件权限是否可访问;⑤ 浏览器缓存,可清除缓存或无痕模式测试。
Q: ICO 文件大小多少合适?: 单尺寸 ICO 建议 5KB 以内,多尺寸 ICO 建议 20KB 以内。9527改图生成的 ICO 使用 PNG 编码,体积已经过优化。

立即开始 →

打开 9527改图一键制作 favicon

相关阅读: 批量图片尺寸调整教程