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:
   • List files in app/ (or src/app/) matching: favicon.ico, icon.png, apple-icon.png, opengraph-image.png, twitter-image.png
   • List files in public/ matching: favicon-*.png, icon-*.png, maskable-*.png, manifest.json
   • Check for brand SVGs in shared/assets/, src/assets/, or similar
3. Read app/layout.tsx (or src/app/layout.tsx) — note the existing metadata structure and brand colors mentioned.
4. 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

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.

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

3. 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.

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

5. OG/Twitter banners: Create a polished 1200×630 social card with:

   • Logo positioned in upper-left or center
   • Project name (large, bold)
   • Tagline or description
   • Brand colors and gradients
   • Professional design, social-media ready

6. 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):
   • favicon.ico → app/favicon.ico (or detect src/app/favicon.ico)
   • icon.png → app/icon.png
   • apple-icon.png → app/apple-icon.png
   • opengraph-image.png → app/opengraph-image.png
   • twitter-image.png → app/twitter-image.png
   • favicon-16x16.png → public/favicon-16x16.png
   • favicon-32x32.png → public/favicon-32x32.png
   • icon-192.png → public/icon-192.png
   • icon-512.png → public/icon-512.png
   • maskable-icon-512.png → public/maskable-icon-512.png
   • logo.svg → shared/assets/logo.svg (or src/assets/logo.svg)
   • logo-dark.svg → shared/assets/logo-dark.svg (or src/assets/logo-dark.svg)
3. 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