发布于 2026-09-02 · cataito

Favicon 完全指南：尺寸规范、HTML 写法与在线制作

一文搞定网站小图标：什么是 favicon、全平台尺寸规范、favicon.ico 与 PNG/SVG 的取舍、可直接复制的 HTML 声明代码，以及如何免费在线生成 favicon 包。

目录

  1. 什么是 Favicon
  2. 全平台 Favicon 尺寸规范
  3. favicon.ico、PNG 还是 SVG
  4. HTML 声明代码（可直接复制）
  5. 各平台行为差异
  6. 如何在线制作 Favicon
  7. Favicon 设计技巧
  8. 常见问题

什么是 Favicon

Favicon（favorites icon）是显示在浏览器标签页、地址栏、书签列表和历史记录里的小图标，是网站品牌在浏览器中最小、也是曝光最频繁的载体。用户开了十几个标签页时，能帮他们快速定位你的站；一个含糊或默认的 favicon 则会让站点显得不可信。

favicon 的历史可以追溯到 1999 年的 Internet Explorer 5：最初它只是「加入收藏夹时显示的图标」，约定放在网站根目录、命名为 favicon.ico。二十多年后的今天，favicon 已经演变成一组面向不同设备与场景的图标文件集合——浏览器标签、iOS 主屏、Android 安装后的启动图标、PWA 窗口，各有各的尺寸要求。

全平台 Favicon 尺寸规范

现代网站需要覆盖的 favicon 尺寸远不止一个 16×16。下表是业界通行的完整清单：

文件尺寸用途
favicon.ico16 / 32 / 48 px 打包浏览器标签页、地址栏、历史记录（兜底）
favicon-16x16.png16×16Chrome / Firefox 标签页标准档
favicon-32x32.png32×32Safari 标签页、Retina 屏标准档
apple-touch-icon.png180×180iOS 添加到主屏（Safari 会自动加圆角）
android-chrome-192x192.png192×192Android Chrome / PWA manifest 图标
android-chrome-512x512.png512×512PWA 启动画面与高分辨率场景
favicon.svg矢量支持 SVG 的现代浏览器（可跟随深色模式）

如果只想做最低配置：根目录一个含 16/32px 的 favicon.ico + 一个 180×180 的 apple-touch-icon，即可覆盖绝大多数场景。追求完美则按上表全配。

favicon.ico、PNG 还是 SVG

三种格式各有分工，不是三选一：

  • ICO：兼容性之王。部分老旧浏览器、爬虫和阅读器默认只请求 /favicon.ico。它是唯一支持在单个文件里打包多个尺寸的 favicon 格式。
  • PNG：现代浏览器的主力。体积小、透明度好，通过 <link rel="icon"> 声明任意尺寸。iOS 主屏图标也用 PNG。
  • SVG：一次绘制、任意缩放。还支持用 CSS 媒体查询让 favicon 跟随系统深色模式切换明暗。缺点是 Safari（含 iOS）不支持。

推荐组合：ICO（根目录兜底）+ PNG（按尺寸声明）+ SVG（渐进增强，声明在最后）。浏览器按声明顺序从后往前选用最合适的一个。

HTML 声明代码（可直接复制）

把下段代码放进每个页面的 <head> 中（实际部署时替换成你自己的路径）：

<!-- 兜底：根目录 favicon.ico（无需声明也会被请求，显式声明更稳） -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- 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">

<!-- iOS 主屏图标（不要加透明度，Safari 会补黑底） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- SVG 矢量版（写在 PNG 之后作为增强） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PWA 清单（含 192/512 图标） -->
<link rel="manifest" href="/site.webmanifest">

对应的 site.webmanifest 最小示例：

