Favicon Generator
Turn an image or a couple of characters into every favicon size you need, plus a real favicon.ico.
Preview and download each size
HTML to paste in <head>
site.webmanifest
DownloadHow to use this favicon generator
A favicon is the small icon browsers show in tabs, bookmarks, history and search results, and it is also what shows up when someone adds your site to their phone's home screen. This tool builds every size a modern site realistically needs from a single source: a 16×16 and 32×32 classic favicon, a 48×48 for Windows, a 180×180 apple-touch-icon for iOS, and 192×192 / 512×512 icons used by web app manifests and Android home screens. It also packs the 16, 32 and 48px images into one realfavicon.ico file using a hand-written encoder that writes a valid ICONDIR header and ICONDIRENTRY table, the same structure any image editor produces, so older browsers that only look for/favicon.ico still find one.
Start with either an image (a PNG or SVG logo works best; JPG and WebP are also supported) or the text/emoji mode if you just want quick initials on a coloured background. In image mode the source is scaled to fit inside a square canvas without cropping, so non-square logos keep their proportions and any transparency in the original file is preserved. In text mode you pick a background colour, a text colour, a corner radius (0 for a square icon, higher for rounded corners, all the way to a circle) and a system font, and everything is rendered on a canvas in your browser.
Once you click Generate, download the individual PNGs or the combined favicon.ico, then copy the HTML snippet into your site's <head> and drop the downloaded files (includingsite.webmanifest) into your site's root folder next to index.html. If your icon looks blurry at 16px, try a simpler design with less fine detail — very small favicons only have a handful of pixels to work with, so bold shapes and high-contrast colours read far better than intricate logos. Nothing you upload or type here is sent anywhere; the image processing, text rendering and ICO packing all happen locally in your browser using the Canvas API.
Favicon Generator: frequently asked questions
What sizes do I actually need?
Modern browsers only need a 32x32 (or SVG) favicon and a 180x180 apple-touch-icon. This tool also gives you 16, 48, 192 and 512px PNGs and a combined favicon.ico so you are covered for old browsers, Android home screens and PWA manifests.
Is the favicon.ico file a real ICO file?
Yes. It is built in your browser with a hand-written ICO encoder that packs 16x16, 32x32 and 48x48 PNG images into a proper ICONDIR/ICONDIRENTRY structure, the same format image editors produce. It is not just a renamed PNG.
Does this upload my image anywhere?
No. Everything happens in canvas and FileReader APIs in your browser. Your image, text and generated files never leave your device.
Can I make a favicon from text or an emoji instead of an image?
Yes, switch to the Text/emoji tab, type one or two characters, and pick a background colour, text colour, corner radius and font. It renders the same way an uploaded image would.
Where do I put the generated files?
Put favicon.ico, the PNG files and site.webmanifest in the root of your site, then paste the generated <link> tags into your HTML <head>.