mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-03-26 06:59:44 +08:00
23409c7ba0
* 将 `index.html`、`manifest.json`、`browserconfig.xml` 和其他文件中的图标链接从 `favicon.svg` 更新为 `logo.svg`，确保一致性。 * 删除不再使用的 `favicon.svg` 文件，简化项目结构。 * 更新 `FAVICON_GUIDE.md` 文档，反映图标文件的更改和生成方法。
64 lines
1.9 KiB
Markdown
64 lines
1.9 KiB
Markdown
# Favicon 生成指南
|
||
|
||
本项目使用 `gamepad-solid.svg` 作为网站图标。
|
||
|
||
## 当前图标文件
|
||
|
||
- `logo.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](https://realfavicongenerator.net/)
|
||
2. 上传 `logo.svg`
|
||
3. 自定义设置（建议使用粉紫渐变背景）
|
||
4. 生成并下载所有尺寸的图标
|
||
5. 将文件放到 `public/` 目录
|
||
|
||
### 方法 2: 使用 ImageMagick (命令行)
|
||
|
||
```bash
|
||
# 安装 ImageMagick
|
||
brew install imagemagick # macOS
|
||
# 或
|
||
sudo apt-get install imagemagick # Linux
|
||
|
||
# 生成 PNG 图标
|
||
convert -background none logo.svg -resize 32x32 favicon-32x32.png
|
||
convert -background none logo.svg -resize 16x16 favicon-16x16.png
|
||
convert -background none logo.svg -resize 180x180 apple-touch-icon.png
|
||
```
|
||
|
||
### 方法 3: 使用 Inkscape
|
||
|
||
```bash
|
||
# 安装 Inkscape
|
||
brew install inkscape # macOS
|
||
|
||
# 生成 PNG 图标
|
||
inkscape logo.svg --export-filename=favicon-32x32.png --export-width=32 --export-height=32
|
||
inkscape logo.svg --export-filename=favicon-16x16.png --export-width=16 --export-height=16
|
||
inkscape logo.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 格式
|
||
|