49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
|
# 图标资源
|
|||
|
|
|
|||
|
|
本目录存放项目的各种图标文件。
|
|||
|
|
|
|||
|
|
## 📁 需要的图标
|
|||
|
|
|
|||
|
|
### 浏览器图标
|
|||
|
|
- `favicon.ico` - 16x16, 32x32（浏览器标签页）
|
|||
|
|
|
|||
|
|
### iOS 设备
|
|||
|
|
- `apple-touch-icon.png` - 180x180（iPhone/iPad 主屏幕）
|
|||
|
|
|
|||
|
|
### Android 设备
|
|||
|
|
- `android-chrome-192.png` - 192x192
|
|||
|
|
- `android-chrome-512.png` - 512x512
|
|||
|
|
|
|||
|
|
### PWA
|
|||
|
|
- `maskable-icon.png` - 512x512（可适配图标）
|
|||
|
|
|
|||
|
|
## 🎨 生成工具
|
|||
|
|
|
|||
|
|
推荐使用在线工具生成全套图标：
|
|||
|
|
- [RealFaviconGenerator](https://realfavicongenerator.net/)
|
|||
|
|
- [Favicon Generator](https://www.favicon-generator.org/)
|
|||
|
|
|
|||
|
|
## 📝 使用示例
|
|||
|
|
|
|||
|
|
在 `frontend/index.html` 中添加：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<head>
|
|||
|
|
<!-- 标准 favicon -->
|
|||
|
|
<link rel="icon" href="/static/icons/favicon.ico" />
|
|||
|
|
|
|||
|
|
<!-- iOS 设备 -->
|
|||
|
|
<link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png" />
|
|||
|
|
|
|||
|
|
<!-- Android Chrome -->
|
|||
|
|
<link rel="icon" type="image/png" sizes="192x192"
|
|||
|
|
href="/static/icons/android-chrome-192.png" />
|
|||
|
|
<link rel="icon" type="image/png" sizes="512x512"
|
|||
|
|
href="/static/icons/android-chrome-512.png" />
|
|||
|
|
</head>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**最后更新**: 2026-03-16
|