generated logo instructions to do the logo manually later
This commit is contained in:
Naser Mansour
parent
e9a478108a
commit
bd587b37fb
|
|
@ -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*
|
||||
Loading…
Reference in New Issue