Every icon size your site needs, from one logo
The favicon is the smallest branding asset you own and one of the most visible: it lives in every browser tab, bookmark list, history entry and phone home-screen shortcut your visitors create. A site without one looks unfinished; a blurry one looks careless. The catch is that “a favicon” is actually a small family of files — a classic .ico, several PNG sizes, an Apple touch icon, Android home-screen sizes — and producing them by hand is tedious. This generator takes one logo image and produces the full set, plus the copy-paste HTML, entirely in your browser.
How to generate your favicons
- Drop a logo image — square, 512×512 or larger, gives the best results.
- Click Generate favicons. Previews of every size appear: 16, 32, 48, 180, 192 and 512 px.
- Download the bundled
favicon.ico(16+32+48 in one file) and the PNG sizes you need. - Copy the provided HTML snippet into your site's
<head>.
What each size is for
16×16 is the actual browser-tab icon — the one users see most. 32×32 serves sharper tabs on standard displays and Windows taskbar pins. 48×48 appears in desktop shortcuts. 180×180 is the Apple touch icon used when someone adds your site to an iPhone home screen. 192×192 and 512×512 are the Android/PWA equivalents, the larger also serving splash screens. The classic favicon.ico bundles the three small sizes so legacy browsers and crawlers that request /favicon.ico by convention get the right pixels.
Design rules for icons that survive 16 pixels
- Simplify ruthlessly. Wordmarks and detailed emblems turn to mush at tab size; a single letter, monogram or bold symbol survives.
- Fill the frame. Whitespace that looks elegant at 512 px makes the 16 px version microscopic — crop tight before generating.
- Test contrast both ways: tabs come in light and dark themes; a mid-grey icon vanishes on both.
- Non-square logos are centre-cropped to square automatically — if the crop guesses wrong, pre-crop with our Crop tool.
Installing on your site
Upload favicon.ico to your site root, the PNGs wherever you serve assets, and paste the snippet into your template's head. WordPress users can skip the code entirely: Appearance → Customize → Site Identity accepts the 512 px PNG and handles the rest. Either way, the tab icon updates after a refresh (browsers cache favicons enthusiastically — a hard refresh helps).
One drop, six sizes, one paste — and your site stops being the blank-tab stranger in everyone's bookmark bar.
Quick reference
| Property | Detail |
|---|---|
| Input | Any image (square 512px+ recommended) |
| ICO output | favicon.ico with 16+32+48 px bundled |
| PNG outputs | 16, 32, 48, 180 (Apple), 192, 512 px |
| HTML | Ready-to-paste snippet included |
| Non-square input | Auto centre-cropped to square |
| WordPress shortcut | Use the 512px PNG in Site Identity |
| Processing | 100% in-browser, no upload |
Frequently asked questions
What image should I start from?
A square PNG of your logo at 512×512 or larger, ideally a simplified mark rather than a full wordmark. Transparent backgrounds are preserved in the PNG outputs.
Do I really need all six sizes?
For a complete professional setup, yes — different platforms request different sizes. Minimum viable: favicon.ico in the site root plus the 180px Apple touch icon. The rest cost nothing extra here.
Why does my new favicon not show up?
Browser favicon caches are notoriously sticky. Hard-refresh (Ctrl+F5), try a private window, or append ?v=2 to the icon URLs in your HTML to force a re-fetch.
My logo is rectangular — what happens?
The generator centre-crops it to a square before scaling. If the automatic crop cuts the wrong part, crop the logo yourself first with the Crop Image tool, then generate.