How to make a favicon in 2026
You need fewer favicon files than old guides say. Here's the short list that works today, what each file does, and the exact tags to put in your page.
Old favicon guides list dozens of sizes. Most of those were for devices and browsers that are long gone. You can cover today's web with a handful of files.
Favicon generator
Every favicon size plus a manifest and HTML snippet
The files that matter
| File | Size | What uses it |
|---|---|---|
favicon.ico | 16, 32, 48 | Browser tabs, and anything asking at the site root |
icon.svg | Any | Modern browsers, sharp at every size |
apple-touch-icon.png | 180 | iOS home screens |
android-chrome-192x192.png | 192 | Android home screens |
android-chrome-512x512.png | 512 | Install screens |
site.webmanifest | Tells browsers about those Android icons |
The tags
Put these in your page's <head>:
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />The sizes value on the ICO link stops some browsers from choosing it over your SVG.
In Next.js
With the App Router, put the files in app/ and skip the tags:
app/
favicon.ico
icon.png
apple-icon.png
manifest.jsonNext.js adds the links for you.
Three details that are easy to get wrong
The Apple icon needs a solid background. iOS fills transparent areas with black, so a transparent logo can end up on a black tile.
Design for 16 pixels. Fine detail and small text turn to mush at that size. A bold letter or a simple shape works best.
Dark mode is an SVG feature. An SVG icon can include a prefers-color-scheme media query, so it stays visible on dark browser tabs.
Building a mobile app too? The sizes are different there, so use the app icon generator.
Frequently asked questions
Tools in this post
Last updated