What Is a Favicon? Everything You Need to Know (And How to Create One Free)

In this guide you will learn exactly what a favicon is, what favicons are used for, which sizes you need, and how to create and add one to your website for free in just a few minutes.

What Is a Favicon?

A favicon is the small icon displayed in the browser tab next to your page title. The word "favicon" is short for "favorite icon" — the name comes from Internet Explorer, which stored these icons when users added a site to their Favorites.

Today, favicons appear across every major browser — Chrome, Firefox, Safari, Edge — and across every major operating system including Windows, macOS, iOS, and Android.

At its most basic, a favicon is a 16×16 or 32×32 pixel image that represents your website visually. But modern favicon setups include much larger sizes too — up to 512×512 pixels — so your icon looks sharp everywhere it appears, from browser tabs to phone home screens to search results.

If your website does not have a favicon, browsers display a generic grey globe or document icon in its place. This immediately signals to users that the site is either unfinished or unprofessional.

What Are Favicons Used For?

Most people think of favicons as just the browser tab icon. But favicons actually appear in many more places across the web and on your devices.

Browser tabs — the most visible location. Your favicon is shown constantly while a visitor has your page open. When someone has ten tabs open, your favicon is how they find yours quickly.

Bookmarks and saved pages — every major browser shows your favicon next to your site name in the bookmark bar and bookmark menu. A recognisable favicon makes your site easier to find later.

Browser history — when users search their browsing history, favicons appear next to each URL so they can identify sites without reading the full address.

Google mobile search results — Google shows your favicon next to your URL on mobile search results pages. A strong, recognisable favicon makes your listing stand out and can improve click-through rates.

iPhone and iPad home screen icons — when a user adds your website to their iOS home screen, the Apple Touch Icon (a 180×180px version of your favicon) becomes the app icon. Without this, iOS takes a blurry screenshot of your homepage instead.

Android home screen shortcuts — similarly, Android uses a 192×192px icon when a user saves your site as a home screen shortcut or installs it as a Progressive Web App (PWA).

Progressive Web App splash screens — when your PWA loads on Android, the 512×512px icon is shown on the splash screen while the app initialises.

Password manager icons — tools like 1Password, Bitwarden, and LastPass show your favicon next to saved login credentials so users can identify accounts at a glance.

Link previews in messaging apps — some apps and platforms pull your favicon when generating a preview card for a shared link.

Why Does Your Website Need a Favicon?

Favicons might look tiny, but they do meaningful work for your website:

• Professionalism — a site with no favicon instantly looks incomplete. A clean favicon signals that attention has been paid to every detail.
• Brand recognition — users who visit your site regularly start to associate your favicon with your brand, making you easier to find among open tabs.
• Better tab management — visitors who keep your site open alongside others can find your tab immediately by the icon, without reading the page title.
• SEO click-through rates — Google shows your favicon in mobile search results. A distinctive icon helps your listing stand out against competitors.
• Home screen presence — a proper Apple Touch Icon and Android Chrome icon means your site looks like a native app when saved to a phone's home screen.
• Trust signals — users are subtly more trusting of sites with complete, polished details — including a favicon.

What Favicon Sizes Do You Need?

Different browsers, devices, and operating systems each use a different favicon size. You need to provide multiple sizes to cover all of them. Here is every size you need and what it is used for:

• 16×16px (favicon-16x16.png) — the standard browser tab size used by Chrome, Firefox, and Edge on standard-resolution screens.
• 32×32px (favicon-32x32.png) — used by Retina and high-DPI displays for browser tabs, and by Safari's Reading List, Windows taskbar, and pinned site icons.
• 48×48px (favicon-48x48.png) — used by Windows for site icons in the taskbar and Start menu.
• 180×180px (apple-touch-icon.png) — the Apple Touch Icon. Used by iPhone and iPad when a user adds your site to their home screen. This is one of the most important sizes to get right.
• 192×192px (android-chrome-192x192.png) — used by Android Chrome for home screen shortcuts and as the PWA icon in the app drawer.
• 512×512px (android-chrome-512x512.png) — used by Android as the splash screen image when a PWA is loading.
• favicon.ico (multi-size) — a legacy format that bundles multiple icon sizes into a single file. Still needed for compatibility with older browsers, certain email clients, and some CMS platforms that look specifically for favicon.ico in the root directory.
• site.webmanifest — a JSON configuration file that tells browsers the name of your app and which icons to use for PWA installation. Required for Android "Add to Home Screen" prompts to work correctly.

The good news: our free favicon generator creates every single one of these files automatically from a single image. You do not have to resize anything manually.

What Is the Best Image Format for a Favicon?

The format you use for your input image affects the quality of all generated favicon sizes.

PNG — the best choice for most people

• Supports transparent backgrounds, which is essential for logos and icons.
• Lossless quality — no compression artefacts.
• The generator will produce sharp favicons at all sizes from a high-resolution PNG.
• Use a square PNG of at least 512×512 pixels for best results.

SVG — ideal if you have it

• Vector format, so it scales perfectly to any size.
• Produces the sharpest possible output at all favicon sizes.
• If your designer gave you an SVG version of your logo, use that.

JPEG — works but not ideal

• No transparency support — your favicon will have a white or coloured background rectangle.
• JPEG compression can introduce artefacts that become visible at small favicon sizes.
• Use PNG or SVG if you have the option.

How to Create a Favicon for Free Online