{
  "name": "我的网站",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

各平台行为差异

  • Chrome / Edge / Firefox：优先用 <link rel="icon"> 声明的文件，按 sizes 匹配设备像素密度；都没有时才回退到 /favicon.ico。
  • Safari（macOS）：对 SVG favicon 支持有限，实践中以 PNG 为主；标签页固定显示低分辨率图标时，多半是缺 32×32 PNG。
  • iOS Safari：「添加到主屏幕」读取 apple-touch-icon（180×180 最佳），并自动裁圆角——所以源图应满幅不透明、自绘圆角留白。
  • Android Chrome：支持「添加到主屏」升级为 PWA，图标取自 webmanifest 中的 192/512 两档。
  • 搜索引擎：Google 移动端搜索结果有时会直接展示站点 favicon，模糊的图标会影响点击率。

如何在线制作 Favicon

推荐使用本站的 Favicon 生成器——免费、无需注册，上传一张图即可一次性生成全尺寸 favicon 包（多尺寸 .ico + 各档 PNG），且全部处理在浏览器本地完成，图片不会上传服务器。

  1. 准备一张方形 Logo：建议 512×512 以上的 PNG（透明或纯色底均可，源图越大越清晰）。
  2. 上传图片：打开 Favicon 生成器，点击或拖入即可，支持 PNG / JPG / WebP / SVG。
  3. 选择需要的尺寸：默认勾选常用档位，按你网站的配置增减。
  4. 生成并部署：下载 favicon 包，解压后把文件放到网站根目录，再把上文 HTML 代码复制进 <head>。

Favicon 设计技巧

  • 做减法：16×16 下只有几十个像素可用，全称 Logo 必糊。取首字母、单一图形或简化版标志。
  • 高对比：图标要与浅色和深色两种标签栏背景都清晰可辨，可在设计工具里双底色预览。
  • 利用描边：浅色图形加一圈深色描边，在任何底色上都能「浮」出来。
  • 深色模式适配：提供 SVG 版并写入 @media (prefers-color-scheme: dark) 切换，是 2026 年的加分项。
  • 别用 JPG：无透明通道，边缘出白块；统一走 PNG + ICO + SVG。

常见问题

Q：favicon 的标准尺寸到底是多少？

A：没有唯一标准。最低配：favicon.ico（16/32px）+ apple-touch-icon（180px）；全配再加上 16/32 PNG、192/512 PWA 图标与 SVG。

Q：换了 favicon 为什么浏览器还显示旧的？

A：favicon 被浏览器和 CDN 强缓存。给链接加版本参数（?v=2）、直接改文件名，或 Ctrl+F5 强刷；线上更新建议每次都换文件名。

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

A：强烈建议。许多浏览器和历史工具会无视 HTML 声明、直接请求 /favicon.ico。PNG/SVG 可以放任何路径。

Q：apple-touch-icon 为什么不要透明背景？

A：iOS 会把透明区域填成纯黑，透明 Logo 在主屏上会变成黑底碎块。主屏图标应做成满幅不透图片，圆角交给系统裁切。

Q：在线生成 favicon 安全吗？

A：取决于工具实现。本站 Favicon 生成器完全在浏览器本地运算（Canvas + Blob），网络面板可验证没有任何图片上传请求。

免费生成你的全尺寸 Favicon 包

多尺寸 .ico + PNG 一键打包 · 纯浏览器本地处理 · 图片不上传

打开 Favicon 生成器 →

Table of Contents

  1. What Is a Favicon
  2. Favicon Sizes for Every Platform
  3. favicon.ico vs PNG vs SVG
  4. HTML Code (Copy & Paste)
  5. Platform Behavior Differences
  6. How to Make a Favicon Online
  7. Favicon Design Tips
  8. FAQ

What Is a Favicon?

A favicon (favorites icon) is the small icon shown in browser tabs, the address bar, bookmarks, and history. It is your brand's smallest — and most frequently seen — representative in the browser. When a user has a dozen tabs open, a clear favicon helps them find your site instantly; a blurry or default one makes the site look untrustworthy.

The favicon dates back to Internet Explorer 5 in 1999: originally just "the icon shown when you bookmark a site," conventionally placed in the site root and named favicon.ico. Twenty-some years later, a favicon is really a collection of icon files for different devices and contexts — browser tabs, the iOS home screen, Android launcher icons, and PWA windows each have their own size requirements.

Favicon Sizes for Every Platform

Modern sites need far more than a single 16×16 icon. The industry-standard full set:

FileSizeUsed for
favicon.ico16 / 32 / 48 px packedBrowser tabs, address bar, history (fallback)
favicon-16x16.png16×16Chrome / Firefox standard tab icon
favicon-32x32.png32×32Safari tabs, Retina displays
apple-touch-icon.png180×180iOS "Add to Home Screen" (Safari rounds the corners)
android-chrome-192x192.png192×192Android Chrome / PWA manifest
android-chrome-512x512.png512×512PWA splash screens, high-res contexts
favicon.svgvectorModern browsers (can follow dark mode)

Minimum viable setup: a favicon.ico with 16/32px in the root + one 180×180 apple-touch-icon. That covers the vast majority of cases; the full table above is the perfectionist's version.

favicon.ico vs PNG vs SVG

The three formats have different jobs — it's not a pick-one decision:

  • ICO: the compatibility king. Some older browsers, crawlers, and readers request only /favicon.ico, ignoring HTML. It's also the only favicon format that packs multiple sizes in one file.
  • PNG: the modern workhorse. Small, transparent, declared at any size via <link rel="icon">. iOS home-screen icons are PNG too.
  • SVG: draw once, scale forever. Supports dark-mode switching via CSS media queries. Downside: Safari (including iOS) doesn't support it.

Recommended combo: ICO (root fallback) + PNG (per-size declarations) + SVG (progressive enhancement, declared last). Browsers pick the best match from your declarations.

HTML Code (Copy & Paste)

Drop this into the <head> of every page (replace paths with your own when deploying):

<!-- Fallback: root favicon.ico (requested even undeclared) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- PNG sizes -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- iOS home-screen icon (avoid transparency; Safari fills it black) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- SVG version (after PNG, as enhancement) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PWA manifest (with 192/512 icons) -->
<link rel="manifest" href="/site.webmanifest">

The minimal site.webmanifest:

{
  "name": "My Website",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Platform Behavior Differences

  • Chrome / Edge / Firefox: prefer files declared with <link rel="icon">, matching sizes to device pixel density; fall back to /favicon.ico only when none exist.
  • Safari (macOS): limited SVG support; in practice PNG rules. A blurry pinned-tab icon usually means you're missing a 32×32 PNG.
  • iOS Safari: "Add to Home Screen" reads apple-touch-icon (180×180 ideal) and rounds the corners itself — so the source should be full-bleed and opaque.
  • Android Chrome: "Add to Home Screen" can install your site as a PWA, with icons taken from the manifest's 192/512 entries.
  • Search engines: Google mobile results sometimes display the favicon directly — a crisp icon can lift click-through rates.

How to Make a Favicon Online

We recommend the Favicon Generator on this site — free, no sign-up, and it produces the entire favicon pack in one shot (multi-size .ico + per-size PNGs). Everything runs locally in your browser; images are never uploaded.

  1. Prepare a square logo: ideally 512×512 or larger PNG (transparent or solid background — bigger source, sharper output).
  2. Upload: open the generator and click or drag your image in; PNG / JPG / WebP / SVG are all supported.
  3. Pick sizes: common sizes are pre-checked; adjust to match your site's configuration.
  4. Generate & deploy: download the pack, drop the files into your site root, and paste the HTML above into <head>.

Favicon Design Tips

  • Subtract: at 16×16 you have only a few hundred pixels. Use an initial, a single shape, or a simplified mark — never the full logo.
  • High contrast: the icon must read against both light and dark tab bars; preview on both backgrounds.
  • Use an outline: a light glyph with a dark outline "floats" on any background.
  • Dark mode: provide an SVG version with @media (prefers-color-scheme: dark) switching — a nice 2026 touch.
  • Avoid JPG: no alpha channel means white boxes at the edges; stick with PNG + ICO + SVG.

FAQ

Q: What is the standard favicon size?

A: There isn't one. Minimum: favicon.ico (16/32px) + apple-touch-icon (180px). Full set adds 16/32 PNGs, 192/512 PWA icons, and an SVG.

Q: Why does the browser still show my old favicon after I changed it?

A: Favicons are aggressively cached by browsers and CDNs. Add a version query string (?v=2), rename the file, or hard-refresh (Ctrl+F5). In production, rename the file on every update.

Q: Must favicon.ico live in the root?

A: Strongly recommended. Many browsers and legacy tools request /favicon.ico directly, ignoring your HTML. PNG/SVG files can live anywhere if properly declared.

Q: Why should apple-touch-icon avoid transparency?

A: iOS fills transparent regions with solid black, turning a transparent logo into black blobs on the home screen. Make it full-bleed and opaque; let the system round the corners.

Q: Are online favicon generators safe?

A: It depends on the implementation. This site's generator computes everything client-side (Canvas + Blob) — you can verify in the network panel that no image request ever leaves your machine.

Generate Your Full Favicon Pack — Free

Multi-size .ico + PNG in one click · Runs in your browser · Never uploaded

Open the Favicon Generator →