Favicon Generator
This favicon generator creates favicons in every size your site needs — from a single letter, short text, emoji, gradient, or an uploaded image. One click downloads a ZIP containing a multi-size favicon.ico, the 16x16, 32x32, 48x48, 64x64, 128x128 PNGs, the 180x180 Apple Touch Icon, 192x192 & 512x512 PWA icons, padded maskable icons, a Windows tile, a scalable favicon.svg (optionally with dark-mode colors), a site.webmanifest, browserconfig.xml, and the <link> snippet for your <head>. Everything is rendered in your own browser with the canvas API — your logo is never uploaded, there is no daily limit, no signup and no watermark.
What favicon sizes do you actually need?
Browsers, operating systems and app launchers all request different icon sizes. Rather than guess, ship the standard set below — it is exactly what this generator packages into the ZIP. The 16 and 32 pixel icons are what most people see in a browser tab; the 180 pixel Apple Touch Icon is what iOS uses on the home screen; the 192 and 512 pixel icons feed Android and Progressive Web App installs.
File Size Where it is used favicon.ico16 + 32 + 48 Legacy /favicon.ico requests, RSS readers, older browsers favicon-16x16.png16×16 Browser tab, bookmarks bar favicon-32x32.png32×32 Browser tab on retina, taskbar shortcuts favicon-48x48.png48×48 Windows site icons, desktop shortcuts apple-touch-icon.png180×180 iOS / iPadOS home screen (Apple Touch Icon) android-chrome-192x192.png192×192 Android home screen, PWA install android-chrome-512x512.png512×512 PWA splash, store listings maskable-icon-192x192.png, -512x512.png192 / 512 Android adaptive icons (purpose: maskable, padded safe zone) favicon.svgscalable Modern browsers, crisp at any DPI
How to add the favicon to your website
Upload the files from the ZIP to your site root (the same folder as your index.html), then paste these tags into the <head> of every page. The generator includes this exact snippet in the download as README-paste-into-head.html, and the "Copy <head> snippet" button above copies it instantly:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
After deploying, do a hard refresh (Ctrl/Cmd+Shift+R) — browsers cache favicons aggressively, so an old icon can linger for a while. Modern browsers read the PNG and SVG icons from the <link> tags above, but plenty of software still blindly requests /favicon.ico from the root — which is why the ZIP ships a real multi-size .ico too.
PWA icons and the web manifest
To make your site installable as a Progressive Web App, browsers read a site.webmanifest that lists your icons, name, theme color and display mode. The ZIP ships a starter manifest referencing the 192 and 512 PNGs. To customise the name, short name, theme and background colors, display mode and to add an Android adaptive icon, open our dedicated web manifest generator and our maskable icon generator — the maskable version adds the safe-zone padding Android needs so your logo is never clipped by the circular launcher mask.
The Apple Touch Icon, explained
The Apple Touch Icon is the icon iOS and iPadOS display when a visitor taps Share → Add to Home Screen in Safari. The modern recommended apple touch icon size is 180x180 , supplied as a square apple-touch-icon.png with square corners — iOS automatically rounds the corners for you, so you should never round them yourself. iOS also ignores transparency and composites the icon on a solid tile, so the source must be opaque. You may still see rel="apple-touch-icon-precomposed" in old templates; that variant disabled an obsolete gloss effect and is no longer needed, so plain rel="apple-touch-icon" is correct. For pixel-perfect coverage of older iPads and iPhones you can also ship 167x167, 152x152 and 120x120 — generate the full set with rounded-corner previews in our Apple Touch Icon generator . The HTML is simply <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> in your <head>.
Letter, emoji, gradient or your own image
No logo yet? Generate a clean text favicon from one or two characters, drop in an emoji for a playful mark, or build a smooth two-color gradient with a letter on top. Already have artwork? Upload a square PNG, JPG or SVG and the tool scales it to every size. Because favicons render as small as 16×16, favour high contrast and a simple shape — fine detail and thin text disappear in a browser tab. Whichever route you choose, you get the complete cross-platform icon set: favicon, Apple Touch Icon and PWA icons, ready to paste in under a minute.
favicon generator
favicon maker
favicon from text
emoji favicon
gradient favicon
apple touch icon
pwa icons
favicon png
favicon ico
favicon from image
favicon all sizes
site webmanifest
© 2026 hjLabs.in · Built on Cloudflare Workers