Favicon生成器

新热门 🔥

从单张图片生成所有尺寸的favicon

图像工具

如何使用 Favicon生成器

  1. 1上传正方形图片（推荐 PNG）
  2. 2工具自动生成所有标准 favicon 尺寸
  3. 3下载单个尺寸或所有文件的 ZIP 包
  4. 4Copy the HTML snippet to add favicons to your website

关于 Favicon生成器

Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.

Favicon生成器的主要功能

  • 生成六种标准尺寸：16x16、32x32、48x48、96x96、180x180和512x512
  • 包含180x180的Apple Touch Icon用于iOS主屏幕书签
  • 每种尺寸的单独下载按钮
  • 每种生成尺寸的现成HTML link标签代码片段
  • PNG输出保留源图像透明度
  • 即时浏览器生成——无需上传
  • 最适合512x512或更大的正方形源图像
  • 一键复制完整的HTML代码片段块

支持的格式

输入格式

PNGJPGWEBPSVGGIFBMP

输出格式

PNG (all sizes)

A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.

示例

为新网站添加favicon

上传标志，点击生成Favicons，下载所有尺寸，将HTML代码片段粘贴到文档头部。

输入

512x512 square logo PNG

输出

Six PNG files (16 to 512px) plus HTML snippet

为PWA生成Apple Touch Icon

只下载180x180尺寸，用于渐进式Web应用清单中的Apple Touch Icon链接标签。

输入

New brand logo PNG

输出

Fresh set of all standard favicon sizes

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

输入

App icon PNG

输出

180x180 Apple Touch Icon PNG

常见使用场景

  • 为新网站项目添加完整的favicon集合
  • 用更新的品牌标志替换过时的favicon
  • 生成iOS主屏幕书签的Apple Touch Icon
  • 为渐进式Web应用清单创建所有必需的图标尺寸
  • 提供多种favicon尺寸以获得更好的浏览器和操作系统兼容性
  • 确保所有浏览器上的favicon与品牌保持一致

故障排除

Favicon在小尺寸（16x16、32x32）显示模糊

解决方案

从至少512x512像素的源图像开始。缩放算法需要足够的细节才能生成清晰的小图标。

Favicon未显示在浏览器标签页中

解决方案

清除浏览器缓存并强制重新加载页面。浏览器会主动缓存favicon——即使更新HTML后，旧图标可能还会持续几分钟。

非正方形源图像在输出中出现变形

解决方案

首先使用Crop Image工具将源图像裁剪为正方形，然后从正方形版本生成favicon。

常见问题

应该上传多大的图片？

最佳效果需至少 512×512 像素。

会生成哪些格式？

所有尺寸的 PNG 文件以及多尺寸 ICO 文件。

我可以生成.ico文件吗？

目前工具为所有尺寸生成PNG文件。大多数现代浏览器接受PNG格式的favicon。若需.ico格式，使用图像转换器工具将16x16或32x32的PNG转换。

如何在React或Next.js应用中使用生成的favicon？

将PNG文件放入public文件夹，并将HTML link标签添加到文档head或应用布局中。Next.js有内置的metadata API可以直接接受favicon路径。

How do I add the favicons to my website?

Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.

Why is my favicon not showing after adding the HTML snippet?

Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.