diff --git a/docs/logo-generation-instructions.md b/docs/logo-generation-instructions.md new file mode 100644 index 0000000..d42745b --- /dev/null +++ b/docs/logo-generation-instructions.md @@ -0,0 +1,253 @@ +# Logo & Favicon Generation Instructions + +This document provides instructions for manually generating the PNG and ICO files from the updated SVG sources. + +--- + +## Overview + +The following SVG files have been updated with the new LIBRA for Rights botanical brand design: + +| Source File | Purpose | +|-------------|---------| +| `public/images/logo.svg` | Primary logo (Deep Black on light backgrounds) | +| `public/images/logo-reversed.svg` | Reversed logo (Off-White on dark backgrounds) | +| `public/images/logo-mono.svg` | Monochrome logo (Charcoal, single color) | +| `public/favicon.svg` | Favicon source | + +--- + +## 1. Logo PNG Generation + +### File to Generate +- **Output:** `public/images/logo.png` +- **Source:** `public/images/logo.svg` + +### Specifications +| Property | Value | +|----------|-------| +| Width | 480px | +| Height | 120px | +| Format | PNG-24 with transparency | +| Background | Transparent | +| Color Profile | sRGB | + +### Generation Methods + +#### Option A: Using Figma (Recommended) +1. Open Figma (figma.com) +2. Create new file +3. Import `public/images/logo.svg` +4. Select the imported SVG +5. Export settings: + - Format: PNG + - Scale: 2x (for retina) + - Include "id" attribute: No +6. Export and rename to `logo.png` +7. Place in `public/images/` + +#### Option B: Using Adobe Illustrator +1. Open `public/images/logo.svg` +2. File > Export > Export As +3. Settings: + - Format: PNG + - Resolution: 72 PPI (or 144 for 2x) + - Anti-aliasing: Art Optimized + - Background: Transparent +4. Save as `logo.png` in `public/images/` + +#### Option C: Using Inkscape (Free) +1. Open Inkscape +2. File > Open > `public/images/logo.svg` +3. File > Export PNG Image +4. Settings: + - Export area: Drawing + - Width: 480px + - Height: 120px +5. Export to `public/images/logo.png` + +#### Option D: Using Command Line (if tools installed) +```bash +# Using Inkscape CLI +inkscape public/images/logo.svg --export-type=png --export-filename=public/images/logo.png --export-width=480 + +# Using ImageMagick +convert -background none -density 150 public/images/logo.svg -resize 480x120 public/images/logo.png + +# Using rsvg-convert (librsvg) +rsvg-convert -w 480 -h 120 public/images/logo.svg > public/images/logo.png +``` + +#### Option E: Using Online Tools +1. Go to https://svgtopng.com or https://cloudconvert.com +2. Upload `public/images/logo.svg` +3. Set width to 480px +4. Download and save to `public/images/logo.png` + +--- + +## 2. Favicon Generation + +### Files to Generate + +| File | Size | Format | Location | +|------|------|--------|----------| +| `favicon.ico` | 16x16, 32x32, 48x48 (multi-size) | ICO | `public/` | +| `favicon-16x16.png` | 16x16 | PNG | `public/` (optional) | +| `favicon-32x32.png` | 32x32 | PNG | `public/` (optional) | +| `apple-touch-icon.png` | 180x180 | PNG | `public/` (optional) | +| `android-chrome-192x192.png` | 192x192 | PNG | `public/` (optional) | +| `android-chrome-512x512.png` | 512x512 | PNG | `public/` (optional) | + +### Source File +- `public/favicon.svg` + +### Generation Methods + +#### Option A: Using RealFaviconGenerator (Recommended) +1. Go to https://realfavicongenerator.net +2. Upload `public/favicon.svg` +3. Configure settings for each platform (iOS, Android, etc.) +4. Generate favicons +5. Download the package +6. Extract and copy files to `public/`: + - `favicon.ico` + - `favicon-16x16.png` + - `favicon-32x32.png` + - `apple-touch-icon.png` + - `android-chrome-192x192.png` + - `android-chrome-512x512.png` + +#### Option B: Using Favicon.io +1. Go to https://favicon.io/favicon-converter/ +2. Upload `public/favicon.svg` +3. Download the generated package +4. Copy `favicon.ico` to `public/` + +#### Option C: Using GIMP (Free) +1. Open GIMP +2. File > Open > `public/favicon.svg` +3. When prompted, set width/height to 48x48 for import +4. Image > Scale Image > 32x32 +5. File > Export As > `favicon-32.png` +6. Image > Scale Image > 16x16 +7. File > Export As > `favicon-16.png` +8. Use an online ICO converter to combine into `favicon.ico` + +#### Option D: Using ImageMagick CLI +```bash +# Generate individual sizes +convert -background none public/favicon.svg -resize 16x16 public/favicon-16x16.png +convert -background none public/favicon.svg -resize 32x32 public/favicon-32x32.png +convert -background none public/favicon.svg -resize 48x48 public/favicon-48x48.png +convert -background none public/favicon.svg -resize 180x180 public/apple-touch-icon.png +convert -background none public/favicon.svg -resize 192x192 public/android-chrome-192x192.png +convert -background none public/favicon.svg -resize 512x512 public/android-chrome-512x512.png + +# Create multi-size ICO file +convert public/favicon-16x16.png public/favicon-32x32.png public/favicon-48x48.png public/favicon.ico +``` + +#### Option E: Using Inkscape CLI +```bash +# Generate PNG at different sizes +inkscape public/favicon.svg --export-type=png --export-filename=public/favicon-16x16.png --export-width=16 +inkscape public/favicon.svg --export-type=png --export-filename=public/favicon-32x32.png --export-width=32 +inkscape public/favicon.svg --export-type=png --export-filename=public/favicon-48x48.png --export-width=48 +inkscape public/favicon.svg --export-type=png --export-filename=public/apple-touch-icon.png --export-width=180 + +# Then use ImageMagick or online tool to create ICO from PNGs +``` + +--- + +## 3. File Placement Summary + +After generation, ensure files are in the correct locations: + +``` +public/ +├── favicon.ico # Required - multi-size ICO +├── favicon.svg # Already updated +├── favicon-16x16.png # Optional +├── favicon-32x32.png # Optional +├── apple-touch-icon.png # Optional (for iOS) +├── android-chrome-192x192.png # Optional (for Android) +├── android-chrome-512x512.png # Optional (for Android) +└── images/ + ├── logo.svg # Already updated + ├── logo-reversed.svg # Already updated + ├── logo-mono.svg # Already updated + └── logo.png # Required - PNG fallback +``` + +--- + +## 4. Verification Checklist + +After generating files, verify: + +- [ ] `public/images/logo.png` exists and displays botanical design +- [ ] `public/favicon.ico` exists and shows botanical icon in browser tab +- [ ] Clear browser cache and verify favicon appears correctly +- [ ] Test on different browsers (Chrome, Firefox, Safari) +- [ ] Test on mobile devices if possible + +### Quick Visual Test +```bash +# Open the app in browser +php artisan serve + +# Visit http://localhost:8000 and check: +# 1. Browser tab shows new favicon +# 2. Logo appears in navigation +# 3. Logo appears in footer +``` + +--- + +## 5. Brand Color Reference + +For any manual adjustments, use these exact colors from `docs/brand.md`: + +| Color | Hex Code | Usage | +|-------|----------|-------| +| Deep Black | `#1A1A1A` | Primary logo artwork | +| Charcoal | `#4A4A42` | Monochrome logo, text | +| Warm Gray | `#C9C4BA` | Secondary accents | +| Off-White | `#E8E4DC` | Reversed logo artwork | + +--- + +## 6. Troubleshooting + +### Logo PNG not displaying +- Ensure file is saved as PNG-24 with transparency +- Check file permissions: `chmod 644 public/images/logo.png` +- Clear browser cache + +### Favicon not updating +- Clear browser cache completely +- Try incognito/private window +- Check that `favicon.ico` contains multiple sizes (16, 32, 48) + +### Colors look different +- Ensure sRGB color profile is used +- Don't use CMYK color space +- Avoid color management conversions + +--- + +## 7. Optional: Email Logo + +If emails use a separate logo file: + +| File | Size | Location | +|------|------|----------| +| `logo-email.png` | 200x50 or similar | `public/images/` | + +Generate from `logo.svg` at appropriate size for email clients (max width ~200px recommended). + +--- + +*Generated for Story 10.5: Logo and SVG Assets Update*