naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/logo-generation-instruction...

254 lines
7.6 KiB
Markdown
Raw Blame History

# 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*
Reference in New Issue View Git Blame Copy Permalink