免费在线 Real Favicon 生成器

免费在线网站图标生成器。上传一张图片并下载完整图标套件——favicon.ico、PNG图标、Apple触摸图标以及Web清单——即可用于浏览器标签页、书签以及Android和iOS主屏幕。

512 x 512 像素或更大的正方形图片效果最佳。

0%
边缘到边缘留出呼吸空间
0%
方形圆形
应用与安装设置

根相对路径,例如 / 或 /icons/。

#FFFFFF

选择一张图片或尝试文字图标以开始。

512 像素
浏览器标签页
我的网站
your-website.com
主屏幕
我的网站
像素完美?

比较小尺寸。

16px
32px
48px
64px

下载你的图标套件

7个图标文件、一份Web清单和安装说明。

下载内容

9个文件
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

HTML代码

HTML

上传你的文件,然后将此代码粘贴到网站的<head>中。路径会随你的设置更新。

index.html
从上传到随处可用

工作原理

省去手动调整大小和猜测格式的麻烦。
三步实现从想法到可识别的网站。

01 /

呈现你的身份。

上传你的徽标,或用字母创建图标。简洁的形状、醒目的对比和方形画布是最好的起点。

02 /

微调细节。

选择背景、调整间距并查看实时预览。确保即使在很小的浏览器标签页中,你的印记也清晰可辨。

03 /

让每个标签页都有归属。

下载完整套件、上传文件并粘贴HTML。你的品牌已可用于浏览器标签页、书签和主屏幕。

为细节而生

跨浏览器和设备正常工作

网站图标往往是你品牌中最小的部分,但仍应用心设计。为人们寻找、收藏和回访你网站的地方生成合适的尺寸。

创建你的网站图标
日常使用的浏览器用于标签页、书签和快捷方式的ICO + PNG16-48像素
Apple设备专用的不透明主屏幕图标180像素
Android与Web应用带Web清单的高分辨率图标192 / 512
两分钟指南

安装

无需复杂设置。
只需把几个文件放到正确位置。

跳转到你的HTML
1

下载并解压你的图标套件

选择源文件并调整预览,然后点击“下载图标套件”。解压ZIP以获取全部七个图标文件、site.webmanifest和纯文本安装指南。

2

将文件放到你的网站可服务的位置

将图标和清单上传到网站的公共根目录。如果想放在子目录,请在下载前在应用设置中设置“图标目录”。例如,/icons/ 表示你的文件应在 your-site.com/icons/ 可见。

3

添加HTML并检查结果

把生成的代码复制到每个页面或共享布局的<head>中。移除冲突的旧图标标签。直接打开图标URL确认可加载,然后在隐私窗口中重新访问你的网站,避免陈旧的缓存图标。

更好的图标从这里开始

网站图标设计技巧

细节更少,个性更多。

细线和长词在小尺寸下会消失。用独特的符号、字头或单个字母,而不是把整个徽标挤进一个正方形。

留一点空间。

使用内边距让印记远离边缘。同时预览浏览器标签页和主屏幕:同一张图片在不同缩放级别下感觉可能大不相同。

让对比度发挥作用。

透明图标在浅色或深色浏览器主题下可能难以辨认。纯色背景带来可预期的对比度。上线前请检查两种主题。

从清晰的源图开始。

大而干净的图片能给生成器更多细节可用。放大微小图片无法恢复缺失的信息。尽可能使用SVG或512像素源图。

更多细节

常见问题

关于你的新网站图标,你可能还想知道的其他信息。

什么是网站图标?为什么我需要它?

网站图标是在浏览器标签页、书签、历史记录以及有时搜索结果中代表你网站的小图标。清晰一致的图标能帮助访客在众多打开的标签页中认出你的网站。当有人在手机上保存你的网站时,主屏幕图标也有类似作用。

我应该上传哪张图片?

从正方形PNG、SVG、JPEG或WebP开始,最好至少512 x 512像素。透明PNG和自包含SVG效果尤其好。保持设计简洁:在16像素下,符号或首字母通常比完整的文字标志更清晰。支持最大10 MB的文件和每边最多4096像素的图片。

这个工具免费吗?我的图片会被上传吗?

该生成器免费使用,无需账户或水印。图片解码、预览和ZIP创建都在你的浏览器中完成。你的源图片不会上传到服务器。首次访问时浏览器可能下载站点资源,但生成器不会将你的图片发送到任何地方。

为什么Apple和Android图标有背景?

主屏幕图标在纯色方形画布上效果最佳。此工具会将这些导出贴合到你选择的背景色上,即使启用了透明的浏览器图标也是如此。设备会应用自己的圆角处理。Android导出使用标准的“any”用途;它们不是经过认证的maskable(可遮罩)图标。

为什么我的旧网站图标仍然显示?

浏览器会积极缓存网站图标。首先检查每个生成的URL是否可直接打开,以及页面是否只有一组预期的图标链接。然后尝试隐私窗口或清除站点缓存。要可靠更新,请使用如 /icons-v2/ 的新文件夹并更新HTML链接。搜索引擎重新抓取图标可能需要更长时间。

Web清单会让我的网站变成PWA吗?

不会。清单提供应用名称、颜色和图标,但不会增加离线功能或Service Worker。可安装性取决于你的浏览器和站点配置,包括HTTPS。生成的清单使用 / 作为起始URL;如果你的应用位于子目录,请编辑它。

我能在WordPress、Shopify或Astro中使用这些文件吗?

可以。这些文件是标准PNG和ICO图片。在Astro中,将它们放入 public/ 并在共享布局<head>中添加生成的标签。对于WordPress或Shopify,尽量使用平台的应用图标设置,或上传文件并调整主题<head>。托管平台可能控制文件名和URL,因此请相应调整路径。