Favicons — quick checklist & setup for Next.js apps

Favicons are essential for consistent branding across browser tabs, bookmarks, and search results. When a favicon appears next to your site in Google Search it increases recognition and perceived reliability — small visuals that help users trust and choose your site in crowded results.

1. File preparation

You only need these 4 files to cover almost every case:

Note: The .ico file is a container — use a generator like favicon.io to include 16/32/48px variants.

2. Folder structure

Name these files in your project and Next.js will handle metadata and hashing for you:

root/
├── app/
│   ├── icon.svg           <-- (Primary)
│   ├── icon.png           <-- (Backup)
│   └── apple-icon.png     <-- (iOS)
└── public/
		└── favicon.ico        <-- (The "Safety Net" for bots and Google)

3. Implementation steps

1. Delete manual metadata: Remove any icons: { ... } object inside your layout.tsx. Next.js file-based metadata is more efficient and handles hashing automatically.
2. Clear cache: Favicons can be sticky. Use a Private/Incognito window or a hard refresh (Ctrl+F5 or Cmd+Shift+R).
3. Google verification: Google expects icons to include a multiple of 48px. Providing the SVG plus a 48px entry inside the .ico satisfies this.

4. Timeline & expectations

• Browser tab: Updates instantly (or after cache clear).
• Google Search results: Usually updates in 2–4 weeks; the favicon crawler (favicongw) is slower.
• Speed it up: Use URL Inspection in Google Search Console to request indexing for your homepage.

Back to Articles