Image Tools

Free Favicon Generator

Q: Which favicon sizes do I actually need?

The minimum is a 32x32 PNG plus a multi-resolution .ico containing 16x16, 32x32 and 48x48. For full cross-platform support, add a 180x180 Apple touch icon, 192x192 and 512x512 Android Chrome icons (also used by PWA manifests).

Q: What is the .ico file and why is it special?

The .ico format is a container that can hold several images at different sizes in one file. Old browsers pick the closest match. Our tool bundles 16x16, 32x32, 48x48 and 64x64 into a single favicon.ico using PNG data, which is supported by every modern browser and Windows Vista and later.

Q: Should I use Cover or Contain fit mode?

Use Cover for images that fill the frame nicely (photos, icons that are already square). Cover centre-crops your source to a square. Use Contain for wide or tall logos — Contain fits the entire image inside the square and adds transparent padding around it.

Q: Where do I put the favicon files?

Put favicon.ico in the root of your website (your-domain.com/favicon.ico). Browsers check this location automatically. Put the other PNG sizes anywhere and reference them via link tags in your HTML head — the snippet we provide uses the root path for simplicity.

Q: What HTML do I need to add to my site?

At minimum, add a link to favicon.ico. For full support, add link tags for the 32x32 PNG, the Apple touch icon, and the Android Chrome icons. Our tool generates a ready-to-paste HTML snippet that covers all of them.

Q: Can I use a photo as a favicon?

You can, but photos rarely work well at 16x16 — they become indistinguishable mush. Simple, high-contrast logos or single letters read best at that size. If you must use a photo, choose one with a clear central subject and use Cover fit mode.

Q: Is this favicon generator free?

Yes. It is 100 percent free, requires no sign-up, and runs entirely in your browser. No watermarks, no file limits, no premium tier.

Upload one image → get every favicon size you need. 8 PNG sizes plus a multi-resolution .ico file, all generated in your browser. Nothing uploaded.

Instant Preview 100% Private .ico Bundle Included HTML Snippet

Source & Settings

Drop your logo here

or click to browse your device

PNG · JPG · WebP · SVG

Generated Favicons

No favicons yet

Upload an image in the left panel to generate all sizes

What Is a Favicon?

A favicon (short for "favourite icon") is the tiny image that appears next to a page title in a browser tab, in bookmarks, in browser history, and sometimes in search results. It's an essential branding asset — even though most visitors never consciously notice it, a missing favicon looks unprofessional, and a good one makes your site feel polished and trustworthy.

The favicon sizes that matter

Size	Purpose	Priority
16×16	Classic browser tab (low-DPI)	Essential
32×32	Browser tab (retina / HiDPI)	Essential
48×48	Windows taskbar and desktop shortcuts	Recommended
64×64	Windows Explorer large icon view	Optional
128×128	Mac Chrome and Safari tabs	Optional
180×180	Apple touch icon — iOS home screen	Recommended
192×192	Android home screen + PWA manifest	Recommended
512×512	PWA splash screen + Android adaptive icon	Recommended

Minimum viable set: a 32×32 PNG, a 16×16 PNG, and a multi-resolution favicon.ico. Everything else improves cross-platform appearance.

Why the .ico file still matters

The .ico format was designed in the Windows 1.0 era and remains the only format that can pack several sizes into one file. When a browser or OS needs a favicon, it requests favicon.ico from the site root by default. Because the file contains multiple resolutions, the system picks the best one for the current context — 16×16 for a tab, 32×32 for a taskbar, 48×48 for a shortcut.

Our tool builds a .ico file that contains 16, 32, 48 and 64-pixel PNG-encoded images. This "PNG-in-ICO" format is supported by every modern browser and Windows Vista onwards.

Contain vs Cover fit

Contain — fits the entire source image inside the square, adding transparent padding where needed. Safe for wide logos, tall logos, and any non-square source. The whole design stays visible, just smaller.
Cover — centre-crops the source to a square, filling the entire frame. Better for photos or already-square icons where you want the design to fill the space. Parts of the original may be cropped off.

When in doubt, use Contain — it never cuts off important content.

Design tips for readable favicons

