Favicon generator.

Make every icon a website or web app needs from one or two letters or your own logo: favicon.ico, the Apple touch icon, Android and maskable icons, a web manifest, and the tags for your HTML or Next.js, plus an SVG favicon when your logo is an SVG. Preview them in a browser tab and on iPhone and Android home screens, then download them all in one ZIP. It runs in your browser, so your images are never uploaded.

Make it from

LettersImage

LettersFont

Shape

SquareRoundedCircle

BackgroundLetter color

Colors from our design systems

App name

favicon.ico, apple-touch-icon.png, Android 192 and 512, a maskable icon, site.webmanifest and head.html.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

Runs in your browser. Nothing you add here is uploaded or stored.

How to make a favicon

Choose what to make it from.
- Letters: type one or two letters, pick a font and a shape (square, rounded, or circle), and set the background and letter colors. To start from a palette that works, click one of the colors from our design systems.
- Image: add your logo as PNG, JPG, WebP, or SVG, and set the padding around it. You can give the favicon a transparent background.
Check the previews: a browser tab in light and dark mode, an iPhone home screen, and an Android home screen with its round mask.
Download all icons as one ZIP file.
Put the files in your site’s root folder (public/ in most projects), and copy the HTML tags or the Next.js metadata from the page into your project.

What’s in the ZIP

File	Where it’s used
`favicon.ico` (16, 32, and 48 pixels)	Browser tabs, bookmarks, and older browsers
`favicon.svg`	Sharp tabs in modern browsers, made only when you upload an SVG logo
`apple-touch-icon.png` (180 pixels)	The icon when someone adds your site to an iPhone or iPad home screen
`android-chrome-192x192.png` and `512x512.png`	Android home screens and the install prompt for web apps
`maskable-icon-512x512.png`	Android icons that get cropped to a circle or another shape
`site.webmanifest` and `head.html`	Your app’s name, colors, and icons, and the tags that link them all

The maskable icon keeps your letters or logo inside the middle 80% of the image, the safe zone that Android never crops. The Apple and Android icons always get a solid background, because home screens don’t show transparency well.

Add the icons with Codex

Put the downloaded files in your project, then ask Codex to wire them up:

Add the favicon files

I put new favicon files in [public/]: favicon.ico, favicon.svg (if there is one), apple-touch-icon.png, the Android and maskable icons and site.webmanifest. Remove any old favicon and icon files, add the tags from head.html to [the root layout], set the app name in site.webmanifest to [your app name], and check that no other icon references are left.

If you use the Next.js App Router, copy the metadata and viewport code from the tool instead of the HTML tags.

Frequently asked questions

Is the favicon generator free?

Yes. There is no sign-up, no watermark, and no limit.

Are my images uploaded?

No. Your browser draws every icon and builds the ZIP on your device. The site only counts that the tool was used, never what you put in.

Which favicon sizes do I need?

For almost every site: favicon.ico with 16, 32, and 48 pixels, a 180-pixel Apple touch icon, and 192 and 512-pixel icons in a web manifest. That is exactly what the ZIP contains. If your logo is an SVG, an SVG favicon keeps it sharp in modern browsers, and the ZIP includes one.

Why is my old favicon still showing?

Browsers cache favicons for a long time. Check that the old files are gone from your project, then open the site in a private window or clear the browser’s cache to see the new one.