You do not need Photoshop, Illustrator, or any design tool. Our free favicon generator creates all sizes instantly in your browser.

Step 1 — Prepare your image

Use a square PNG or SVG image at least 512×512 pixels. Keep the design simple — a single letter, monogram, or simple icon works much better than a full logo with a wordmark at tiny sizes. Use a transparent background if your icon is on a dark or coloured shape.

Step 2 — Upload to the favicon generator

Go to pixelstools.online/tools/favicon-generator and drop your file onto the upload area, or click to browse. Your file never leaves your device — no upload to any server.

Step 3 — Preview your favicon at all sizes

The tool instantly previews your icon at 16×16, 32×32, and larger sizes. Check that the icon is still clear and recognisable at the smallest sizes. If it looks blurry or cluttered at 16px, simplify your design.

Step 4 — Download the ZIP

Click Download ZIP to get all favicon files in one package — every PNG size, a favicon.ico, a site.webmanifest, and a ready-to-use HTML code snippet.

Step 5 — Upload the files to your website

Extract the ZIP and upload all the files to the root directory of your site — the same folder as your homepage file. This is important. Browsers look for favicon.ico at yourdomain.com/favicon.ico automatically, so it must be in the root.

Step 6 — Add the HTML to your site

Paste the included HTML snippet into the <head> section of your website. It looks like this:

<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">

If you use WordPress, add this to your theme's header.php or use a plugin. For Next.js or Nuxt, place the files in the /public folder and add the tags to your layout component. The HTML snippet is already included in the ZIP.

Step 7 — Clear your browser cache

Browsers cache favicons heavily. After uploading, open your site in an incognito or private window to see the new favicon right away.

How to Add a Favicon to Different Website Platforms

WordPress

Go to Appearance → Customize → Site Identity and upload your square image under "Site Icon". WordPress handles the rest automatically. Or manually add the HTML snippet to your header.php.

Next.js (App Router)

Place your favicon.ico in the /app directory and Next.js picks it up automatically. Add additional sizes as metadata in your layout.tsx using the icons field in the metadata export.

Squarespace

Go to Design → Browser Icon and upload your image. Squarespace accepts PNG and ICO files.

Shopify

Go to Online Store → Themes → Customize → Theme Settings → Favicon and upload a square PNG image.

Wix

Go to Settings → Favicon and upload your image from the Wix editor.

Any HTML website

Paste the HTML snippet into the <head> of every page, or into your shared header template or layout file.

Common Favicon Mistakes to Avoid

• Using a full horizontal logo — a wide logo shrinks to an unreadable smear at 16px. Use just the icon or monogram portion of your logo.
• Low-resolution input — starting from a 64×64px image means the 512×512px output will be blurry. Always start from the largest available version of your icon.
• No transparent background — a solid white square around your icon looks odd on dark-themed browsers. Use a transparent PNG so the icon sits cleanly on any background.
• Small text in the favicon — text that looks fine on a full logo becomes completely illegible at 16px. Avoid text entirely, or use a single bold letter at most.
• Forgetting the Apple Touch Icon — many developers add the browser tab favicon but forget the 180×180px Apple Touch Icon. iOS users who save your site to their home screen will see a blurry screenshot instead of your icon.
• Not clearing the cache to test — browsers cache favicons aggressively. Always test in an incognito window after uploading a new favicon.
• Missing favicon.ico — some older browsers and certain tools only look for favicon.ico in the root directory, ignoring the HTML link tags. Always include it.

Frequently Asked Questions About Favicons

What is a favicon in simple terms?

A favicon is the tiny icon you see in the browser tab when you visit a website. It is also used in bookmarks, browser history, and as the app icon when someone saves your site to their phone's home screen.

What are favicons made of?

Favicons are image files — usually PNG, ICO, or SVG format. The ICO format is a legacy container that can hold multiple image sizes inside a single file. Most modern browsers use PNG or SVG favicons declared in the HTML head tags.

Do favicons affect SEO?

Favicons do not directly affect your Google ranking. However, Google shows your favicon in mobile search results, and a recognisable favicon can improve click-through rates — which does indirectly affect your SEO performance over time.

What size should a favicon be?

You need multiple sizes. The minimum is 16×16px for browser tabs, but a complete setup includes 32×32, 48×48, 180×180 (Apple Touch Icon), 192×192, and 512×512px. Our favicon generator creates all of these from a single uploaded image.

Is PNG or ICO better for favicons?

Both have their place. PNG is better quality and widely supported by modern browsers. ICO is still needed for legacy browsers and for the automatic detection that some browsers do at yourdomain.com/favicon.ico. A proper favicon setup includes both — which is exactly what our generator produces.

Can I create a favicon for free?

Yes. Use our free favicon generator — upload your image and download all sizes as a ZIP file instantly. No account, no payment, no watermark. Everything runs in your browser.

Create Your Favicon Now — Free, Instant, No Upload

Now you know what a favicon is, what favicons are used for, and exactly how to set one up on your website.

The fastest way to get it done: upload your logo or icon to our free favicon generator, download the ZIP, and follow the steps above. Takes less than five minutes.

→ Create Your Favicon Free — All Sizes, One Click

More free tools on pixelsTools:

• Image Resizer — resize images to any dimension without losing quality
• Image Compressor — reduce file size without visible quality loss
• Background Remover — remove image backgrounds for free
• Image Converter — convert between PNG, JPEG, WebP, and more
• QR Code Generator — create QR codes for free