A favicon is the tiny icon that appears next to your page title in a browser tab, in bookmarks, and in search results. It is one of the smallest assets on a website and one of the most overlooked — yet it does a surprising amount of work for your brand. This guide explains exactly what sizes and formats you need in 2025, how to generate them, and how to add them to your site correctly.
What is a favicon?
"Favicon" is short for favorite icon. It is the small square image browsers display in the tab strip, the bookmarks bar, the history list, and increasingly in Google's mobile search results next to your listing. Modern sites also use related icons — the Apple touch icon for iOS home screens and the icons defined in a web app manifest for Android and installable PWAs.
Why favicons matter
- Recognition: when a user has ten tabs open, the favicon is how they find yours at a glance.
- Trust: a missing or broken favicon (the blank "document" icon) makes a site look unfinished or unsafe.
- Search visibility: Google shows favicons next to mobile search results, so a clear icon improves click-through.
- Bookmarks & home screens: a good icon is what users tap when they save your site.
Favicon sizes and formats you need
You do not need dozens of files. A practical, modern set covers every device:
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Legacy browsers, tab strip |
| favicon.svg | scalable | Modern browsers (crispest option) |
| apple-touch-icon.png | 180×180 | iOS home screen |
| icon-192 / icon-512.png | 192×192, 512×512 | Android / PWA manifest |
PNG is the safest raster format because it supports transparency and is universally supported. SVG is the sharpest option on modern browsers because it scales to any pixel density. The classic .ico file still matters for older browsers and can bundle several sizes in one file.
How to create a favicon
You have three practical routes:
- From an existing logo or image: upload a square PNG or JPEG and let a generator export every required size at once. This is the fastest path and what most people need.
- From scratch: design a simple mark in any editor. At 16×16 pixels detail disappears — favor a single bold shape or letter over a shrunken full logo.
- From an emoji or text: for a quick project, a single letter or emoji on a solid background reads clearly at tiny sizes.
Our free Favicon Generator takes one image and produces the full modern set — .ico, PNG sizes and the touch icon — plus the exact HTML to paste, all in your browser with nothing uploaded to a server.
How to add it to your site
Place the files in your site root and add these tags inside <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">The sizes="any" hint lets modern browsers prefer the SVG while older ones fall back to the .ico. The manifest points Android and PWAs to the 192×192 and 512×512 icons.
Best practices
- Keep it simple. A favicon is often rendered at 16×16 — one strong shape beats fine detail.
- Use a transparent or solid background, not a screenshot of your full logo with text.
- Test on dark and light tabs. An icon that vanishes on a dark browser theme needs an outline or padding.
- Cache-bust when you change it. Browsers cache favicons aggressively; rename the file or append a version query to force an update.
- Ship the SVG where you can — it stays crisp on high-DPI screens.
FAQ
What size should a favicon be?
Provide at least 16×16 and 32×32 in a .ico, a 180×180 apple-touch-icon, and 192×192 / 512×512 PNGs for Android/PWA. An optional SVG covers modern browsers at any resolution.
Do I still need a favicon.ico file?
Yes, for maximum compatibility. Some older browsers and tools request /favicon.ico by default, so keeping it avoids stray 404s even if you also ship an SVG.
Why isn't my new favicon showing?
Browsers cache favicons hard. Do a hard refresh, clear the cache, or change the file name / add a ?v=2 query to the link tag.
Can I make a favicon without design software?
Yes — upload any square image to a generator and it exports every size and the HTML for you.