SearcjGal-frontend/docs/FAVICON_GUIDE.md

Favicon 生成指南

本项目使用 gamepad-solid.svg 作为网站图标。

当前图标文件

• favicon.svg - 主图标（SVG 格式，带粉紫渐变）
• gamepad-solid.svg - 原始 Font Awesome 图标
• favicon-32x32.png - 32x32 PNG 图标（需要生成）
• favicon-16x16.png - 16x16 PNG 图标（需要生成）
• apple-touch-icon.png - 180x180 Apple 触摸图标（需要生成）

如何生成 PNG 图标

方法 1: 使用在线工具

1. 访问 RealFaviconGenerator
2. 上传 favicon.svg
3. 自定义设置（建议使用粉紫渐变背景）
4. 生成并下载所有尺寸的图标
5. 将文件放到 public/ 目录

方法 2: 使用 ImageMagick (命令行)

# 安装 ImageMagick
brew install imagemagick  # macOS
# 或
sudo apt-get install imagemagick  # Linux

# 生成 PNG 图标
convert -background none favicon.svg -resize 32x32 favicon-32x32.png
convert -background none favicon.svg -resize 16x16 favicon-16x16.png
convert -background none favicon.svg -resize 180x180 apple-touch-icon.png

方法 3: 使用 Inkscape

# 安装 Inkscape
brew install inkscape  # macOS

# 生成 PNG 图标
inkscape favicon.svg --export-filename=favicon-32x32.png --export-width=32 --export-height=32
inkscape favicon.svg --export-filename=favicon-16x16.png --export-width=16 --export-height=16
inkscape favicon.svg --export-filename=apple-touch-icon.png --export-width=180 --export-height=180

图标说明

• SVG 格式: 现代浏览器优先使用，支持自适应缩放
• PNG 格式: 作为后备选项，兼容旧浏览器
• 渐变色: 粉色 (#ec4899) 到紫色 (#8b5cf6)
• 设计: Font Awesome 游戏手柄图标

浏览器支持

• ✅ Chrome/Edge: 优先使用 SVG
• ✅ Firefox: 优先使用 SVG
• ✅ Safari: 优先使用 SVG
• ✅ iOS Safari: 使用 apple-touch-icon.png
• ✅ 旧浏览器: 降级到 PNG 格式