How to make a favicon
- Choose your logo, or switch to Text or emoji and type a letter, initials or an emoji.
- Pick a background, shape and padding. The previews show the icon at its real sizes and in light and dark browser tabs.
- Optionally add your app’s name and theme colour under App name, theme colour and folder.
- Download all the files as a ZIP and put them in the root of your website (or the folder you chose).
- Copy the HTML tags into the
<head>of every page.
Favicons are tiny: at 16 pixels, fine detail and thin text disappear. A simple mark, a single letter or a bold shape works best. Check the 16 px preview before you download.
What each file does
| File | Where it is used |
|---|---|
favicon.ico | Browser tabs, bookmarks and history. It holds 16, 32 and 48 pixel versions in one file. Browsers also request it automatically, even without a tag. |
favicon.svg | Browser tabs in modern browsers, sharp at any size. Only made when you start from an SVG. |
apple-touch-icon.png | The icon when someone adds your site to an iPhone or iPad home screen. iOS rounds the corners itself. |
icon-192.png, icon-512.png | Android home screens, installed web apps and splash screens, listed in the manifest. |
icon-maskable-512.png | Android adaptive icons, which can be cut to a circle, squircle or rounded square. |
site.webmanifest | Tells browsers your app’s name, colours and icons. |
How the options are applied
- Background, shape and padding apply to
favicon.icoand the two manifest icons, which can be transparent. - The Apple touch icon is always a full, opaque square, because iOS fills transparent areas with black and rounds the corners itself. A transparent background becomes white.
- The maskable icon is filled edge to edge with the background, and the artwork is placed in the central safe zone, a circle 80% of the icon’s width, so that no shape cuts it off.
- Large images are reduced in several steps, which keeps the small sizes crisp rather than jagged.
favicon.svgis your original file, unchanged. Background, shape and padding are not added to it.
Limitations
- Animated GIF and WebP images become a still image of their first frame. Browsers do not animate favicons anyway.
- SVG files that load other files, such as linked images or web fonts, are drawn without them. Text in an SVG uses fonts installed on your device.
- Emoji and fonts come from your device, so a text icon made on Windows looks slightly different from one made on a Mac.
- Very large images are reduced to 2,048 pixels on their longest side before the icons are made, which is still four times larger than the biggest icon.
Frequently asked questions
Which files do I actually need?
For almost every site, the set made here is all you need: favicon.ico for browser tabs and bookmarks, apple-touch-icon.png for iPhones and iPads, and site.webmanifest with its two icons for Android and installed web apps. Dozens of differently sized PNG files used to be common, but browsers now pick from these few and scale them well.
Why does my favicon not change after I upload a new one?
Browsers cache favicons very aggressively, sometimes for days and separately from the rest of the page. Open the icon’s address directly (for example /favicon.ico) and reload it, try a private window, or add a version to the links, such as favicon.ico?v=2.
Should I use the SVG favicon?
If your logo is an SVG, yes: modern browsers use favicon.svg in tabs, where it stays sharp at any zoom level. You can even add a @media (prefers-color-scheme: dark) rule inside the SVG so the icon changes with dark mode. Keep favicon.ico alongside it for older browsers and other software that reads it.
What is a maskable icon?
Android shows app icons in different shapes, such as circles, squircles and rounded squares, depending on the phone. A maskable icon fills the whole square with colour and keeps the important part in the middle, so it looks right whatever shape it is cut to. Without one, Android shrinks your icon onto a white circle.