Favicons and App Icons in Next.js: The Set You Actually Need

Favicons look like a solved problem, and in a sense they are. But the list of icon files a site can ship has grown, and most of it is redundant. In a Next.js App Router project you usually need two files and one optional manifest, and the framework can generate the markup for them.

What browsers and devices request

• A favicon for the browser tab. Modern browsers accept a PNG, and older ones fall back to favicon.ico, which many still request automatically.
• An apple-touch-icon for the iOS home screen. Safari uses a 180 pixel square PNG and does not apply the transparency that Android does.
• Android home screen icons come from a web app manifest, which lists icons at 192 and 512 pixels.

The App Router conventions

Place icon.png and apple-icon.png directly in the app directory. Next.js detects them, sets the correct link tags and serves them at the matching paths. You do not need to write the head elements by hand.

The manifest

A manifest is only needed if you want a site to be installable or to show a proper name and colour on Android. Next.js can generate it from app/manifest.ts. Include 192 and 512 pixel icons, a name, and a theme colour that matches the header.

What to skip

• Dozens of sizes for every device. The 180, 192 and 512 sizes cover almost everything that matters.
• Hand-written link tags that duplicate what the framework already emits. Two copies of the same icon make it unclear which one wins.
• A transparent PNG for the apple icon. Transparent areas turn black on iOS, so give it a solid background.

Check the result by opening each icon URL directly and by loading the site on a phone. A favicon that is a blurry scaled-down logo is a sign that the source image was too small; start from a 512 pixel square master.