通过实时标签页预览生成 favicon.ico 和网站 favicon PNG

如果你的目标是为网站、SaaS 或产品落地页准备完整 favicon 套件,这个页面更适合。你可以先验证 Logo 在极小尺寸下的识别度,再导出全部文件。

上传一个 Logo,直接生成全平台图标

实时预览 favicon、桌面图标和移动端图标效果

Original logo
原始 Logo
浏览器
桌面
手机
生成后的图标

开始生成

当你的核心需求是 favicon.ico、浏览器标签页识别度,以及小尺寸图标清晰度时,这个页面会更适合。

实时预览

浏览器标签页模拟区域能直接反映图标在真实使用场景中的识别度。

浏览器标签页预览

IconBase
IconBase (Dark)
iconbase.7-image.com

macOS Dock 预览

App

Windows 任务栏预览

App
10:00

移动端主屏幕预览

9:41
IconBase
App
App
App
10:00
Search...
App
App
App
IconBase

参数与导出

通过背景、留白和尺寸感知来优化小图标可读性,确保 favicon 在 16x16 和 32x32 依然清晰。

更换图片

默认已载入示例图。上传你的 Logo 后可直接预览真实导出效果。

图片调整

导出前微调上传图片的形态和位置。

标准圆角
20%
22.5%
0%
中心点 = 0

以图片中心为 x0 y0,通过 X / Y 偏移微调位置。

0%
0%
极光 Mesh

纯色

渐变

网格与 Mesh

玻璃质感

纹理与图案

光晕与点缀

导出包包含:

favicon-16x16.png16x16
favicon-32x32.png32x32
favicon.ico32x32
apple-touch-icon.png180x180
android-chrome-*.png192/512
icon-maskable-*.png512x512
icon-sharp-512x512.png512 / 直角
desktop-*.png256/1024
site.webmanifestJSON

导出前先看浏览器标签页效果

在浅色和深色标签页环境中预览 favicon,判断图标是否仍然足够清晰和易识别。

生成 favicon.ico 与标准 PNG 尺寸

同时导出 favicon.ico、16x16 和 32x32 PNG,兼顾现代浏览器与兼容场景。

统一网站图标体系

让浏览器标签页、书签、Apple touch icon 和 Android 安装图标使用同一套视觉逻辑,而不是手动拼装文件。

如何制作 favicon 套件

1. 上传网站标识

使用最适合小尺寸展示的图形符号或紧凑版 Logo 作为起点。

2. 针对小尺寸优化

调节背景和留白,让 favicon 在 16x16 与 32x32 下仍然保持可读性。

3. 下载 favicon 包

导出 zip,直接使用其中的 favicon.ico、PNG 与 manifest 文件接入网站。

Favicon 常见问题

导出包里包含 favicon.ico 吗?

包含。除了 PNG favicon 文件外,zip 里也会生成 favicon.ico。

为什么要做浏览器标签页预览?

因为 favicon 通常以极小尺寸出现,标签页预览能更真实地暴露识别度和对比度问题。

这套导出也适合 PWA 吗?

适合。导出包还包含 Apple touch、Android Chrome 和 manifest 文件,可覆盖更广泛的 Web App 安装场景。