brand-assets-setup

Brand Assets Setup — Implementation Guide

PHASE 1 — Discovery

Scan the project to understand its current state before printing anything.

1. Find the Next.js frontend root — look for app/layout.tsx or src/app/layout.tsx.
2. Check existing assets:
3. List files in app/ (or src/app/) matching: favicon.ico, icon.png, apple-icon.png, opengraph-image.png, twitter-image.png
4. List files in public/ matching: favicon-.png, icon-.png, maskable-*.png, manifest.json
5. Check for brand SVGs in shared/assets/, src/assets/, or similar
6. Read app/layout.tsx (or src/app/layout.tsx) — note the existing metadata structure and brand colors mentioned.
7. Detect brand colors — check app/globals.css, src/app/globals.css, or tailwind.config.* for background and accent colors.

PHASE 2 — Checklist

Print a comprehensive checklist showing the status of all 12 brand asset files.

Mark with:

• ✅ — file exists and appears correct
• ❌ — file is missing or needs regeneration

Use the detected brand colors in notes (e.g. "use background color #f7f9fb").

Asset Checklist Template

| File | Size | Background | Location | Purpose | Status | |------|------|------------|----------|---------|--------| | favicon.ico | 16×16 + 32×32 + 48×48 | SOLID | app/favicon.ico | Browser tab icon (multi-size) | ❌ | | favicon-16x16.png | 16×16 | SOLID | public/favicon-16x16.png | Fallback for legacy browsers | ❌ | | favicon-32x32.png | 32×32 | SOLID | public/favicon-32x32.png | Fallback for legacy browsers | ❌ | | icon.png | 32×32 | TRANSPARENT | app/icon.png | OS adds background and rounding | ❌ | | apple-icon.png | 180×180 | SOLID | app/apple-icon.png | iOS home screen (needs opaque background) | ❌ | | icon-192.png | 192×192 | TRANSPARENT | public/icon-192.png | Android PWA (OS adds background) | ❌ | | icon-512.png | 512×512 | TRANSPARENT | public/icon-512.png | Android PWA (OS adds background) | ❌ | | maskable-icon-512.png | 512×512 | SOLID | public/maskable-icon-512.png | Adaptive icons (logo in center 80%) | ❌ | | opengraph-image.png | 1200×630 | SOLID | app/opengraph-image.png | Facebook, Telegram, LinkedIn cards | ❌ | | twitter-image.png | 1200×630 | SOLID | app/twitter-image.png | Twitter/X cards | ❌ | | logo.svg | vector | TRANSPARENT | shared/assets/logo.svg (or src/assets/logo.svg) | Light background usage | ❌ | | logo-dark.svg | vector | TRANSPARENT | shared/assets/logo-dark.svg (or src/assets/logo-dark.svg) | Dark background usage | ❌ |

PHASE 2.5 — AI Generation Prompt

Print the following prompt for the user. They will attach their logo and send this to an AI image generation tool.

🎨 Asset Generation Prompt (Attach Your Logo)

You are an expert brand asset generator. I will provide you with a logo image. Your task is to generate a complete brand asset pack for a Next.js project.

Asset Specifications

Generate exactly 12 files matching these specifications:

1. FAVICON SET (3 files)

• favicon.ico — Multi-size ICO format (16×16, 32×32, 48×48) with solid background [BRAND_BG_COLOR]
• favicon-16x16.png — 16×16 PNG, solid background, legacy browser fallback
• favicon-32x32.png — 32×32 PNG, solid background, legacy browser fallback

2. APP ICONS (2 files)

• icon.png — 32×32 PNG, TRANSPARENT background. Operating system will add rounded corners and background color.
• apple-icon.png — 180×180 PNG, solid background [BRAND_BG_COLOR]. iOS will add rounded corners on top of the background.

3. PWA / ANDROID ICONS (3 files)

