不包含。SVG 是可上传的源格式,输出包包含像素 PNG 和 ICO,不会生成矢量或动画 favicon。
网站 Favicon 图标生成器
用一张图片生成 ZIP,包含一个多尺寸 ICO、五张 PNG 图标和一个网页应用清单。可参考下方安装代码,将这些文件接入网站。
Favicon 压缩包包含什么
下载结果为 favicon-package.zip,内含七个文件。HTML 是本文提供的安装示例,不是 ZIP 内的文件。
| 文件 | 尺寸或内容 | 用途 |
|---|---|---|
| favicon.ico | 一个文件包含 16×16、32×32 和 48×48 | 网站多尺寸图标。 |
| favicon-16x16.png | 16×16 | 小尺寸浏览器图标。 |
| favicon-32x32.png | 32×32 | 较大尺寸的浏览器图标。 |
| apple-touch-icon.png | 180×180 | Apple 主屏幕图标引用。 |
| android-chrome-192x192.png | 192×192 | 供网页应用清单引用的图标。 |
| android-chrome-512x512.png | 512×512 | 供网页应用清单引用的较大图标。 |
| manifest.json | 站点名称、颜色和两条图标引用 | 需要按自己网站检查和调整的初始清单。 |
支持 PNG、JPG/JPEG、WebP、GIF 或 SVG 输入,输出为静态 ICO 和 PNG;上传 SVG 不会生成 SVG favicon。
生成并安装网站图标
选择容易辨认的原图
上传简洁的图片。最大的 PNG 输出为 512×512,建议使用至少该尺寸的正方形原图;单纯放大图片无法改善不清楚的设计。
生成并下载 ZIP
点击“生成 Favicon 包”,完成后下载,并在添加到网站前解压。
检查清单并部署文件
按需要修改 manifest.json 中的默认名称和颜色。把文件放到网站可公开访问的地址;放在子目录时要同步修改路径。
加入 HTML 引用并检查
参考下方示例,把代码放到页面 head 部分。确认图标和清单 URL 可访问,再查看浏览器中的图标。
把图标添加到网站
以下示例假设文件从网站根路径提供。在页面 head 中添加这些引用,并按实际部署位置修改路径。
<link rel="icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">发布前检查以下项目:
| 检查项 | 处理方式 |
|---|---|
| 公开文件路径 | 开头的斜杠代表网站根路径。使用子目录时,同时修改 HTML 的 href 和 manifest.json 内图标的 src。 |
| 清单默认值 | 生成的 name 和 short_name 为 My Website,theme_color 和 background_color 为 #ffffff。下载后按需修改;这些字段不会给图标图片本身换色。 |
| 网站已有配置 | 检查主题或框架是否还声明了其他图标,避免更新后仍保留指向旧 favicon 的配置。 |
带有图标的 manifest 不等于完整的可安装或离线网页应用。本生成器不提供 service worker,也不保证所有设备都能安装网站。
让小尺寸图标清晰可辨
小字和细线可能看不清。优先使用简单标志、清楚的对比,并在主体周围留出适当空间。
非正方形原图会按比例放入正方形画布,空白处透明填充;小图可能被放大。需要精确构图时,请先准备好正方形原图。
Favicon 安装常见问题
先确认部署后的文件 URL 和页面图标声明正确。浏览器可能缓存 favicon;确认网站已指向新文件后,可用新的浏览器会话检查。
当前表单只选择图片。请在下载的清单中修改 name、short_name、theme_color 和 background_color,并让 HTML 中的 theme-color 与之保持一致。
不能。它提供图标文件和初始清单。安装与离线功能还需要网站的其他配置,不会由这个包自动补齐。