Customizing Branding

Learn how to customize the logo, colors, favicon, daisyUI theme, and font family in ShipAhead to match your brand.

Nuxt: powers the app, using Tailwind CSS and daisyUI for styling.
daisyUI: provides pre-built components and themes for Tailwind CSS.
Google Fonts: free, customizable fonts.
Suggested Tools:
- Logo Generator: Canva - create logos with free templates.
- OG Image Generator: Canva or OG Image Generator - for social media preview images.
- Favicon Generator: Favicon.io — convert images into favicon formats.
- Icons: Icones.js.org - for icons used in the IconDisplay component.

Customize branding by updating files in your ShipAhead project:

Logo:
- Create your logo using Canva (recommended: PNG, ~200x50px).
- Place it in public/images/logo.png.
- Update your config:
  shared/config.js
```
brandingImages: {
  logo: '/images/logo.png',
  openGraphImage: '/images/open-graph.png',
},
```
Open Graph Image:
- Create an OG image using Canva or OG Image Generator (recommended: PNG, 1200x630px).
- Place it in public/images/open-graph.png.
- Update your config (see above).
Favicon:
- Use Favicon.io to generate favicon files from a square image (PNG/JPG, ~512x512px).
- Place them in public/images/:
  - android-chrome-512x512.png resize and rename to pwa-icon-48x48.png
  - android-chrome-192x192.png rename to pwa-icon-192x192.png
  - android-chrome-512x512.png rename to pwa-icon-512x512.png
  - apple-touch-icon.png
  - favicon.ico
daisyUI Theme:
- Choose a theme from daisyUI Themes (e.g., light, dark, cupcake).
- Update your config:
  shared/config.js
```
theme: 'cupcake', // Your preferred theme
```
Google Font Family:
- Select a font from Google Fonts (e.g., Inter, Poppins).
- Update your config:
  shared/config.js
```
fontFamily: 'Inter', // Your chosen font
```

Preview Changes: Save updated files (shared/config.js, public/ assets) and run npm run dev.
Verify Branding: Check logo, favicon, and font in the browser. Confirm favicon in the browser tab and OG image in social previews.
Test Social Sharing: Use Metatags.io to verify your openGraphImage.
UI Components: For customizing UI components (buttons, cards, modals, etc.), refer to the daisyUI documentation.
Add Icons to IconDisplay: Import icons from Icones.js.org in your IconDisplay component (e.g., <IconDisplay name="globe" />).
For more details, visit Nuxt Documentation or daisyUI Documentation.