94 lines
2.2 KiB
Markdown
94 lines
2.2 KiB
Markdown
|
# Icon Generation Guide
|
||
|
|
|
||
|
|
## Current Icons
|
||
|
|
|
||
|
|
- ✅ `public/favicon.svg` - Primary icon (SVG format)
|
||
|
|
|
||
|
|
## Missing Icons (Optional but Recommended)
|
||
|
|
|
||
|
|
For optimal PWA support, especially on iOS/Safari, you should generate PNG versions:
|
||
|
|
|
||
|
|
- `public/icon-192.png` - 192x192px PNG
|
||
|
|
- `public/icon-512.png` - 512x512px PNG
|
||
|
|
|
||
|
|
## How to Generate PNG Icons
|
||
|
|
|
||
|
|
### Option 1: Online Converter (Easiest)
|
||
|
|
|
||
|
|
1. Go to https://realfavicongenerator.net/ or https://favicon.io/
|
||
|
|
2. Upload `public/favicon.svg`
|
||
|
|
3. Generate and download PNG versions
|
||
|
|
4. Save as `icon-192.png` and `icon-512.png` in `frontend/public/`
|
||
|
|
|
||
|
|
### Option 2: Using ImageMagick (Command Line)
|
||
|
|
|
||
|
|
If you have ImageMagick installed:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd frontend/public
|
||
|
|
|
||
|
|
# Generate 192x192
|
||
|
|
convert favicon.svg -resize 192x192 icon-192.png
|
||
|
|
|
||
|
|
# Generate 512x512
|
||
|
|
convert favicon.svg -resize 512x512 icon-512.png
|
||
|
|
```
|
||
|
|
|
||
|
|
### Option 3: Using Node.js Script
|
||
|
|
|
||
|
|
Install sharp library temporarily:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install --save-dev sharp
|
||
|
|
```
|
||
|
|
|
||
|
|
Create and run this script:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// generate-icons.js
|
||
|
|
const sharp = require('sharp');
|
||
|
|
const fs = require('fs');
|
||
|
|
|
||
|
|
const sizes = [192, 512];
|
||
|
|
const svgBuffer = fs.readFileSync('./public/favicon.svg');
|
||
|
|
|
||
|
|
sizes.forEach(size => {
|
||
|
|
sharp(svgBuffer)
|
||
|
|
.resize(size, size)
|
||
|
|
.png()
|
||
|
|
.toFile(`./public/icon-${size}.png`)
|
||
|
|
.then(() => console.log(`✅ Generated icon-${size}.png`))
|
||
|
|
.catch(err => console.error(`❌ Failed to generate icon-${size}.png:`, err));
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Run it:
|
||
|
|
```bash
|
||
|
|
node generate-icons.js
|
||
|
|
```
|
||
|
|
|
||
|
|
Then uninstall sharp:
|
||
|
|
```bash
|
||
|
|
npm uninstall sharp
|
||
|
|
```
|
||
|
|
|
||
|
|
## What Happens Without PNG Icons?
|
||
|
|
|
||
|
|
The app will still work as a PWA! Modern browsers (Chrome, Edge, Firefox) support SVG icons just fine. However:
|
||
|
|
|
||
|
|
- **iOS Safari** may not display the icon correctly on the home screen
|
||
|
|
- Some older Android devices might show a generic icon
|
||
|
|
- The manifest references PNG files as fallbacks
|
||
|
|
|
||
|
|
The SVG will be used as a fallback, which works on most platforms.
|
||
|
|
|
||
|
|
## Why We Don't Auto-Generate
|
||
|
|
|
||
|
|
PNG generation requires either:
|
||
|
|
- Native image processing libraries (platform-dependent)
|
||
|
|
- External dependencies that bloat the build
|
||
|
|
- Build-time processing that slows down development
|
||
|
|
|
||
|
|
Since the app works fine with SVG on most platforms, we leave PNG generation as an optional step.
|
||
|
|
|