• icon-192.png — 192×192 PNG, TRANSPARENT background. OS adds adaptive coloring.
• icon-512.png — 512×512 PNG, TRANSPARENT background. OS adds adaptive coloring.
• maskable-icon-512.png — 512×512 PNG, solid background [BRAND_BG_COLOR]. Logo must fit in center 80% (10% safe margin on all sides). OS will mask as circle or square.

4. SOCIAL / OG IMAGES (2 files)

• opengraph-image.png — 1200×630 PNG, solid background. Create a polished banner with logo + project name + tagline using brand colors.
• twitter-image.png — 1200×630 PNG, solid background. Same as opengraph (can be identical).

5. LOGO VECTORS (2 files)

• logo.svg — Scalable SVG, TRANSPARENT background. For use on light backgrounds.
• logo-dark.svg — Scalable SVG, TRANSPARENT background. For use on dark backgrounds.

Brand Color Palette

Use these colors throughout:

• Background (Light): [BRAND_BG_COLOR]
• Foreground (Dark): [BRAND_FG_COLOR]
• Primary Accent: [BRAND_PRIMARY_COLOR]
• Secondary Accent: [BRAND_SECONDARY_COLOR]

Generation Rules

1. Transparent files: Keep the logo on a transparent layer. The operating system will add rounded corners and apply theme colors automatically.

1. Solid background files: Use [BRAND_BG_COLOR] as the background. Center the logo with appropriate padding.

1. Maskable icons: The logo must fit within the central 80% (leaving a 10% safe zone on all sides). The OS will mask the entire icon as a circle or square.

1. favicon.ico: Create a multi-size ICO file containing 16×16, 32×32, and 48×48 variants, all with [BRAND_BG_COLOR] background.

1. OG/Twitter banners: Create a polished 1200×630 social card with:
2. Logo positioned in upper-left or center
3. Project name (large, bold)
4. Tagline or description
5. Brand colors and gradients
6. Professional design, social-media ready

1. SVG logos: Create clean, scalable vector versions that work at any size. Include separate versions for light and dark backgrounds if the logo appearance changes.

Output Format

Generate all 12 files into a single folder named:

[ProjectName]_brand_assets_YYYYMMDD

Include a README.txt or index.txt with a simple list of all files and their purposes.

Attach your logo now

Attach the logo image below, and I will generate the complete asset pack.

PHASE 3 — Import

When the user provides the path to the generated assets folder:

1. Verify the folder exists and list all files inside.
2. Copy files to correct locations (use system copy commands):
3. favicon.ico → app/favicon.ico (or detect src/app/favicon.ico)
4. icon.png → app/icon.png
5. apple-icon.png → app/apple-icon.png
6. opengraph-image.png → app/opengraph-image.png
7. twitter-image.png → app/twitter-image.png
8. favicon-16x16.png → public/favicon-16x16.png
9. favicon-32x32.png → public/favicon-32x32.png
10. icon-192.png → public/icon-192.png
11. icon-512.png → public/icon-512.png
12. maskable-icon-512.png → public/maskable-icon-512.png
13. logo.svg → shared/assets/logo.svg (or src/assets/logo.svg)
14. logo-dark.svg → shared/assets/logo-dark.svg (or src/assets/logo-dark.svg)
15. Delete the source folder after successful import.

PHASE 4 — Wire Metadata

Update app/layout.tsx (or src/app/layout.tsx) with proper Next.js metadata.

Rules — Do NOT manually add:

• metadata.icons — Next.js auto-detects favicon.ico, icon.png, apple-icon.png from app/
• openGraph.images — Next.js auto-detects opengraph-image.png from app/
• twitter.images — Next.js auto-detects twitter-image.png from app/

Rules — Ensure these ARE present:

• viewport export (separate from metadata, required for streaming)
• metadataBase (canonical domain)
• manifest (path to PWA manifest, usually /manifest.json)
• openGraph object (title, description, URL, siteName, type)
• twitter object (card type, title, description)
• robots (index and follow rules)

Example structure:

import type { Metadata, Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export const metadata: Metadata = {
  title: "Project Name",
  descript