Squishly Tools
无需上传文件 · 完全免费

PNG 转 ICO（favicon 图标）

Favicon 是浏览器在标签页、书签栏和历史记录中显示的小图标。这个工具能把 PNG 转换成标准的多尺寸 .ico 文件，内含 16、32、48 和 64 像素四个版本，全部在你的设备上生成，不会上传任何内容。

如何把 PNG 转换成 ICO

  1. 把你的 PNG 图片拖放到下方的工具中。正方形图片效果最好。
  2. 输出格式已经设为 ICO（favicon 图标）。
  3. 点击“开始”生成多尺寸 .ico 文件。
  4. 下载 favicon.ico，并把它放到网站根目录。

Favicon 需要做到什么

Favicon 的显示尺寸非常小，常常只有 16 像素见方。在这个尺寸下，细节会消失，细线会完全看不见。好的 Favicon 是粗壮、简洁、对比强烈的图形：一个字母、简化版的 Logo 标志，或者品牌色的实心图形。如果你的完整 Logo 包含文字标识，只用图形部分，或者只用首字母。

.ico 文件之所以包含多个尺寸，是因为在显示时把单张图片放大或缩小会显得模糊。提供 16、32、48 和 64 像素的版本后，操作系统或浏览器就能在每种场景下显示像素精确的图像：标签页里用 16 px，高 DPI 屏幕的书签列表用 32 px，Windows 任务栏快捷方式用 48 px，以此类推。

准备原始 PNG

  • 做成正方形。如果你的 Logo 是横长的，先把它放到一个正方形的透明画布上，或者用裁剪工具只保留图形部分。
  • 从 256 像素或更大的尺寸开始。从清晰的大图缩小，效果比把小图放大更平滑。
  • 如果图形是实心的，保留透明背景，这样在浏览器的浅色和深色主题下都好看。如果图形很细或颜色很浅，就把它放在一个纯色正方形上。
  • 避免使用超过一两个字符的文字，在 16 像素下根本看不清。

安装 Favicon

把下载的文件保存为 favicon.ico，放在网站的根目录。然后在每个页面的 <head> 中加入：

<link rel="icon" href="/favicon.ico" sizes="any">

大多数平台都有专门的设置项：WordPress 在 Appearance 下叫 Site Icon，Shopify 和 Squarespace 在主题设置中有 Favicon 字段，Webflow 则在 Project Settings 里。把 .ico 上传到那里即可。完整教程请阅读如何制作 Favicon。

更进一步

要配齐现代设备需要的全套图标，你还需要一张 180 像素的 PNG，用于 iOS 主屏幕快捷方式（apple-touch-icon），以及 192 和 512 像素的 PNG，用于 Android 和 Web 应用清单。这些都是普通的 PNG 文件，可以用调整尺寸工具从同一份原图生成。本页生成的 .ico 覆盖了浏览器标签页、书签和 Windows，而这些正是大多数人最容易注意到缺少 Favicon 的地方。

常见问题

原始 PNG 应该多大？

最好是正方形，且至少 64 × 64 像素。256 像素的正方形 PNG 缩小后效果最干净。非正方形图片会居中放置，并用透明区域补齐。

.ico 文件里包含什么？

四张以 PNG 编码的图片，尺寸分别为 16、32、48 和 64 像素。浏览器和 Windows 会根据场景自动选择最合适的尺寸，所以图标在标签页、书签和桌面快捷方式里都很清晰。

怎样把 favicon 加到我的网站上？

把 favicon.ico 上传到网站根目录（确保可以通过 yoursite.com/favicon.ico 访问），并在页面的 <head> 中加入 <link rel="icon" href="/favicon.ico">。浏览器会强力缓存 favicon，所以可能需要强制刷新才能看到变化。

2026 年还需要 .ico 文件吗？

现代浏览器已经支持 PNG 和 SVG 格式的 favicon，但 .ico 是唯一一个在任何地方都能用的格式，包括旧版浏览器、Windows 快捷方式和部分 RSS 阅读器。大多数网站会两种都提供。

你的文件绝不会 离开你的设备

Squishly Tools 的每个工具都完全免费，并且完全在浏览器中运行。你的图片和文档在自己的电脑上处理，绝不会上传到服务器。无需账号，没有水印，也没有任何套路。