Favicon Generator: Every Size & Format Your Website Needs in 2026
By AZ Utils Editorial · · 9 min read
That tiny icon in the browser tab is your website's smallest but most persistent piece of branding. It shows up in tabs, bookmarks, history, search results and on phone home screens. Get it right and your site looks polished and trustworthy; get it wrong — or skip it — and you get a generic blank square. A favicon generator creates every size and format modern devices expect, from one image, in seconds.
This guide explains what a favicon is, the sizes and files you actually need in 2026, the exact HTML to add, and how to generate a complete set — for developers, designers, bloggers and small business owners building a credible web presence.
Key Concepts: What a Favicon Is (and Isn't)
A favicon ("favorite icon") is the small image representing your website across browser UI and devices. What started as a single 16×16 .ico file has grown into a small family of icons, because different contexts need different sizes and formats.
The sizes and files you actually need
- favicon.ico — a multi-resolution ICO (16×16, 32×32, 48×48) for legacy browsers and the address bar.
- 32×32 & 16×16 PNG — standard modern browser tabs.
- 180×180 apple-touch-icon — when users add your site to an iOS home screen.
- 192×192 & 512×512 PNG — Android / PWA icons referenced from the web app manifest.
A favicon generator produces all of these from a single source image so you don't have to export each one manually.
Formats explained
- ICO — a container that holds multiple sizes in one file; still used for
favicon.ico. - PNG — crisp, transparent, used for most modern sizes.
- SVG — a scalable favicon that looks sharp at any resolution (supported by modern browsers as an optional enhancement).
The web app manifest
For Android and Progressive Web Apps, a site.webmanifest (or manifest.json) file lists your 192px and 512px icons so the OS can use them on the home screen and splash screen. Good generators output this file too.
In short: A favicon is a set of small icons in several sizes and formats (ICO, PNG, and optionally SVG) plus a web manifest. A favicon generator creates the whole set from one image and gives you the HTML to install it.
Step-by-Step Guide: How to Create a Favicon
Method 1 — Using our free Favicon Generator (fastest)
- Open the Favicon Generator.
- Upload a square image — ideally 512×512 px, PNG with a transparent background.
- Preview how it looks at small sizes and in a browser tab.
- Click Generate to produce the full icon set (ICO + all PNG sizes).
- Download the package and add the provided HTML to your site's
<head>.
Method 2 — Installing the favicon (the HTML)
Place the generated files in your site root and add this to every page's <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<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="manifest" href="/site.webmanifest">A minimal site.webmanifest referencing the Android icons:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Try Our Free Favicon Generator
Turn one image into a complete favicon set. Our free online Favicon Generator creates every size browsers and phones need, plus ready-to-paste HTML — no design software required.
- ✅ Generates ICO + all PNG sizes from one image
- ✅ iOS apple-touch-icon and Android/PWA icons included
- ✅ Copy-paste HTML snippet provided
- ✅ Free, fast, runs in your browser
Real-World Examples
Example 1 — A new blog
A blogger uploads their 512px logo, generates the set, drops the files in the site root and pastes five lines into the header template. Every page now shows a branded tab icon and a clean home-screen icon on mobile.
Example 2 — A small business website
A bakery uses a simplified version of its logo — just the initial letter — because the full logo is unreadable at 16px. The generator's small-size preview makes the problem obvious before publishing.
Example 3 — A PWA
A web app needs proper 192px and 512px icons plus a manifest so it installs cleanly on Android with a real icon and splash screen. The generator produces all three in one step.
Common Mistakes to Avoid
- Using only one size. A single 16×16 looks blurry on retina tabs and terrible as a home-screen icon. Generate the full set.
- Uploading a detailed logo. Fine detail disappears at 16px. Simplify to a symbol or initial for small sizes.
- Forgetting the apple-touch-icon. Without it, iOS uses a low-quality screenshot when users add your site to their home screen.
- Skipping the manifest. Android and PWAs need it for proper home-screen icons.
- Non-square source images. Favicons are square; a rectangular source gets cropped or distorted.
- Browser caching confusion. Favicons cache aggressively — hard-refresh or version the filename when testing changes.
Best Practices
- Start from a 512×512 square PNG with a transparent background.
- Design for legibility at 16px — favour a bold symbol over fine detail.
- Include the full set: ICO, 16/32 PNG, 180 apple-touch, 192/512 Android, plus the manifest.
- Test on a real device and in both light and dark browser themes.
- Version the filename (or clear cache) when updating to defeat aggressive caching.
- Keep the icon consistent with your wider brand for instant recognition.
Frequently Asked Questions
What size should a favicon be?
Provide several: a multi-size favicon.ico (16/32/48), 16×16 and 32×32 PNGs for tabs, a 180×180 apple-touch-icon for iOS, and 192×192 and 512×512 PNGs for Android and PWAs. Start from a 512×512 source image.
What format should a favicon be?
Use ICO for favicon.ico, PNG for the modern sizes, and optionally an SVG for a scalable icon. A generator outputs all of these from one image.
Where do I put the favicon files?
Place them in your website's root directory and reference them with link tags in the <head> of every page, including a link to your web manifest.
Why isn't my new favicon showing up?
Browsers cache favicons aggressively. Hard-refresh, clear the cache, or add a version query string (or new filename) to force the update.
Do I need an apple-touch-icon and a manifest?
Yes if you want a quality icon when users add your site to an iOS home screen (apple-touch-icon) or install it on Android as a PWA (the manifest with 192px and 512px icons).
Conclusion
A favicon is small, but it's the most-seen piece of your brand on the web. The modern requirement isn't one file — it's a coordinated set of sizes and formats plus a manifest, all best designed from a single clean, square source image. Generate the full package, paste in the HTML, test on a real device, and your site will look sharp everywhere from browser tabs to home screens.
👉 Generate your complete favicon set now →
Related Resources
- Image Compressor — shrink images before you publish them
- PNG to WebP Converter — convert source graphics to smaller WebP
- WebP to PNG Converter — get a PNG master from a WebP file
