Favicon Generator
Generate a complete favicon package — favicon.ico, PNG icons, an Apple touch icon and a web manifest — from an image or a couple of letters. Copy the HTML and you're done. All in your browser.
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
Source
Background & corners
How to generate a favicon
- 1
Pick Image and upload one, or choose Text and type 1–4 characters.
- 2
Set a background color and rounded corners to taste.
- 3
Click Generate to build every required size plus a web manifest.
- 4
Download the ZIP and paste the HTML snippet into your site's <head>.
About the Favicon Generator
A complete favicon is more than one file — modern browsers and devices want several sizes plus a web manifest. The generator builds the whole package (favicon.ico, PNG sizes, an Apple touch icon, Android icons and the manifest) from an image or a couple of letters, and gives you the exact HTML to paste into your site's head.
A complete favicon is more than one file
It used to be enough to drop a single favicon.ico in your site's root. Today, browsers and
devices ask for the icon at several specific sizes for different places: small icons for browser tabs
and bookmarks, a 180 px Apple touch icon for when someone adds your site to their iPhone home screen,
and 192 and 512 px icons that Android and installable web apps read from a manifest. Serving the wrong
size means a blurry tab or a generic placeholder where your brand should be. This generator builds the
whole set in one pass so you don't have to assemble it by hand.
Start from an image or a couple of letters
In Image mode, upload a square logo or mark and it's rendered down to each required size. In Text mode, type one to four characters to make a clean monogram — handy when you don't have a logo yet — and choose the text and background colors. Either way you can toggle a background fill and round the corners, with a live preview of how the icon reads as a tab and as a rounded home-screen tile. Designing for the smallest size first helps: at 16 px, a single bold letter or simple shape stays legible where fine detail turns to mush.
Installing it on your site
Download gives you a ZIP containing favicon.ico, the PNG sizes, an Apple touch icon, the
Android icons, a ready-made site.webmanifest, and the exact HTML to paste into your page's
<head>. Drop the files in your site root, paste the tags, and you're done — no build
step required. The whole package is generated in your browser, so nothing is uploaded. For the full
reasoning behind which sizes and tags matter, see our
complete favicon sizes and formats guide; if you only need a
standalone multi-size icon, the icon converter handles that.
Frequently asked questions
Which files are included in the package?
favicon.ico, 16/32/48 px PNGs, a 180 px Apple touch icon, 192 & 512 px Android icons, a site.webmanifest, and a README with the HTML.
How do I install the favicon?
Put the files in your site's root folder and paste the provided <link> tags into your page's <head>.
Can I make a favicon from text instead of an image?
Yes — switch to Text mode and type 1–4 characters, then pick your text and background colors.
Are my images uploaded to a server?
No. The entire package is generated in your browser; nothing is uploaded.
Do I still need a favicon.ico file?
Yes — a multi-size favicon.ico covers legacy browsers and is requested by default. The package includes it alongside the modern PNG sizes and the web manifest.
Where do the favicon files go?
Place them in your site's root folder and paste the provided <link> tags into your page's <head>. The included site.webmanifest wires up the Android and PWA icons.