Which favicon files you need today
A favicon used to mean one file. Now the short answer from the favicon guide at Evil Martians (updated January 2026) is four lines in the head of your page and a handful of files.
- favicon.ico is the fallback every browser can read. When a page names no icon at all, the HTML Standard lets browsers ask for /favicon.ico in the root of the site, so keep that file there.
- favicon.svg is the sharp, scalable icon for modern browsers. According to caniuse it works in Chrome and Edge 80 and later, Firefox 41 and later, and Safari 26 and later. It is made only when you start from an SVG.
- apple-touch-icon.png is the 180 pixel picture iPhones and iPads use for the home screen.
- icon-192.png and icon-512.png are the web app icons named in site.webmanifest, plus an optional maskable icon for Android.
The ICO line in the snippet says sizes="32x32" when an SVG is present. That is the Evil Martians workaround that stops Chrome picking the ICO over the SVG. The HTML Standard says the sizes you list must really be inside the file, so the tool writes the real list when there is no SVG.
If your site is built with Next.js, you can instead put favicon.ico in the app folder and the apple icon next to it as apple-icon.png. The Next.js documentation for this version says it then writes the link tags for you.
Sizes, and what each one is for
- 16 and 32 pixels are the tab icon on normal and high density screens. 48 pixels is also in the ICO because Google Search asks for a favicon larger than 48 pixels, and a 48 pixel picture is the closest standard step.
- Google Search currently requires a square favicon of at least 8 by 8 pixels, recommends more than 48 by 48, and lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported. SVG is not on that list, so keep an ICO or PNG even if you serve an SVG. Google says a favicon may still not show when every rule is met.
- 180 pixels is the Apple touch icon. 192 and 512 pixels are the icons Chrome and other browsers read from the manifest for an installed web app.
- 64, 128 and 256 pixels can be added to the ICO with the size buttons. Microsoft lists 16, 24, 32, 48 and 256 as the minimum for a Windows app icon, which is why a one-click preset for that set is provided.
Whatever the size, a 16 pixel icon has room for about one simple shape. If your logo has thin lines or small text, look at the enlarged preview and consider the letter or a simpler mark.
The two icons that cannot be see-through
The Apple icon. RealFaviconGenerator explains that iOS forbids transparent icons and fills the gaps with black, and it rounds the corners itself. So this icon is always solid and square. It uses your background colour, or white if you chose none, and when the picture is shown whole it keeps at least 8 percent of room so the rounded corners do not cut it.
The maskable icon. Android may cut an icon into a circle, a rounded square or another shape. MDN and web.dev define the safe zone as a circle in the middle with a diameter of 80 percent of the icon, and ask for a solid background that fills the whole icon. The tool shrinks your artwork until its farthest visible pixel is inside that circle, and it measures the finished picture to be sure. For a transparent logo that makes the artwork fill the circle rather than the square.
You can double-check any maskable icon with the maskable.app previewer, or with the "minimum safe area" option in the Application panel of Chrome DevTools.
Letters, emoji and what the tool cannot do
The letter and emoji option draws your characters on a canvas in your browser, then makes every size from that picture. Letters use a sans, serif or monospace font installed on your device. Emoji come from your device's emoji font, so the result looks different on Windows, Mac and phones. Check the font's licence before you use an emoji for a business.
- The pictures inside favicon.ico are PNG compressed. Windows Vista and later and every current browser read them. Windows XP and older programs may not, and this tool does not write the older bitmap form.
- An animated picture gives its first frame only, because icons cannot move.
- An SVG is copied unchanged. The tool warns when it has no viewBox, contains text, or points to pictures and fonts in other files, because a favicon cannot load those.
- Pictures above 100 megapixels are refused. A very large picture is prepared in a background worker, so the page stays responsive.