<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <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" />
{
"name": "My App",
"short_name": "My App",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}About Favicon Generator — ICO, PNG & Apple Touch Icons
A favicon is the small icon browsers show in tabs, bookmarks, and history — and modern sites need it in several sizes, plus an apple-touch-icon for iOS home screens and PNG icons for the web app manifest. This favicon generator turns a single source — an uploaded image or a piece of text or an emoji on a colored background — into the whole set at once.
Everything is rendered on-device with the canvas API. Your image is resized to 16, 32, 48, 180, 192, and 512 pixels right in the browser, packed into a multi-size favicon.ico, and offered as individual PNG downloads. Nothing is uploaded to a server, so it works offline and your artwork never leaves your machine.
You also get a ready-to-paste HTML link-tag snippet and a web-app manifest, so wiring the icons into your site is a copy-and-paste away.
Features
- Generate a full favicon set (16–512px) from an image or text/emoji
- Hand-assembled multi-size favicon.ico plus per-size PNG downloads
- apple-touch-icon, web manifest, and the HTML <link> snippet included
- Fully offline — resizing happens on-device via canvas, nothing uploaded
How to use
- Pick a source: upload an image, or switch to Text/Emoji and type a character with a background color.
- Preview the rendered icon at each standard size.
- Download the favicon.ico, the individual PNGs, and the apple-touch-icon.
- Copy the HTML <link> snippet and manifest into your site’s <head>.
Frequently asked questions
What favicon sizes do I actually need?
A 16×16 and 32×32 cover desktop browser tabs, 48×48 is used by some browsers and Windows, 180×180 is the apple-touch-icon for iOS, and 192×192 / 512×512 are referenced by the web app manifest for Android and PWAs. This tool generates all of them.
Is the .ico a real multi-size icon file?
Yes. The tool hand-assembles a standard ICO container with one directory entry per size (16/32/48) and embeds PNG-encoded images, which every current browser supports. It is a genuine multi-resolution favicon.ico, not just a renamed PNG.
Are my images uploaded anywhere?
No. The image is decoded and resized entirely in your browser using the canvas API. There is no server round-trip, so the generator works offline and your source artwork never leaves your device.
Can I make a favicon from text or an emoji?
Yes. Switch the source to Text/Emoji, type a letter or emoji, and choose a background color. The character is drawn centered on the canvas and exported at every favicon size — handy when you do not have a logo yet.
Where do I put the generated files and the snippet?
Place the favicon.ico, PNGs, apple-touch-icon, and manifest at the root of your site, then paste the provided <link> and <meta> tags into the <head> of your HTML. The snippet already points at the standard file names.
Related tools
Everything runs locally in your browser — your input is never uploaded.