How it works
Upload
Drop your logo into the box above — JPG, PNG or WebP. It is read locally in your browser; nothing is uploaded anywhere.
Generate
Hit “Generate favicons”. Your logo is redrawn at every standard size, and a real multi-size favicon.ico is encoded right in the page.
Download
Each file has its own download button. Upload the files to your site’s root folder and paste the install snippet into your pages.
What is a favicon, exactly?
A favicon is the small icon browsers show next to your site’s name — in tabs, bookmarks, the address bar, search results and mobile home screens. It’s tiny, but it’s one of the first things visitors associate with your brand, and a missing favicon is one of those small details that makes a site feel unfinished.
Different browsers and devices ask for different sizes, which is why one image isn’t enough. Here’s the set this page generates, and who uses what:
- favicon.ico (16, 32 & 48 px in one file) — the classic format. 16×16 shows in browser tabs, 32×32 on retina tabs and the Windows taskbar, 48×48 on Windows shortcuts. Browsers automatically check yoursite.com/favicon.ico, so keeping this file at your root covers legacy browsers without any code.
- favicon-16x16.png, favicon-32x32.png, favicon-48x48.png — PNG favicons for every modern desktop browser, referenced with
rel="icon"link tags. - apple-touch-icon.png (180×180) — what iPhones and iPads use when someone saves your site to their home screen.
- android-chrome-192x192.png & android-chrome-512x512.png — Android home-screen icons and the install icon for Progressive Web Apps (referenced from your web app manifest).
To install, put the files in your website’s root folder and add these link tags to the <head> of your pages:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The tool panel above gives you the full copy-paste snippet once you generate your pack.
Tips for a crisp favicon
- Start with a simple, bold logo. Detail disappears at 16 pixels — a single letter, mark or simplified icon beats your full wordmark. If your logo is complex, use just its most recognisable part.
- Leave breathing room. The default 5% padding stops your mark touching the edges of the tab icon; bump it to 10–15% for wide or busy logos.
- Keep the transparency. PNG sources with transparent backgrounds stay transparent in every output here, so your icon blends naturally with light and dark browser themes.
- Test in dark mode. Light-coloured logos can vanish on dark tabs. Preview the 16×16 result on a dark background — if it disappears, add a subtle dark rounded background or an outline first.
- Don’t rename the files. The install snippet above expects these exact filenames — keeping them as generated means copy, paste, done.
Common uses
- Websites & blogs — the tab icon every visitor sees, session after session.
- Portfolios & resumes — a favicon is cheap polish that signals you care about details.
- Web apps & PWAs — the 192 and 512 icons power Android home-screen installs.
- Landing pages & docs — consistent branding when readers bookmark your pages.