Files in the set
| File | Size | Used for |
|---|---|---|
favicon.ico |
— | 16, 32 and 48 px in one file, for browser tabs, bookmarks and old browsers |
icon.svg |
— | Sharp at any size in modern browsers; only made from text, emoji or SVG sources |
apple-touch-icon.png |
180×180 | iPhone and iPad home screen (iOS adds the rounded corners) |
icon-192.png |
192×192 | Android home screen and the web app manifest |
icon-512.png |
512×512 | Android splash screen and app stores for PWAs |
icon-512-maskable.png |
512×512 | Android adaptive icons, which crop to a circle or squircle |
manifest.webmanifest |
— | Name, colors and icons for “Add to Home Screen” |
Adding the icons to your site
Put the files at the root of your site, then add this to every page’s <head>:
<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="#2f7bf6" />An SVG favicon can even follow the system’s dark mode with a media query inside the file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>circle { fill: #2f7bf6 } @media (prefers-color-scheme: dark) { circle { fill: #93c5fd } }</style>
<circle cx="50" cy="50" r="50"/>
</svg>
Writing the rest of the <head>? The meta tag generator creates SEO and
social preview tags. Matching the icon to your brand colors? Use the image color picker.
Frequently asked questions
Which favicon files do I really need?
A small set covers every browser and device today: favicon.ico for browser tabs and anything that requests /favicon.ico directly, an SVG icon for sharp rendering in modern browsers, a 180×180 apple-touch-icon for iPhones and iPads, and 192 and 512 px PNGs listed in a web manifest for Android. Dozens of sizes for old Windows tiles and every Apple device are no longer necessary.
Why does favicon.ico still matter?
Browsers, RSS readers, link previews and many tools request /favicon.ico from the site root without reading your HTML. If it’s missing they show a blank icon, and your server logs fill with 404s. The .ico made here contains 16, 32 and 48 px PNG images in one file, which every browser supports.
Can I use an emoji as a favicon?
Yes. Pick Emoji: the SVG icon draws the emoji as text, so it looks the way the visitor’s system draws emoji (Apple, Google and Microsoft designs differ), while the PNG and ICO files capture how it looks on your device. That’s a quick way to give a side project an icon without designing one.
What is a maskable icon?
Android shows home-screen icons in shapes chosen by the device maker: circles, squircles, rounded squares. A maskable icon fills the whole square with its background and keeps the artwork inside the central circle (80% of the width), so nothing important is cut off. The generator makes one automatically with extra padding.
Why does my iPhone icon have a black background?
iOS doesn’t support transparency in apple-touch-icon: transparent areas are filled with black. That’s why the generator always gives the Apple icon a solid square background in your chosen color, even when the other icons are transparent; iOS rounds the corners itself.