What each format is for
A favicon is not one file. Browsers, operating systems and bookmarking tools each look for a different one, and the HTML standard lets a page declare several and leaves the choice to the browser.
| File | Format | Used for |
|---|---|---|
favicon.ico |
ICO, several bitmaps in one file | The fallback: without any icon link, browsers may request /favicon.ico at the site root. This package puts 16, 32 and 48 px images in it. |
favicon.svg |
SVG | One scalable file for browsers that support SVG favicons. It can carry its own light and dark colors. |
favicon-16x16.png, favicon-32x32.png |
PNG | Raster copies of the tab icon, for a site builder or tool that asks for a PNG favicon. |
apple-touch-icon.png |
PNG, 180 × 180 px | The iPhone and iPad home screen, when someone adds the site to it. |
site.webmanifest |
JSON | Name, colors and the app icons for installable web apps (see the maskable icon guide). |
ICO is the oldest format and still the most widely read. The HTML standard describes the /favicon.ico request as something a browser may do when a page declares no icon, so treat it as a safety net and link it explicitly anyway. MDN notes that an ICO file can store several sizes, which is why one file covers 16, 32 and 48 px.
SVG is the only format that stays sharp at every size and on every pixel density. A <style> block inside the SVG can switch colors with prefers-color-scheme, so a dark mark stays visible on a dark tab bar. The server must send it as image/svg+xml: Can I use notes that Chromium browsers and Firefox require that type.
PNG favicons are plain bitmaps, usually linked with a sizes attribute. The standard calls sizes advisory: a browser may use it to pick the closest file, but nothing forces it to. That cuts both ways, as the next section shows.
Which browsers use which
Support for SVG favicons, from Can I use's data as checked on 28 September 2026: Chrome and Edge from version 80, Firefox from 41, Opera from 67, and Safari from 26.0, on macOS and on iOS alike. Safari 18 and earlier do not use SVG favicons, so they rely on the PNG and ICO files. The WebKit team announced the Safari change in its Safari 26.0 release post in September 2025. Anyone still on an older Safari keeps seeing the raster icons, which is why an SVG favicon never replaces them.
When a page declares several icons, the HTML standard says the browser picks the one that suits it best, and when several suit it equally the last one declared wins. If a file turns out to be unusable, for example a format it cannot read, it moves on to the next. "Suits it best" is left to the browser: one that picks by declared size may prefer a PNG marked sizes="32x32" to an SVG that declares no size, whatever the order. So the snippet below links no sized PNGs at all: the ICO covers the raster sizes, and the SVG comes after it.
One detail comes from practice rather than from a browser vendor. Evil Martians' favicon article recommends sizes="32x32" on the ICO link "to fix the Chrome bug where it chooses an ICO file over an SVG"; its changelog says it replaced sizes="any" for that reason in July 2023. The article links no Chromium bug report, and we have not found one, so read it as field experience. The generator follows that advice. It does no harm, since the ICO does contain a 32 px image.
Apple touch icon. Apple's archived Safari Web Content Guide documents <link rel="apple-touch-icon"> and lists 180 × 180 px for Retina iPhones. MDN adds that iOS does not use ordinary rel="icon" links for home screen icons. Apple's documentation does not say what happens to transparent pixels; a reply on Apple's developer forums (from another developer, not from Apple) says they show as black. The generator therefore always makes this file opaque, on the background color you choose.
Theme color is the least reliable part. Can I use lists no support for <meta name="theme-color"> in Firefox, and says desktop Chrome uses the color only for installed web apps. Can I use and MDN both say that from Safari 26 it applies only to installed web apps. The two sources disagree on details for Chrome on Android and Safari on iOS 26. Include the tag, but do not design around it.
Apple's older mask-icon link for Safari's pinned tabs still appears in its archived documentation. We found no official note that retires it, and nothing that requires it either. This package does not include one.
The minimal set worth shipping
For a site with vector artwork, link favicon.ico, favicon.svg and apple-touch-icon.png, plus a manifest with 192 and 512 px icons if the site should be installable. This is the set Evil Martians' article settles on. The PNG favicons can sit on the server for tools that ask for one, without a link tag. For a site whose logo exists only as a bitmap, drop the SVG: a PNG wrapped in an SVG file is still a bitmap and gains nothing. Trace it into real vector paths first if you want an SVG favicon.
The HTML snippet
These are the tags the generator writes into favicon.html for the example package below, with the files at the site root:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
If your files live in a folder such as /assets/icons/, give that folder as the path prefix in the favicon generator and every href changes with it; also copy favicon.ico to the site root, where browsers look for it on pages that link no icon. A PNG, JPG or WebP source produces the same tags without the SVG line.
A real example to download
We ran this site's own mark (a committed SVG, not anyone's upload) through the favicon generator with the name "png2svg.art", theme color #0a2d8f, background #e8efff and 8 % padding. Nothing was edited afterwards, and a test rebuilds the package and fails if these files ever drift from what the tool produces.
The 32 px favicon, at its real size: 
The 180 px Apple touch icon, opaque on the background color:
Download the whole example package (ZIP): favicon.svg, favicon.ico, both PNG favicons, the Apple touch icon, four app icons, site.webmanifest, favicon.html and a README.
Checking your favicons
Open the page in a private window after uploading: browsers keep favicons cached for a long time, and an old icon in a normal window proves nothing. In the developer tools' network panel, confirm that favicon.svg is served as image/svg+xml and that every file answers 200. Look at the tab in light and dark mode, and add the page to a phone's home screen to check the touch icon.