Free · in your browser
Favicon Generator
Drop any image and instantly create every favicon size you need — tab icons, apple-touch and Android — as crisp PNGs. Free, fast and private: your file never leaves your device.
Private by design — your image is resized locally with Canvas and never uploaded.
How to create a favicon from an image
- Drag your logo or image onto the box above (or click to browse, or paste it). A square PNG of at least 512x512 gives the sharpest icons.
- Pick a background — keep it transparent, or fill with white or black — then click Generate favicons.
- Download each size you need (16x16, 32x32, 48x48, 180x180 and 192x192) and add the HTML snippet below to your site's
<head>.
Why generate favicons from your image?
A favicon is the tiny icon that appears in browser tabs, bookmarks, history and on phone home screens — it is a small but powerful piece of branding that makes your site instantly recognisable and more trustworthy. Different platforms expect different sizes: browsers use 16, 32 and 48 pixel icons, iOS wants a 180x180 apple-touch-icon, and Android and PWAs use a 192x192 icon. This favicon maker resizes one source image into every size with smooth high-quality scaling, so your icon looks crisp everywhere, and it all happens locally in your browser — fast, free and completely private.
How to reference your favicons in HTML
Place the generated PNGs in your site root, then add these tags inside <head>:
<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="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">Favicon sizes and where each one is used
There is no single “favicon” — modern sites ship a small set of PNGs so every browser and device picks the sharpest match. This tool outputs the five sizes that cover the vast majority of real-world cases:
| Size | Filename | Where it shows up |
|---|---|---|
16x16 | favicon-16x16.png | Browser tabs and address bar on standard-DPI screens. |
32x32 | favicon-32x32.png | Tabs on high-DPI/Retina displays, Windows taskbar shortcuts. |
48x48 | favicon-48x48.png | Desktop shortcuts and some browser UI at larger scales. |
180x180 | apple-touch-icon.png | iOS and iPadOS home-screen shortcuts and Safari favourites. |
192x192 | icon-192x192.png | Android home screen and installable PWA manifest icons. |
Common use cases
- Launching a new site or blog — drop in your logo once and get the full icon set before you go live, so tabs and bookmarks look finished from day one.
- Building a PWA — the 192x192 icon plugs straight into your
manifest.jsonfor the install prompt and home-screen launcher. - Rebranding — swap a tired favicon for a refreshed mark across every size in seconds, with no design tool round-trip.
- Client & agency work — generate icons for many sites quickly without uploading client artwork to a third-party server.
Tips & gotchas
- Start big. Feed a 512x512 (or larger) square source so every size is scaled down; downscaling stays crisp, upscaling never does.
- Simplify for 16px. At tab size, fine text and thin lines turn to mush. A bold monogram or single shape reads far better than a full wordmark.
- Mind the safe area on iOS. Apple clips apple-touch-icons to a rounded tile, so keep important detail away from the corners and prefer a filled background over transparency.
- Bust the cache. Browsers cache favicons aggressively. After updating, hard-refresh or append a version query like
?v=2to the icon URLs to see the change. - Match your theme color. Pair the icons with a
<meta name="theme-color">tag so mobile browser chrome complements your brand.
Frequently asked questions
Is this favicon generator free and private?
Yes — it is 100% free with no sign-up, and completely private. Your image is resized entirely in your browser with the Canvas API, and no file is ever uploaded to a server.
What sizes does it create?
It generates the standard favicon set: 16x16, 32x32 and 48x48 for browser tabs, a 180x180 apple-touch-icon for iOS home screens, and a 192x192 icon for Android and PWAs — each as a downloadable PNG.
What image should I upload?
Use a square image at least 512x512 for the sharpest result, ideally a PNG with a transparent background. Square logos work best because favicons are square; non-square images are centred and fitted without stretching.
Do I still need an .ico file?
Modern browsers happily use PNG favicons referenced in your HTML, so the PNGs here cover almost every case. If a legacy browser needs favicon.ico, most servers also serve a PNG named favicon.ico, or you can convert one of these PNGs separately.
Why does my favicon look blurry or pixelated?
Blurriness almost always comes from upscaling — generating a 192px icon from a 64px source forces the browser to invent detail. Always start from a source that is at least as large as your biggest target (512x512 is a safe minimum). Fine details like thin text or hairline strokes also disappear at 16x16, so simplify your mark for the smallest sizes.
Should my favicon have a transparent or solid background?
Transparent works well on light browser chrome and adapts to dark mode, but a mark with thin edges can vanish against busy backgrounds. A solid background guarantees consistent contrast everywhere — especially for apple-touch-icons, which iOS renders on a rounded tile and looks best filled edge to edge.