A favicon is the small icon in the browser tab, the bookmarks bar and the home screen. Make one from an image, from text or initials, or from an emoji, see it in a light and a dark tab, and download every file a site needs in one zip.
Shape
Preview
favicon.ico (16, 32, 48), PNGs at 16, 32, 180, 192 and 512, site.webmanifest and head.html.
Paste into <head>
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#facc15">site.webmanifest
{
"name": "My Site",
"short_name": "My Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#facc15",
"background_color": "#facc15",
"display": "standalone"
}
Drawn on a canvas in your browser. Your image, text and site name never leave this device: nothing is uploaded, and the zip is built on this page.
The zip holds favicon.ico (16, 32 and 48 pixels in one file), PNGs at 16,
32, 180, 192 and 512 pixels, a site.webmanifest and a head.html with the
tags to paste. Everything is drawn on a canvas in your browser; the image is
never uploaded.
How to use it
- Pick Image, Text or Emoji.
- Image: choose or drop a PNG, JPEG, SVG or WebP. If it is not square, pick Crop to keep the centre square or Pad to fit the whole image with the background around it.
- Text: type up to three characters, usually your initials, and pick the text colour and a sans, serif or mono font.
- Emoji: tap one of the presets or paste any emoji.
- Choose a Shape (square, rounded or circle) and a Background colour, or Transparent. Add Padding if the icon feels cramped.
- Check the light and dark tab previews. The tab shows the icon at 16 pixels, its real size, so detail that vanishes there will vanish on your site too.
- Type your Site name. It goes in the manifest and is what Android shows under the home-screen icon.
- Tap Download favicons, unzip into your site's public folder, and paste
the tags into
<head>.
The files, and what asks for each one
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 | Browsers that request /favicon.ico with no tag, Windows shortcuts, old browsers |
favicon-16x16.png | 16 | The browser tab on standard screens |
favicon-32x32.png | 32 | The tab on high-density screens, the Windows taskbar |
apple-touch-icon.png | 180 | iPhone and iPad home screens. Opaque, square corners |
android-chrome-192x192.png | 192 | Android home screen, via the manifest |
android-chrome-512x512.png | 512 | Install prompts and splash screens, via the manifest |
site.webmanifest | Names the Android icons, the site name and the theme colour |
The HTML tags
Paste these into the <head> of every page. The generator above fills in
your theme colour.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#facc15">In Next.js with the App Router you can skip the icon tags: put favicon.ico
in the app folder, add apple-touch-icon.png there renamed to
apple-icon.png, and Next.js writes the tags for you.
Favicon gotchas
- Design for 16 pixels. A detailed logo turns to mush in a tab. One bold shape or one or two letters reads better than a scaled-down wordmark, which is why text mode stops at three characters.
- Check it on a dark tab. A black logo on a transparent background disappears in a dark browser theme. The dark preview above shows this; add a background or a light outline if it vanishes.
- The apple-touch-icon cannot be transparent. iOS fills transparent pixels with black. This tool lays that one file on your background colour, or white.
- Browsers cache favicons stubbornly. After changing it, add a version
such as
?v=2to eachhref, or test in a private window. - The ICO holds PNGs. Since Windows Vista an
.icomay contain PNG images instead of bitmaps, and every current browser reads them. Very old tools that expect bitmaps inside may not. - Emoji look different on every device. Emoji mode draws with your own system's emoji font, so the file you download matches what you see here, not what a visitor's phone would show for the same emoji.
- Serve from the root. Browsers request
/favicon.icoon their own even without a tag, so a site in a subfolder still wants a copy at the domain root.
Related
- The HTML cheat sheet for the rest of
<head>: meta tags,linkrelations and the document outline. - Colour Converter to turn a brand colour into the hex value the colour pickers take, and the Contrast Checker to make sure initials stay readable on their background.
- CSS Gradient Generator and Box Shadow Generator for the rest of a site's look.
- Hash Generator to make a cache-busting version string from the icon file.
Common questions
What is a favicon generator?
A favicon generator turns one picture into the set of small icons a website needs: the icon in the browser tab, in bookmarks, on a phone's home screen and in the Android app switcher. This one makes the icon from an image you upload, from text or initials in your colours, or from an emoji, and gives you favicon.ico, the PNG sizes, a site.webmanifest and the HTML tags in one zip. It all runs in your browser.
How do I create a favicon.ico file?
Pick Image, Text or Emoji above, set the shape and colours, and tap Download favicons. The zip holds a favicon.ico with 16, 32 and 48 pixel icons inside it. Put it in the root folder of your site so it is served at /favicon.ico, which is where browsers look when a page has no icon tag.
What favicon sizes do I need?
For current browsers and phones: a favicon.ico holding 16, 32 and 48 pixel icons, 16 and 32 pixel PNGs for the tab, a 180 pixel apple-touch-icon for iPhones and iPads, and 192 and 512 pixel PNGs listed in a web manifest for Android and installed web apps. Older lists include dozens of other sizes for Windows tiles and old iOS versions, which modern devices no longer ask for.
What is an apple touch icon?
The icon iOS uses when someone adds your site to their home screen, linked with rel=apple-touch-icon. It should be a 180 by 180 PNG with no transparency, because iOS fills transparent pixels with black, and without rounded corners, because iOS rounds them itself. This generator lays the apple-touch-icon on your background colour, or on white if you picked transparent.
Where do I put the favicon files?
Unzip them into the folder your site serves from its root, such as public in Next.js, Vite or Create React App, or static in Hugo and SvelteKit, so they load from /favicon.ico, /apple-touch-icon.png and so on. Then paste the tags from head.html into the head of every page, usually in your layout or template.
Why is my favicon not updating?
Browsers cache favicons hard, often for longer than the page itself. Open the icon's URL directly and reload it, try a private window, or add a version to the links, such as /favicon.ico?v=2, when you change it. Chrome also keeps a separate favicon cache that only clears when the icon's URL changes.
Is my image uploaded?
No. The image is drawn onto a canvas in your browser, the PNGs and the ICO are encoded on this page, and the zip is built here too. Nothing you pick or type is sent to a server, and the page keeps working if you go offline after it loads.