A favicon is the tiny icon that represents your website in browser tabs, bookmark lists, history and phone home screens. It is the smallest piece of branding you will ever make — and, because tabs are where people live all day, one of the most frequently seen. Creating one properly means understanding a short list of sizes, choosing between ICO, PNG and SVG sensibly, and designing something that survives being shrunk to 16 pixels. This guide covers all three, then walks through making a complete favicon set in minutes.
Key takeaways
- A favicon is the small icon shown in browser tabs, bookmarks and home screens — a website's logo at its smallest, most-seen size.
- You need a handful of sizes, not one: 16×16 and 32×32 for browser tabs, 48×48 for shortcuts, and 180×180 for Apple touch icons — a single ICO file can bundle the classic sizes.
- Design for 16 pixels: one bold shape or letter, two colours maximum, no text beyond a single character, strong contrast.
- The Favicon Generator builds every size plus a real .ico from any image, free, in your browser.
What is a favicon, and where does it appear?
The name blends 'favourite' and 'icon', from the era when it marked saved favourites. Today the same small file appears in the browser tab beside your page title, in bookmark bars and menus, in mobile browser start pages, and — in its larger touch-icon form — when a visitor adds your site to their phone's home screen, where it sits among their apps.
That last appearance is why favicons deserve more care than they get: a missing or blurry icon in a row of polished app icons makes a website look unfinished, and a browser tab full of generic globe icons makes your open tab the one users cannot find. Branding works at every size, and this is the smallest size there is.
Which favicon sizes do you actually need?
The essential set is short. 16×16 px is the browser-tab classic. 32×32 serves high-density displays in the same tab slot. 48×48 covers Windows shortcuts and taskbar pins. 180×180 is the Apple touch icon for iPhone and iPad home screens. Some setups add 192×192 and 512×512 for Android/Chrome install prompts — the same artwork, exported larger.
You do not need to hand-make each size. Start from one good square master — 512×512 or larger — and let the Favicon Generator produce the full set, including a genuine multi-size ICO file that bundles the classic sizes into the single file browsers have expected since the format was invented.
ICO vs PNG vs SVG: which format should a favicon be?
ICO is the original container format: one file holding several sizes, still the safest default for the classic favicon link. PNG favicons are simpler and widely supported as separate links per size, and they are how touch icons are delivered. SVG favicons are the modern option: a single tiny vector file that scales perfectly and can even respond to dark mode — supported by most current browsers, as PNG vs JPG vs WebP vs SVG: Which Image Format Should You Use? explains about SVG generally.
The pragmatic 2026 answer is all three layers: an ICO for universal coverage, PNGs for touch icons and install prompts, and an SVG if your logo works as a clean vector. ToolAora's own tab icon follows the same recipe — an SVG favicon with PNG fallbacks.
Design rules for an icon that reads at 16 pixels
At 16 pixels you have about 256 dots to spend, so every rule follows from scarcity. Use one idea: a single letter, one bold shape, one symbol. Use at most two colours, with hard contrast between them — if the icon still reads when you squint at it from across the room, it works; if it becomes porridge, simplify. Remove all text beyond one character; a full wordmark shrunk to favicon size is illegible decoration.
Simplify your real logo rather than shrinking it: drop taglines, thin outlines and detail, thicken the surviving strokes, and consider using your brand's initial in its own typeface and colours. Test at actual size in a real browser tab next to famous icons — that honest comparison is the design review that matters. If your master artwork is a vector, the SVG to PNG Converter produces crisp size-specific exports to check.
How to create a favicon: step by step
Step one: prepare a square master image — your simplified logo or initial, at least 512×512, with the artwork comfortably inside the edges (a little breathing room survives cropping better). Step two: open the Favicon Generator and drop the master in; it centre-pads non-square images rather than squashing them. Step three: download the set — the ICO bundle and the PNG sizes including 180×180.
Step four: add the standard link tags to your page head: an icon link for the ICO, an SVG icon link if you have one, PNG icon links, and the apple-touch-icon link for the 180. Step five: reload your site, check the tab, bookmark the page, and add it to a phone home screen. Five minutes of checking across those three surfaces is the whole quality-assurance department for favicons.
Common favicon mistakes
The most common is uploading the full detailed logo and letting the browser shrink it — technically an icon, practically a smudge. Second: forgetting the Apple touch icon, so iPhone home screens show a screenshot or a letter tile instead of your brand. Third: a transparent icon whose artwork is white — invisible on light browser themes; always test on both light and dark tab bars, or give the icon a background of its own.
Fourth: caching confusion — browsers cling to old favicons stubbornly, so 'my new icon does not show' usually means 'my browser remembers the old one'. Test in a private window or a different browser before redesigning in a panic. Fifth: changing the favicon casually after launch. Recognition is the entire point; treat it like a logo, because it is one.
Favicons and the rest of your visual identity
A favicon is one instrument in a small orchestra: the same mark appears as your social profile image, your app icon, your QR code's centre logo (see How to Make a QR Code for WiFi, WhatsApp, Business Cards and Payments) and your Open Graph share image. Designing the simplified version first — the favicon — is a genuinely useful discipline: a mark that survives 16 pixels will work everywhere, while a mark that only works large will keep failing in small places.
So treat this tiny file as a brand decision, not a chore. Fifteen minutes with a generator and an honest look at a real browser tab buys you recognition in the most crowded visual space your visitors own: their row of open tabs.
Testing your favicon like a professional
Run three tests before calling a favicon finished. The tab test: open your site among ten other tabs at normal size and ask someone to find yours in three seconds — recognition speed is the metric. The theme test: view it in a browser with light tabs and again with dark tabs, because a transparent icon with light artwork vanishes on one of them. The home-screen test: add the site to a phone home screen and look at it beside real app icons, where weak contrast and fussy detail are impossible to hide from.
Each failed test has a one-line fix: simplify the shape, add or change the background colour, or increase the master artwork's contrast. Favicons reward iteration precisely because they are small — a full redesign cycle takes minutes, not days, in the Favicon Generator.
Favicons on WordPress and other platforms
On WordPress, you rarely touch code: the Customizer's Site Identity panel takes one square image — 512×512 recommended — and generates the sizes and tags for you. Upload your simplified master there, not the detailed logo file. Website builders handle it similarly, usually under 'site settings' or 'branding', and the same master serves every platform.
Whatever the platform, finish with the same check: view the live site in a fresh browser profile, because your everyday browser may show you a cached icon from before the change for days. The number of favicon 'failures' that are really caching is large enough that professionals test in a clean browser by default.
Try the free tool
This guide is easier with the tool open in another tab — free, no sign up, and everything runs privately in your browser.
Frequently asked questions
What is the standard favicon size?
16×16 px is the original standard for browser tabs, but a complete modern set includes 32×32 and 48×48 (bundled in an ICO) plus a 180×180 PNG as the Apple touch icon.
Can I use a PNG instead of an ICO file?
Yes — modern browsers accept PNG favicons via link tags. Keeping a small ICO as well remains the safest for universal coverage, and a generator can produce both from one master image.
Why does my favicon look blurry?
Usually because a large, detailed image was shrunk by the browser, or because only one size was supplied and it is being scaled. Provide exact sizes and a simplified design with bold shapes.
How do I add a favicon to my website?
Upload the icon files to your site and link them in the page head: rel="icon" for the ICO/PNG/SVG and rel="apple-touch-icon" for the 180×180 PNG. On WordPress, the Site Icon setting in the Customizer handles the tags for you.
Should my favicon have a transparent background?
It can, but test it on light and dark browser themes. Many brands give the icon its own solid background colour so the mark looks identical everywhere it appears.