Simplify. At 16×16, anything complex becomes a smudge. Reduce to one shape or one letter.
High contrast. A dark logo on a light background reads better than mid-tones.
Avoid tiny text. Company names under 4 characters can work; longer names cannot.
Use a bold letter as a fallback. Many famous favicons are just a single letter in a coloured square — clean and instantly recognisable.
Test at 16×16. Shrink your design to 16px and see if it still says something. Our preview does this for you.
Consider dark mode. If your favicon is mostly white, it disappears on dark browser themes. Either add a background colour or design a two-tone version.

Adding favicons to your site

Favicon discovery works in two ways:

Automatic: browsers request /favicon.ico from your site root and use it if it exists. No HTML needed.
Explicit: HTML <link> tags in your <head> tell browsers exactly which files to use. This is required for Apple touch icons and Android Chrome icons.

The snippet generated by this tool combines both approaches — the automatic favicon.ico path plus explicit links for the PNG sizes that need them.

Why does my favicon not update?

This is the single most common favicon complaint. Browsers cache favicons aggressively — sometimes for weeks — because they're requested on nearly every page load. To force a refresh:

Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac).
Open the favicon URL directly: navigate to your-site.com/favicon.ico and force-reload.
Clear browser cache in settings.
In development, append a version query: favicon.ico?v=2 — this bypasses the cache until you bump the number.

Common use cases

New Websites

Generate a complete favicon set from a single logo file.

PWA Icons

Create the 192 and 512 icons required by a PWA manifest.

E-commerce

Give product shops a polished brand identity in browser tabs.

Blogs

Add a personal touch with an author-avatar favicon.

Web Apps

Provide Apple touch icons so home-screen shortcuts look right.

Rebranding

Update every favicon size after a logo redesign.

Client Sites

Quickly generate favicons for client handoffs and agency work.

Documentation Sites

Add favicons to developer docs, READMEs and internal tools.

Privacy and security

This favicon generator runs entirely in your browser. Images are processed with the Canvas API, the .ico file is assembled with typed arrays in JavaScript, and every download uses URL.createObjectURL — no network requests, no uploads, no storage. Your logo never leaves your device.

Frequently Asked Questions

What is a favicon?

A favicon (short for favourite icon) is the small image that appears next to a page title in a browser tab, in bookmarks, and in some search results. It is usually 16×16 or 32×32 pixels and served as a .ico or .png file.

Which favicon sizes do I actually need?

The minimum is a 32×32 PNG plus a multi-resolution .ico containing 16×16, 32×32 and 48×48. For full cross-platform support, add a 180×180 Apple touch icon, 192×192 and 512×512 Android Chrome icons (also used by PWA manifests).

What is the .ico file and why is it special?

The .ico format is a container that can hold several images at different sizes in one file. Old browsers pick the closest match. Our tool bundles 16×16, 32×32, 48×48 and 64×64 into a single favicon.ico using PNG data, which is supported by every modern browser and Windows Vista and later.

Should I use Cover or Contain fit mode?

Use Cover for images that fill the frame nicely (photos, icons that are already square). Cover centre-crops your source to a square. Use Contain for wide or tall logos — Contain fits the entire image inside the square and adds transparent padding around it.

Does a transparent background work for favicons?

Yes. Transparent PNGs work in every modern browser, and the .ico we generate preserves transparency. Some platforms (older Windows shortcuts, certain RSS readers) show transparent icons on a white or black background, so if you want predictable output, add a background colour.

Where do I put the favicon files?

Put favicon.ico in the root of your website (your-domain.com/favicon.ico). Browsers check this location automatically. Put the other PNG sizes anywhere and reference them via link tags in your HTML head — the snippet we provide uses the root path for simplicity.

What HTML do I need to add to my site?

At minimum, add a link to favicon.ico. For full support, add link tags for the 32×32 PNG, the Apple touch icon, and the Android Chrome icons. Our tool generates a ready-to-paste HTML snippet that covers all of them.

Why does my favicon not update in the browser?

Browsers cache favicons aggressively — sometimes for days. Try a hard refresh (Ctrl+F5 or Cmd+Shift+R), open the favicon URL directly, or clear your browser cache. In development, appending a version query string like favicon.ico?v=2 forces a refresh.

Can I use a photo as a favicon?

You can, but photos rarely work well at 16×16 — they become indistinguishable mush. Simple, high-contrast logos or single letters read best at that size. If you must use a photo, choose one with a clear central subject and use Cover fit mode.

Is this favicon generator free?

Yes. It is 100% free, requires no sign-up, and runs entirely in your browser. No watermarks, no file limits, no premium tier.