Add favicon.ico (currently 404 on every page load)

Open Beginner friendly
#56 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
next.js
Domain
frontend

Research direction

Start with the Next.js App Router metadata conventions under src/app and inspect src/app/(auth)/login/* for existing brand assets. Run pnpm dev, hard-reload /login, /, and a deep page with DevTools open; done means the icon request returns 200, the tab shows a recognizable icon, touch icons resolve where applicable, and lint/typecheck remain clean.

Written by the indexing model from the issue text.

Description

area:ux bug priority:low

Problem

Every page load triggers a GET /favicon.ico → 404 request. The browser tab shows the default blank page icon, which makes the app harder to find when it's pinned among many tabs and looks unfinished. The 404 also clutters the network tab and any error-monitoring tooling.

Evidence

Browser smoke test on /login (2026-04-28):

GET http://localhost:3000/favicon.ico  → 404

A repo search confirms there is no favicon.ico at src/app/favicon.ico, no icon.ts(x) / icon.svg, and no static favicon under public/. Next.js 15 App Router auto-serves any of these conventions but only if the file exists.

Proposed approach

Pick one of the App-Router-native conventions:

  1. Easiest: drop a 32×32 favicon.ico at src/app/favicon.ico. Next.js will serve it automatically.
  2. Cleaner: add src/app/icon.svg (a single SVG asset) and let Next.js generate the appropriate sizes for browsers and OS.
  3. Most flexible: add src/app/icon.tsx that programmatically produces the icon from the project palette via ImageResponse. Use the existing brand mark ("AI Developer Hub" wordmark or a glyph) — see src/app/(auth)/login/* for any existing brand assets.

Pair with src/app/apple-icon.tsx (or static apple-touch-icon.png) and src/app/manifest.ts for completeness.

Verify with the browser DevTools network tab and a hard reload that favicon.ico returns 200 and the tab shows the icon.

Acceptance criteria

  • Page loads no longer produce a favicon.ico 404.
  • Browser tab shows a recognizable icon for the app on /login, /, and at least one deep page.
  • No new lint/typecheck warnings.
  • Apple/Android touch icon also resolves (200) where applicable.

Verification

  1. pnpm dev, hard-reload /login with DevTools open → expect favicon.ico (or the icon route) to return 200.
  2. Pin the tab → expect the favicon to show.
  3. (Optional) Run Lighthouse → "PWA / Has a fully resolved manifest" no longer flags the missing icon.
Dominant language
HTML
Stars
0
Forks
0
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from unic/ai-developer-hub

All issues in unic/ai-developer-hub

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.