← 所有文章

如何用图片制作 Favicon 图标（ICO + 全尺寸 PNG）

2026-07-27

简单来说： 想用一张图片制作 favicon，打开 ToolKoala 的 Favicon 生成器，拖入一张正方形图片，然后下载。你会得到一个 favicon.ico（包含 16、32、48px）加上独立的 PNG 文件，尺寸覆盖 16、32、48、180、192 和 512px，外加一段可以直接粘贴使用的 HTML <link> 标签代码。它免费，而且全程在浏览器里完成——图片从不上传。我做这个工具是因为有一周被那些为了下载一个 16 像素图标还要求先登录的 favicon 网站彻底惹烦了。

为什么需要不止一种 favicon 尺寸

以前一个 favicon 就是一个 16×16 的 .ico 文件，搞定收工。现在不一样了。不同的地方会以不同尺寸展示你的图标：

  • 16 / 32 / 48px —— 经典的浏览器标签页和书签图标。这些都装在 favicon.ico 里面。
  • 180px —— Apple Touch Icon，用户把你的网站添加到 iPhone 主屏幕时会用到。
  • 192 / 512px —— Android 和 PWA 图标，用于主屏幕安装和应用切换界面。

如果你只准备了一个 16px 的图标，标签页里看着清晰，但一旦有人把它保存到手机上就会立刻糊掉。这个工具用一张原图生成整套尺寸，你完全不用操心这些细节。

如何制作你的 favicon

  1. 打开 ToolKoala 的 Favicon 生成器，拖入你的图片。
  2. 它会立即渲染出每种尺寸的预览——从 16 到 512——让你看清图标缩到很小时是什么效果。
  3. 下载你需要的：
    • favicon.ico —— 多分辨率图标（16 + 32 + 48），用于浏览器标签页。
    • 全部 PNG —— 一键抓取每种尺寸各自的 PNG 文件。
    • 或者点击任意单个预览，只下载那一种尺寸。
  4. 复制它提供的 HTML 代码片段，粘贴到你页面的 <head> 里。

这段代码片段已经填好了正确的 rel、type 和 sizes 属性：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

把文件放到你网站的根目录（或者 href 指向的位置），粘贴好标签，就完成了。

让图标在 16 像素下也能看清的小技巧

  • 原图要方正、简洁。 在 16×16 的尺寸下，只能容纳一个醒目的形状或一个字母——放不下带标语的完整 logo。如果你的 logo 细节很多，单独做一个精简版的"图标标记"专门用在这里。
  • 喂给它一张大图。 上传至少 512px 的原图，这样大尺寸的 PWA 图标才能保持清晰；工具只能做缩小，没法凭空造出细节。
  • 高对比度更有优势。 图标会出现在你控制不了的浏览器界面和手机壁纸背景上。强对比度能让它在任何地方都清晰可见。
  • 检查那些小尺寸预览。 工具会按像素精确展示 16 和 32px 版本的效果——如果那个尺寸下看起来一团糊，先简化一下图案再发布。

老实说的局限

这个工具会把你的图片绘制进正方形画布，所以非正方形的原图会被拉伸变形——先用裁剪工具裁成正方形，效果会干净很多。它也不会替你加圆角或内边距；上传什么就按比例缩放成什么。而且它生成的是标准现代尺寸集——如果你需要覆盖每一种老版 Microsoft 磁贴或 Safari 固定标签页 SVG 这类边角场景，得找更重量级的生成器。但对 99% 的网站来说，这里的 ICO + PNG 组合正是浏览器实际会用到的那一套。

常见问题

怎么用一张图片制作 favicon？ 打开像 ToolKoala 这样的浏览器 favicon 生成器，拖入一张正方形图片，下载 favicon.ico 和各尺寸的 PNG。然后把提供的 HTML 标签粘贴到页面的 <head> 里。

能得到哪些尺寸和格式？ 一个包含 16、32、48px 的 favicon.ico，外加 16、32、48、180（Apple Touch）、192、512px（Android/PWA）的独立 PNG。

还需要 .ico 文件吗，还是只用 PNG 就够了？ 两者都需要。favicon.ico 兼容性最广，适合浏览器标签页；更大尺寸的 PNG 则覆盖 Apple Touch 和 Android/PWA 主屏幕图标。这个工具两种都给你，确保全场景覆盖。

我的图片会被上传吗？ 不会。favicon 是用浏览器里的 canvas 生成的——你的图片从不离开你的设备。

我的原图不是正方形，效果会正常吗？ 非正方形的图片会被拉伸成正方形。先裁成 1:1 比例，图标效果会更干净。

— Milo 🐨