Favicons — quick checklist & setup for Next.js apps

faviconsnextjsassets

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:

File Name	Format	Recommended Size	Role
icon.svg	SVG	Scalable	Primary icon for modern browsers (Chrome/Firefox).
icon.png	PNG	32x32 px	Standard backup icon for older browsers.
apple-icon.png	PNG	180x180 px	High-res icon for iPhone/iPad "Add to Home Screen."
favicon.ico	ICO	16/32/48 px	Legacy fallback & Google Search crawler target.

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

Delete manual metadata: Remove any icons: { ... } object inside your layout.tsx. Next.js file-based metadata is more efficient and handles hashing automatically.
Clear cache: Favicons can be sticky. Use a Private/Incognito window or a hard refresh (Ctrl+F5 or Cmd+Shift+R).
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