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

7.6 KiB
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)

# 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

# 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

# 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

# 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

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