跳转到主内容

网站图标生成器

上传图片生成各种尺寸网站图标的工具。

💡 什么是Favicon？

显示在网站浏览器标签或书签中的小图标。

📋 生成尺寸

  • 16x16, 32x32 - 默认浏览器Favicon
  • 180x180 - Apple Touch Icon (iOS)
  • 192x192, 512x512 - Android/PWA

🎨 建议

  • 使用正方形图片 (1:1比例)
  • 简单设计 (考虑小尺寸显示)
  • 高对比度颜色 (提高可读性)
  • 建议PNG格式 (可透明背景)

📌 HTML使用方法

<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="/favicon-180x180.png">

生成的尺寸​

尺寸用途
16x16基本浏览器图标
32x32标准网站图标
48x48高清浏览器
64x64Windows 磁贴
128x128iOS 应用图标
180x180Apple Touch Icon
192x192Android/Chrome
512x512PWA 启动画面

HTML 使用方法​

<!-- 基本网站图标 -->
<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 -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

设计建议​

✅ 推荐​

  • 正方形图片
  • 简洁设计
  • 高对比度颜色
  • PNG 格式（可透明）

❌ 避免​

  • 复杂细节
  • 长文本
  • 低对比度颜色
  • 横向长图片

使用技巧​

💡 技巧 1：原始图片​

使用至少 512x512px 以上的高清图片。

💡 技巧 2：测试​

在多个浏览器中实际测试。

💡 技巧 3：品牌化​

使用公司 logo 或品牌图标。

文件结构​

将生成的网站图标放置在网站根目录：

/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png

常见问题​

Q：也会生成 ICO 文件吗？​

A：目前仅支持 PNG。可以将 PNG 转换为 ICO 使用。

Q：可以使用透明背景吗？​

A：可以，因为是 PNG 文件，支持透明背景。

Q：需要所有尺寸吗？​

A：基本上只需 16x16、32x32、180x180 就足够了。

隐私保护​

  • 所有处理在浏览器本地完成
  • 图片不会上传到服务器
  • 您的数据完全安全

相关工具​

💬 这个工具对您有帮助吗？​

欢迎随时向我们发送您的反馈或建议！