A missing or low-quality favicon is one of those small details that quietly undermines trust — a blank or pixelated icon in a browser tab looks unfinished, even if the rest of the site is polished. Generating a proper set takes seconds once you have the right tool.
This guide covers how to generate a favicon for free, what sizes you actually need, and how to wire it into your site's HTML.
Key Takeaway: A complete favicon set isn't one file — it's several PNG sizes plus a legacy favicon.ico, each used in a different context (browser tab, bookmark, mobile home screen).
Why You Need More Than One Size
- Browser tabs typically render the smallest sizes (16×16, 32×32)
- Bookmarks and history often reuse the 32×32 or 48×48 version
- Mobile home screens (when a site is "added to home screen") need a larger apple-touch-icon, usually 128×128 or larger
- Legacy support — older browsers and some crawlers still look specifically for
favicon.icoat the site root
What to Upload for Best Results
A square image with a transparent background gives the cleanest result, since favicons appear on a different background color depending on context — a white browser tab, a dark bookmark bar, a colored home screen. Logos with a solid square background can look like they have an unwanted box around them in some contexts.
The Standard Size Set
| Size | Typical use |
|---|---|
| 16×16 | Browser tab (smallest, most common) |
| 32×32 | Browser tab on high-DPI displays, taskbar |
| 48×48 | Windows site icons |
| 64×64 | Desktop shortcuts |
| 128×128 | Chrome Web Store, some app icons |
| 256×256 | High-resolution displays, app icons |
Tip: Always keep favicon.ico at your site's root (/favicon.ico) even if you're also using the modern PNG <link> tags — some browsers and tools still look for it there directly.
Step by Step: How to Generate a Favicon
TinyPNG Now includes a free favicon generator that runs entirely in your browser.
- Open the Favicon Generator tool and upload a square image, ideally a transparent PNG.
- Preview the icon rendered at every standard size from 16×16 up to 256×256.
- Copy the ready-made
<link>tags to paste into your site's<head>. - Download the ZIP containing
favicon.icoand every PNG size, then upload them to your site's root folder.
Frequently Asked Questions
What sizes are included in the favicon ZIP?
16x16, 32x32, 48x48, 64x64, 128x128 and 256x256 PNG files, plus a favicon.ico file built from the 32x32 size.
What image should I upload for best results?
A square PNG with a transparent background works best, since favicons are typically displayed on varying backgrounds across browser tabs, bookmarks and home screens.
Is the favicon generator free?
Yes, completely free with no signup and no limit on how many times you can generate favicons.
How do I add the favicon to my website?
Upload the downloaded files to your site's root folder, then paste the copied HTML snippet into the <head> section of your pages.
Is my image uploaded to a server to generate the favicon?
No. Every size is generated using the Canvas API entirely in your browser, and the ZIP is built locally with JSZip. Your image is never uploaded anywhere.
Summary: Upload a square image to the free TinyPNG Now favicon generator, copy the HTML snippet, download the ZIP — free, private, and instant.
Ready to build your favicon set?
Free, private, and instant — no signup required.
Try the Favicon Generator →