# 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 (Forest Green on light backgrounds) |
| `public/images/logo-reversed.svg` | Reversed logo (Warm Cream on dark backgrounds) |
| `public/images/logo-mono.svg` | Monochrome logo (Deep Black, 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 |
|-------|----------|-------|
| Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
| Warm Gold | `#A68966` | CTA buttons, links, accents |
| Warm Cream | `#F4F1EA` | Main page background, reversed logo |
| Forest Green | `#2D322A` | Headings, body text, primary logo |
| Pure White | `#FFFFFF` | Card backgrounds |
| Deep Black | `#1A1A1A` | Monochrome 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*
*Updated for Story 12.6: Brand Documentation Update (Dark Charcoal & Warm Gold)*