Favicon Generator
Turn one image into a complete favicon package — favicon.ico, all PNG sizes, apple-touch-icon, Android icons, a manifest, and the HTML — in a single zip.
拖入图片以生成 Favicon
拖放、粘贴或选择文件
PNG · JPG · WebP · SVG — 图标在您的设备上生成
One image in, a full favicon set out
A modern favicon is not a single file — browsers, iOS, Android, and installable PWAs each want their own sizes and formats. This generator takes one square-ish image and produces the whole set: a favicon.ico with 16, 32, and 48 px, standalone PNG favicons up to 512 px, a 180 px apple-touch-icon, 192 and 512 px Android icons, a site.webmanifest, and a copy-paste HTML snippet.
Everything is rendered on your device with the canvas API, then bundled into a zip you download. Add a background color, padding, or rounded corners if your artwork needs a little breathing room inside the icon frame.
How to generate a favicon
- Add your image — drag & drop, paste, or choose a PNG, JPG, WebP, or SVG.
- Adjust the look — keep it transparent or pick a background, and tweak padding and corner rounding.
- Preview every size — check the live 16–512 px previews so nothing looks muddy when small.
- Download the zip — get favicon.ico, the PNGs, the manifest, and the HTML, then paste the snippet into your <head>.
Tip: design for the smallest size
At 16×16 a detailed logo turns to mush. Use a bold, simple mark with strong contrast, and add a little padding so the artwork is not clipped by rounded tab corners.
完整的网站图标集: sizes and where each is used
现代网站图标不是一个文件，而是一个小集合，因为浏览器、iOS、Android 和可安装的 PWA 各自查找不同的尺寸和格式。下面正是生成的内容以及每个部分的用途。
| Size | File | Where it's used |
|---|---|---|
| 16 × 16 px | favicon.ico + favicon-16x16.png | 标准（1×）屏幕密度下的浏览器标签页和地址栏图标；最小、也最常被看到的尺寸。 |
| 32 × 32 px | favicon.ico + favicon-32x32.png | 高 DPI（Retina）显示屏上的标签页和书签图标，以及 Windows 任务栏快捷方式。 |
| 48 × 48 px | favicon.ico + favicon-48x48.png | 打包进 favicon.ico，供选择更大尺寸的桌面快捷方式和 Windows 网站磁贴使用。 |
| 180 × 180 px | apple-touch-icon.png | 当网站被添加到 iPhone 或 iPad 主屏幕时，iOS Safari 显示的图标。 |
| 192 × 192 px | android-chrome-192x192.png | 已安装 PWA 的 Android 主屏幕／启动器图标，列在网页清单中。 |
| 512 × 512 px | android-chrome-512x512.png | PWA 启动画面和高分辨率应用图标，也用作清单的可遮罩图标。 |
Format & container
你会得到三种关键格式：用于旧系统和 Windows 的多尺寸 .ico、用于现代浏览器的清晰 PNG，以及用于 PWA 安装的清单图标——所以一次上传即可涵盖一切。
How it's wired into your page
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Tip
先按 16 × 16 来设计：精细的徽标在这么小的尺寸下会糊成一团，所以请使用对比强烈、略带留白的醒目简洁标识，然后让更大的尺寸从你的高分辨率源文件缩小而来。
所有 Favicon 与图标工具
常见问题
What sizes does the favicon.ico include?
The generated favicon.ico packs 16, 32, and 48 px — the sizes browsers pick from for tabs, bookmarks, and the address bar. Larger displays use the standalone PNG icons.
Where are my icons generated?
Everything happens in your browser, so the files are created on your own device. How any data associated with the tool is handled is described in our privacy policy.
Do I need the web manifest?
If you want your site to be installable on Android or as a PWA, yes — site.webmanifest points to the 192 and 512 px icons. Otherwise it's harmless to include and future-proofs your setup.
What image format should I upload?
An SVG or a large PNG gives the crispest small icons because there is more detail to downscale from. JPG and WebP also work; just use the highest resolution you have.
更多图片工具
Convert image format
PNG, JPG and WebP — convert any to any.
Image toolResize an image
Change dimensions to exact pixels or presets.
Image toolCrop an image
Crop to any ratio or an exact pixel size.
Image toolCompress an image
Shrink file size without visible quality loss.
Image toolConvert HEIC to JPG
Turn iPhone HEIC photos into universal JPG.