跳到主要内容
工具

favicon 生成器:用一张 logo 生成 ICO 和全部 PNG 尺寸

用一张方形 logo 本地生成 favicon.ico 以及 32、180、512 的 PNG。调留白、看 16px 预览、复制标签就完事。

发布于 7 分钟读完
favicon 生成器:用一张 logo 生成 ICO 和全部 PNG 尺寸
TL;DR
  • favicon 不是一张图,而是一套:老式的 favicon.ico、几个 PNG 尺寸,外加一张给主屏幕和 PWA 用的大图。
  • 用方形的、对比强的源图生成。在 512px 好看的细节,缩到 16px 会糊成一团。
  • .ico 仍然有用:不少爬虫、订阅器和老浏览器就是按这个名字来取的。
  • 留意留白。贴边的 logo 在标签页里看着像被裁掉,留几个百分点就正常了。

favicon 是站点里最小的资源,也是最显眼的:每个浏览器标签页、每条书签栏、越来越多的聊天预览里都有它。它同时也是最容易被做错的资源——丢一张 512px 的 PNG 进去改名成 favicon.ico 就算完事,结果是标签页图标发虚,而按约定来取图标的工具拿到 404。

真正需要的几档尺寸

资源出现在哪不做会怎样
favicon.ico(16/32/48)浏览器标签页、书签、老式爬虫。有些阅读器显示成通用地球图标,而不是你的标志。
png 32x32高分屏下的现代标签页渲染。16px 图标被拉大,看起来是虚的。
png 180x180iOS 主屏幕、部分社交预览。「添加到主屏幕」会截屏当图标。
png 512x512PWA manifest、安卓安装提示。安装提示退化成占位图。

怎么生成这一套

1

从方形源图开始

长条 logo 会被补边或压扁。先裁成正方形,让标志居中。

2

在本地生成

在浏览器里跑生成器:缩放发生在你自己电脑上,未公开的品牌标志不会被上传。

3

先调留白,再看 16px 预览

判断标准是最小那一档,不是最大那一档。16px 看不清,就简化标志或去掉文字。

4

放好文件并引用它们

把 .ico 放到站点根目录,PNG 显式引用;生成器给的 HTML 片段已覆盖标准写法。

浏览器本地处理,保护隐私

免费 Favicon 生成器

用 logo、图标或图片在本地生成 favicon.ico 和常用 PNG 尺寸。

免费 Favicon 生成器

工具在本地浏览器里运行,不上传文件。加载后即可使用。

要测的是标签页,不是文件

最后一个验收动作不是「下载成功」,而是**正常窗口宽度下的浏览器标签页**。离屏幕两米看一眼:认不出那是什么,就说明图标细节太多了。

常见问题

能直接用 PNG 当 favicon.ico 吗?

可以把 link 指向 PNG,但按约定仍会有请求来找名为 favicon.ico 的文件。两个都给成本为零,却能消掉一类 404。

为什么 favicon 换了不生效?

浏览器缓存图标非常狠。强刷一次,或者直接打开图标地址,确认服务端已经是新文件。

生成要消耗积分吗?

不用。生成器在你的浏览器本地运行。只有用 AI 3D 生成器 生成新模型时才消耗积分。

下一步

图标弄好之后,其他资源也可以照这个「本地优先」的思路处理:用 GLB 检查器 验模型、用 GLB 转 STL 转换,或者去 图片转 3D 生成器 生成一个。格式怎么选见 GLB、STL、OBJ 对比指南。

试用 Pixal3D AI 3D 生成器

先生成一个 GLB,再决定要不要读完这篇。

开始生成 3D 模型 →

更多 Pixal3D 内容

Related 3D guides and workspaces