Favicons in 2026, explained
A favicon is the small icon of a website. Browsers show it in tabs, bookmarks and history, Google shows it next to your search results, and phones use a larger version when someone adds your site to their home screen. Over the years people collected dozens of sizes, but modern browsers need very few files. This favicon generator makes exactly the set that current browsers and platforms use, from an image, from text or from an emoji, and writes the HTML and the web manifest for you.
The files you actually need
| File | Size | Used by |
|---|
| favicon.ico | 16, 32, 48 px | All browsers, older ones included; tools and feed readers that request /favicon.ico |
| icon.svg | vector | Chrome, Edge, Firefox and Safari: sharp at any size, can switch colours in dark mode |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen, Safari bookmarks |
| icon-192.png | 192 × 192 | Android home screen (from the manifest) |
| icon-512.png | 512 × 512 | Installed web apps and their splash screen |
| icon-mask.png | 512 × 512 | Android adaptive icons (maskable) |
| manifest.webmanifest | — | Name, colours and icons of your site as an app |
Sizes such as 57, 72, 114, 144 or 150 px, msapplication tiles and browserconfig.xml were for old iOS versions and Windows 8 and 10 tiles. You can leave them out. If you want separate 16, 32 and 48 px PNGs anyway, tick the option under App details.
The HTML to paste
<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="/manifest.webmanifest">
<meta name="theme-color" content="#0a0e0f">
Browsers that understand SVG pick icon.svg; the others use favicon.ico. The sizes="32x32" on the ICO line replaces the older sizes="any" advice and keeps Chrome from downloading the ICO as well as the SVG. Also put favicon.ico in the root of your site, because many tools ask for /favicon.ico without reading your HTML.
Favicons in Google Search
Google shows a favicon next to every result. According to Google's guidelines it must be square, a multiple of 48 px (48 × 48, 96 × 96 and so on; SVG has no size limit), stable over time, crawlable by Googlebot and suitable for all audiences. The 48 px image inside favicon.ico and the SVG both meet that. After a change it can take days or weeks before Google shows the new icon.
Apple touch icon
When someone adds your site to an iPhone or iPad home screen, iOS uses the apple-touch-icon at 180 × 180 px. iOS rounds the corners itself and doesn't support transparency, which shows up as black. That is why this file is always a full, opaque square: with a transparent design you choose its background colour separately.
Android, the manifest and maskable icons
Android and installed web apps (PWAs) read the icons from manifest.webmanifest: 192 px for the home screen and 512 px for the install dialog and splash screen. Android launchers cut icons into their own shape: a circle, a squircle or a rounded square. A maskable icon fills the whole square with its background and keeps everything important inside the centre circle with a diameter of 80% of the icon, the safe zone. This generator adds at least 20% padding on that file, so your logo is never clipped.
Dark mode favicons
Browser tabs are dark for many people. A black logo on a transparent background disappears there. Give the icon a background, or use the dark mode option: icon.svg then contains a prefers-color-scheme media query that switches to other colours when the system is in dark mode. PNG and ICO files can't do this, so give them colours that work on both.
Designing for 16 pixels
At 16 × 16 px there are 256 pixels to work with. Use one strong shape or one or two letters, thick strokes and high contrast. Leave out thin lines, small text and slogans. A detailed logo often works better as just its symbol or first letter. The enlarged 16 px preview shows exactly which pixels survive.
Private by design
Your image is drawn on a canvas in your browser and the files, including the ICO and the ZIP, are built there too. Nothing is uploaded. Your design settings are remembered in this browser; uploaded images are not stored.