Do I still need favicon.ico in 2026?

Yes. Browsers, feed readers and other tools still request /favicon.ico from the site root by default, even when no link tag points to it. Modern ICO files simply wrap PNG images, so one small file covers every legacy case. Link it with sizes="32x32" so browsers that support SVG still prefer your icon.svg.

What is an apple-touch-icon?

The icon iOS and iPadOS use when someone adds your site to their home screen, and one of the icons Google Search can use. It should be a 180 × 180 PNG with a solid background and square corners: iOS rounds the corners itself and fills any transparency with black.

Why is my favicon not updating?

Browsers cache favicons aggressively, often separately from the rest of the page. Rename the file or add a version query (favicon.ico?v=2) to the link tags, then hard-reload. Google Search re-crawls favicons on its own schedule, so a change there can take days or weeks.

Can I use an SVG or an emoji as a favicon?

Yes. Chromium browsers and Firefox support SVG favicons, and an SVG can even switch colours for dark mode with a prefers-color-scheme media query. An emoji favicon is just an SVG with the emoji as text, so it renders with each visitor's own emoji set. Always ship favicon.ico alongside it as a fallback.

How do I add a favicon in Next.js?

With the App Router, put favicon.ico, icon.svg or icon.png, and apple-icon.png in the app folder, and add manifest.webmanifest or manifest.ts. Next.js generates the link tags automatically, so you do not need to write them or set metadata.icons.

Is my logo uploaded anywhere?

No. Every file, including the ICO and the zip, is generated in your browser. Your image never leaves your device.

Favicon & app icon generator

Make a complete favicon and app icon set from a letter, an emoji or your logo: favicon.ico, PNGs, Apple touch icon, Android icons, an SVG and a web manifest — previewed in real browser tabs and on home screens, downloaded as one zip.

Free, no signup
Runs in your browser
Nothing is uploaded

Source

Start from a letter, an emoji or your logo.

Letters (1–3)

Font

Bold

Style

Background

Transparent

Background colour

Letter colour

Shape

Corner radius22%

Padding14%

App name (for the web manifest)

Preview

Rendered live at every real size.

Actual sizes

Check the 16px one: if it is unreadable there, simplify the mark or cut the padding.

My Site

yoursite.com

My Site

yoursite.com

iOS home screen

My Site

Messages

Notes

Mail

Android launcher

My Site

Files

Photos

Clock

Download

8 files, ready for your site's root folder.

favicon.ico16, 32 and 48px in one file
icon.svgScalable, for modern browsers
apple-touch-icon.png180 × 180, opaque
android-chrome-192x192.png192 × 192
android-chrome-512x512.png512 × 512
favicon-32x32.png32 × 32
favicon-16x16.png16 × 16
site.webmanifestName, icons and theme colour

Paste in <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#266df0">

favicon-16x16.png and favicon-32x32.png are included for CMSs and tools that ask for PNG favicons. Browsers use favicon.ico and icon.svg, so you do not need to link them.

How it works

How to use the favicon & app icon generator

Choose a source

Type one to three letters, pick an emoji, or drop in your logo. A square PNG or SVG of 512px or more gives the sharpest result.

Style it

Set the background colour or make it transparent, pick a square, rounded or circle shape, and tune padding and corner radius.

Check it everywhere

The preview renders at 16, 32, 48 and 64px, in light and dark browser tabs, and on iOS and Android home screens.

Download the set

Get favicon.ico, the PNGs, the Apple touch icon, an SVG and a web manifest in one zip, plus the exact HTML or Next.js setup.

The files you actually need in 2026

Old favicon generators spat out twenty-odd files: Windows tiles, a dozen Apple sizes, Safari mask icons. Almost all of that is obsolete. Current browsers and operating systems are happy with five files and four lines of HTML.

File	Size	Who uses it
`favicon.ico`	16, 32, 48px	Every browser's fallback, feed readers, tools that request /favicon.ico
`icon.svg`	Scalable	Chromium browsers and Firefox; sharp at any density, can adapt to dark mode
`apple-touch-icon.png`	180 × 180	iPhone and iPad home screens; also read by Google Search
`android-chrome-192x192.png` / `512x512`	192, 512	Android home screens and installed web apps, via the manifest
`site.webmanifest`	—	Tells Android and Chrome your app name, icons and theme colour

The generator also includes favicon-16x16.png and favicon-32x32.png, because some CMSs, email tools and website builders ask for a PNG upload. Legacy extras such as browserconfig.xml and the msapplication-* tile tags were for pinned tiles in old versions of Windows; you can leave them out.

Why ICO still exists

The .ico format dates from the 1990s, but browsers still request /favicon.ico from your site root automatically, even when no link tag mentions it. A modern ICO file is just a small container holding PNG images, so this tool packs 16, 32 and 48px versions into one file of a few kilobytes. Linking it with sizes="32x32" matters: it stops Chrome preferring the ICO over your SVG.

SVG favicons and dark mode

An SVG favicon stays crisp at every pixel density, and because it is a vector document it can contain a media query: @media (prefers-color-scheme: dark) { … }. That lets a dark logo turn light on dark browser tabs. For text and emoji icons, this tool writes an icon.svgwith live text, so it renders in each visitor's system font or emoji set. If you need exact letterforms in the SVG, convert your logo's text to outlines in a design tool and upload it as an image instead.

The Apple touch icon rules

180 × 180 pixels covers every current iPhone and iPad.
Keep it square and opaque. iOS applies its own rounded mask, and transparent areas turn black, which is why the generator exports this one on a solid background even when you pick transparent.
If there is no link tag, iOS still looks for /apple-touch-icon.png at the root, so keep the default filename.

Designing an icon that survives 16 pixels

A favicon is a logo at its most extreme. At 16 × 16 there are 256 pixels to work with, and a wordmark or detailed illustration turns to mush. What works:

One or two letters, or a single symbol. Use the monogram or brand mark, not the full logo.
Bold weights and thick strokes. Hairlines vanish when the browser scales the image.
A solid background shape keeps the icon visible on both light and dark tab bars. If you go transparent, check the dark tab preview — dark marks disappear there.
Less padding at small sizes. Around 10–15% looks balanced at 512px and still reads at 16px.

Check the contrast between your mark and its background with the colour contrast checker (a 3:1 ratio is the minimum for graphics). The logo glossary entry covers marks versus wordmarks.

Getting it to show up

Put the files in your site root, paste the HTML into the <head>, and hard-reload. Browsers cache favicons stubbornly, so when you change one, rename it or add ?v=2 to the links. Google Search shows favicons next to results; it reads rel="icon" and rel="apple-touch-icon" links, recommends an icon larger than 48 × 48px, and updates on its own crawl schedule. While you are in the <head>, set up your link previews with the Open Graph meta generator.

A favicon is only as strong as the mark behind it. If you need that mark designed properly, it is part of my branding work.

Common questions