Branding Gap: Missing Favicon & Open Graph Image

Status: Identified in v1.0.50 — pending resolution.

The CSI Teachable Replacement App currently ships without a custom favicon or Open Graph (OG) image. This page explains what is missing, where it affects end users, and exactly what needs to be done to resolve it.

---

What Is Missing

1. Favicon (public/favicon.ico)

A favicon is the small icon that appears in:

• Browser tabs
• Browser bookmark lists
• Browser history
• iOS / Android "Add to Home Screen" shortcuts

Without a custom file at public/favicon.ico, Next.js serves its own default icon. Users see no branding that connects the tab to your platform.

2. Open Graph Image (public/og-image.png)

An OG image is the preview thumbnail shown when a URL is pasted into:

• Slack, Teams, or Discord
• Twitter / X, LinkedIn, or Facebook
• iMessage and other rich-link-aware messaging apps

Without public/og-image.png referenced in the page metadata, social platforms either show no image or pull an arbitrary on-page image.

---

Current Metadata Configuration

The app's root layout at src/app/layout.tsx sets the following metadata:

export const metadata: Metadata = {
  title: 'CSI Teachable Replacement App',
  // ← no icons field
  // ← no openGraph field
};

The title is correctly set, but no icons or openGraph entries are present.

---

How to Fix It

Step 1 — Create the asset files

File	Recommended Dimensions	Notes
public/favicon.ico	32 × 32 px (multi-size ICO)	Also provide a 16 × 16 layer
public/favicon.svg	Vector	Optional but modern-browser-friendly
public/apple-touch-icon.png	180 × 180 px	Used by iOS home screen shortcuts
public/og-image.png	1200 × 630 px	Used by social / messaging previews

Place all files directly in the public/ directory at the project root so Next.js serves them from the site root (/favicon.ico, /og-image.png, etc.).

Step 2 — Update src/app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'CSI Teachable Replacement App',

  // Favicon + touch icons
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
    other: [
      { rel: 'icon', type: 'image/svg+xml', url: '/favicon.svg' },
    ],
  },

  // Open Graph (social previews)
  openGraph: {
    title: 'CSI Teachable Replacement App',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'CSI Teachable Replacement App',
      },
    ],
  },

  // Twitter card
  twitter: {
    card: 'summary_large_image',
    images: ['/og-image.png'],
  },
};

Step 3 — Verify

1. Favicon — Open the app in a browser and check the tab icon.
2. OG image — Use the OpenGraph.xyz debugger or paste a URL into Slack to confirm the preview image loads.
3. Apple icon — On an iOS device, use Safari → Share → Add to Home Screen and verify the icon.

---

Why This Matters

While this is not a functional regression, branded assets are part of the first impression learners and administrators have of the platform. A generic browser icon can erode trust, especially in a B2B context where the platform is accessed daily by organisation members.

---

Related Files

• src/app/layout.tsx — root metadata declaration
• public/ — static asset directory served at the site root