🦊Foxi Tools

网站图标生成器

生成多种尺寸的网站图标

拖放或点击上传图片

推荐512x512以上的正方形图片

网站图标生成器可以从一张图片自动生成16x16到512x512等所有网站所需尺寸的favicon。一次性生成ICO格式、PNG图标、Apple Touch Icon和Android Chrome图标,并提供可直接使用的HTML link标签代码。是网站品牌建设中不可或缺的工具,确保您的网站在浏览器标签页、书签、手机主屏幕上都能展示品牌标识。

📖 使用方法

  1. 上传512x512以上的正方形图片
  2. 点击生成网站图标按钮
  3. 生成多种尺寸的网站图标
  4. 将HTML代码添加到网站

主要功能

  • 自动生成多种尺寸
  • 支持ICO、PNG格式
  • 生成Apple Touch Icon
  • 提供HTML代码
  • 批量下载

💡 使用场景

  • 前端开发者: 新项目启动时用一张Logo图片一键生成所有设备所需的favicon。
  • 博主: 创建个性化的网站图标,在浏览器标签页中建立品牌辨识度。
  • 创业者: 网站建设初期快速制作专业的favicon套件,提升品牌形象。
  • 设计师: 高效制作客户网站所需的多尺寸favicon图标包。
  • PWA开发者: 生成Progressive Web App所需的192x192和512x512图标用于manifest.json配置。

🎯 使用技巧

  • 使用512x512像素以上的正方形PNG图片作为源文件,确保各尺寸的清晰度。
  • 复杂Logo建议使用简化版本,因为在16x16尺寸下仍需可辨识。
  • 将生成的HTML代码粘贴到head标签内即可完成favicon配置,无需其他设置。
  • 考虑为favicon添加浅色背景或边框,确保在深色模式浏览器主题下也能看清。
  • 如果开发PWA应用,记得在manifest.json中也注册192x192和512x512图标。

常见问题

Q. 会生成哪些尺寸?

A. 生成16x16、32x32、180x180(Apple)、192x192(Android)、512x512等。

Q. 非正方形图片怎么办?

A. 会被裁剪为正方形或添加内边距。建议使用正方形图片。

Q. ICO和PNG favicon有什么区别?

A. ICO是传统格式,可以在一个文件中包含多个尺寸。PNG则以独立文件提供各个尺寸。现代浏览器都支持两种格式,但包含ICO文件可确保与旧版浏览器的最大兼容性。

Q. 新favicon为什么没有在浏览器中显示?

A. 浏览器会缓存favicon。请尝试用Ctrl+F5(Mac用Cmd+Shift+R)强制刷新,或清除浏览器缓存后重新查看。

Q. 可以用SVG做favicon吗?

A. 部分现代浏览器支持SVG favicon,但兼容性尚未普及。建议以PNG/ICO作为主要格式,SVG作为渐进增强方案。

Q. Apple Touch Icon是必需的吗?

A. 当iOS用户将网站添加到主屏幕时会显示此图标,需要180x180像素。如果网站有大量移动端流量,强烈建议包含此图标。

🔗 相关工具