Favicon Generator
Free tool · by Daniel HaketMake a clean favicon in seconds — pick a letter or emoji, your colours and a shape, and download it as a PNG for your site's browser tab. No design software needed.
What this free tool is great for: a quick, one-off job with no signup — it runs entirely in your browser, so nothing leaves your device and there's nothing to manage.
Its honest limit: it produces a one-off output — it won't store, track, brand or manage them at scale, and it can't tell you what happens after you share it.
The smallest pixel-estate on the web — and why it matters
A favicon is the tiny icon in the browser tab, the bookmark list, the history dropdown and the phone home screen. It's easily the smallest design asset your site has — and one of the hardest-working. With fifteen tabs open, users find your site again by scanning icons, not reading titles; a missing favicon renders as a generic grey globe that quietly says "unfinished." It shows up in search results on mobile, in bookmark bars, in link previews inside chat apps. This generator turns any image or letter into the files you need, and the sections below cover the details — sizes, formats, placement — that decide whether it looks crisp everywhere or subtly broken.
Formats: ICO, PNG and SVG in 2026
The favicon world carries three eras of formats simultaneously. The classic .ico container survives because legacy browsers and some corners of Windows still expect it — it can bundle several sizes in one file. PNG is the pragmatic workhorse: universally supported, small, pixel-precise at each size you export. SVG is the modern option — one vector file that stays sharp at any size and can even adapt to dark mode with embedded CSS — but support, while now broad in modern browsers, still isn't total. The robust recipe most sites use: an SVG favicon for modern browsers, PNG fallbacks at the key sizes, and a favicon.ico at the root for everything ancient.
The sizes that actually matter
You don't need the twenty-size mega-pack that generators once produced. The practical set: 16×16 and 32×32 for browser tabs and bookmarks, 180×180 for Apple touch icons (the iPhone home-screen icon), and 192×192 plus 512×512 for Android and progressive-web-app manifests. That handful covers effectively every surface your icon appears on. More important than quantity is quality at small sizes: an icon that looks great at 512 pixels can turn to mud at 16 — which is why you design for the smallest size first and check every export at 100% zoom, not scaled up.
Design rules for 16 pixels
Sixteen by sixteen pixels is a brutal canvas, and most logos fail on it. The rules that survive: one simple shape or letter, not a full wordmark — a logo with text becomes unreadable smear at tab size. High contrast against both light and dark tab bars, because your users' browsers are split between themes. Generous fill — tiny margins waste pixels you can't spare. And distinctiveness within your own ecosystem: if your sites share a look, vary the colour so tabs are tellable-apart. The single-letter-on-coloured-square approach (which this generator makes trivially) works so well precisely because it obeys all four rules at once.
Installing it correctly
Placement is half the job. Put favicon.ico at your site root — browsers request that exact path by convention even without any HTML. Then declare the rest in your <head>: a rel="icon" link for the SVG or PNG, a rel="apple-touch-icon" for iOS, and a web-app manifest if you want the Android/PWA sizes picked up. Getting the links right matters because different surfaces read different tags — a site can look perfect in Chrome tabs while showing a blank square when saved to an iPhone home screen, purely because the apple-touch-icon link is missing.
Why your new favicon won't show up (caching)
The most-asked favicon question is why the old icon keeps appearing after you replaced it. The answer: favicons are cached aggressively — by the browser, sometimes for weeks, independent of normal page caches. A hard refresh often isn't enough. The tricks: bump the filename or add a version query to the link tag (icon.png?v=2), test in a private window, and accept that some visitors will see the old icon until their cache expires on its own. This is also the argument for getting the favicon right early: it's the one asset you can't reliably hot-swap for everyone.
Favicons in search and beyond the tab
Since Google began showing favicons next to mobile (and increasingly desktop) search results, the little icon became a search-presence asset: a recognisable icon lifts the perceived legitimacy of your result in a list of blue links. It also appears in browser new-tab shortcuts, in feed readers, in Discord/Slack link unfurls. The favicon is, in effect, your brand's avatar across the entire web outside your own site — which is a lot of surface area for a file measured in kilobytes. Treat it with the same intent as your logo, because for many users it IS your logo.
Dark mode and the transparent-background trap
A quietly common favicon failure appears the moment someone switches their browser to dark mode: an icon designed as dark shapes on a transparent background simply vanishes into the dark tab bar. The fixes are simple once you know the trap exists. Safest: give the icon a solid background — a coloured rounded square behind your mark works on every tab theme. Fancier: an SVG favicon can include a media query that swaps colours with the theme, serving light marks on dark tabs and vice versa. Whichever you choose, test both themes before shipping: open a light and a dark browser window side by side and check the tab. Half your visitors live in the theme you don't use.
The icon is the finishing touch — where Hostinger does more
A favicon is the last five percent of polish on something that has to exist first: a live website on fast, reliable hosting. If you're at the favicon stage of a new project, the foundation underneath it — domain, hosting, SSL, staging, email — is the part that determines whether the site itself loads quickly and stays up. That's where a host like Hostinger does more: inexpensive, fast hosting with one-click WordPress, a free domain and SSL on most plans, and an AI site-builder when you want to go from nothing to live in an afternoon. Generate your icon here; give it a fast home there — a crisp favicon on a slow site is polish on the wrong layer.
Frequently asked questions
What size should a favicon be?
Provide at least a 32×32px icon for the browser tab and a 180×180px version for Apple touch icons. This tool exports both sizes.
How do I install the favicon?
Upload the PNG to your site and add <link rel="icon" href="/favicon.png"> to your HTML head. Most site builders also have an upload field for it.
Where do I host my website?
Anywhere that serves static files. A budget host like Hostinger gets a domain and site online quickly if you don't have one yet.
More free generators & utilities
Embed this tool on your site
Blogger, teacher or toolmaker? Put this calculator on your own page — free forever, no strings. Copy the snippet below (the credit link is appreciated and keeps the tool free):
This tool is free and runs entirely in your browser. The link above is an affiliate link: we may earn a commission if you sign up, at no extra cost to you, and it never changes our honest take.