网站图标生成器

欢迎使用 网站图标生成器，这是一个从任何图像创建专业 favicon 和应用图标的综合工具。无论您是需要一个简单的用于浏览器标签页的 .ico 文件，还是需要一套支持 PWA（渐进式 Web 应用）的完整图标，此工具都能一键生成您需要的所有尺寸。

什么是 Favicon？

Favicon（“favorite icon”的缩写）是与您的网站相关联的小图标。它出现在多个地方：

• 浏览器标签页： 页面标题旁的小图标
• 书签栏： 当用户收藏您的网站时
• 浏览器历史记录： 在历史记录下拉菜单中
• 地址栏： 在某些浏览器的 URL 旁边
• 主屏幕： 当用户将您的网站添加到移动设备主屏幕时
• 搜索结果： 某些搜索引擎会在结果中显示网站图标

设计良好的网站图标可以提高品牌知名度，使您的网站更加专业，并帮助用户在许多打开的标签页中快速识别您的网站。

图标尺寸说明

ICO 文件尺寸 (favicon.ico)

传统的 .ico 格式可以在单个文件中包含多种尺寸。我们的工具生成：

Apple Touch Icon (180x180)

当 iOS 用户将您的网站添加到主屏幕时，将使用此图标。Apple 建议使用 180x180 像素，以便在 Retina 设备上获得最佳显示效果。这与 .ico 文件是分开的，应保存为 apple-touch-icon.png。

Android Chrome 图标 (192x192 和 512x512)

现代 Android 设备和 Chrome 支持渐进式 Web 应用 (PWA)。192x192 图标用于主屏幕快捷方式，而 512x512 用于应用启动时的启动画面。这些在 site.webmanifest 文件中被引用。

如何使用此工具

1. 上传您的图像： 拖放或点击选择 PNG, JPG 或 WebP 图像。为了获得最佳效果，请使用至少 512x512 像素的正方形图像。透明背景的 PNG 是理想选择。
2. 选择尺寸： 选择要生成的图标尺寸。我们建议至少为 ICO 文件选择 16x16, 32x32, 48x48，并为 Apple 设备选择 180x180。
3. 设置背景颜色： 如果您的图像具有透明度且您想要纯色背景，请选择一种颜色。否则，请保持透明。
4. 生成： 点击按钮创建所有网站图标。预览每个尺寸以确保质量。
5. 下载： 下载单个文件或包含所有图标和代码片段的完整 ZIP 压缩包。

网站图标设计的最佳实践

• 保持简单： 网站图标非常小——带有精细细节的复杂标志在 16x16 像素下无法辨认。请使用标志的简化版本或独特的符号。
• 使用对比： 确保您的图标在浅色和深色背景下都能脱颖而出（浏览器主题各不相同）。
• 小尺寸测试： 务必预览 16x16 的网站图标，确保其可辨认。
• 考虑透明度： PNG 格式的网站图标可以有透明背景，这在现代浏览器中看起来更整洁。
• 正方形格式： 始终从完美的正方形源图像开始，以避免变形。

应用指南

基础 HTML 应用

生成网站图标后，将此代码添加到 HTML 的 <head> 部分：

<!-- 网站图标 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

PWA Manifest 文件

为了支持渐进式 Web 应用，请包含一个引用 Android 图标的 site.webmanifest 文件。

常见问题解答

什么是 favicon，为什么我需要它？

favicon（favorite icon）是出现在浏览器标签页、书签和地址栏中的小图标。它能帮助用户在多个打开的标签页中快速识别您的网站。专业的网站图标可以提高品牌知名度和用户体验。现代网站需要多种尺寸的网站图标以适应不同的设备和浏览器。

我可以使用哪些图像格式来创建 favicon？

您可以上传 PNG, JPG, JPEG, GIF 或 WebP 图像。为了获得最佳效果，请使用 512x512 像素或更大尺寸的透明背景 PNG 图像。该工具会自动将您的图像调整为所有选定的网站图标尺寸，同时保持质量。

我应该生成哪些尺寸的 favicon？

为了获得完整的浏览器覆盖，我们建议：16x16（浏览器标签页）、32x32（Windows 任务栏）、48x48（Windows 桌面）、180x180（iOS 的 Apple Touch Icon）、192x192 和 512x512（Android Chrome）。64x64、128x128 和 256x256 尺寸是可选的，但对高 DPI 显示器很有用。

我上传的图像会存储在你们的服务器上吗？

所有图像处理都在生成网站图标期间安全地在我们的服务器上进行，但我们不会永久存储您的图像。处理完成后，原始图像将被丢弃。只有生成的网站图标文件会发回给您进行下载。

如何将生成的网站图标添加到我的网站？

生成网站图标后：1) 下载包含所有图标文件的 ZIP 文件，2) 将文件上传到您网站的根目录，3) 将提供的 HTML 代码片段复制到网站的 <head> 部分。为了支持 PWA，还需包含 site.webmanifest 文件。

额外资源

• Web App Manifest - MDN