How to make a favicon
- Choose Text for letters or initials, Emoji for a quick fun icon, or Image to use your logo.
- Pick colors, a shape (square, rounded or circle) and the padding. The previews show the icon at 16, 32, 64 and 128 pixels and in a browser tab.
- Click Download all (ZIP) for favicon.ico, PNG icons for browsers, Apple and Android, a web manifest and the HTML snippet.
- Upload the files to the root of your website and paste the snippet into the
<head>of your pages.
Which favicon files do you need?
Modern browsers need surprisingly few files. A favicon.ico containing 16, 32 and 48 pixel versions covers every browser, including old ones and Windows shortcuts. A 32 × 32 PNG is used by most current browsers. iPhones and iPads use the 180 × 180 apple-touch-icon when someone adds your site to the home screen, and Android uses the 192 and 512 PNGs listed in the web manifest. The ICO file produced here stores PNG images inside, which every browser since Internet Explorer 9 understands, and keeps transparency.
Design for the smallest size: at 16 pixels, only one or two bold letters or a simple shape stay readable. Strong contrast between the icon and its background matters more than detail. Emoji are drawn with your system's emoji font, so they look slightly different on Windows, macOS and Android; for a consistent brand icon, use letters or an image. Everything is generated in your browser.
What size should a favicon be?
Provide 32 × 32 for browser tabs, plus 180 × 180 for Apple and 192/512 for Android. The ZIP includes them all.
Why doesn't my new favicon show up?
Browsers cache favicons aggressively. Hard-refresh the page, open it in a private window or add a version query such as /favicon.ico?v=2.
Can I use an SVG favicon?
Yes, most modern browsers support <link rel="icon" type="image/svg+xml">, but keep the ICO and Apple PNG as fallbacks.