Do I still need favicon.ico in 2024?

Yes — it is the universal fallback that every browser understands. Browsers automatically look for /favicon.ico on every page load even without any HTML hint. Skipping it means a 404 error in your server logs on every single page request, forever. It takes 30 seconds to add and the benefit is permanent.

Why does my favicon not update even after I change it?

Browsers cache favicons aggressively — often far more aggressively than regular page assets. To force an update: do a hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac), clear your browser cache entirely, or add a cache-busting query string to the link tag: href="/favicon.png?v=2". Note that favicon cache entries sometimes survive even a full cache clear — if the icon still doesn't update, try opening the favicon URL directly in a new tab and hard-refreshing that.

Does favicon size affect SEO?

Not directly — Google does not use favicon quality as a ranking signal. However, Google requires a valid, publicly crawlable favicon of at least 48×48px to display your site's icon in mobile search results. A missing or blocked favicon means no icon next to your listing, which is a small but real trust and click-through signal lost on every impression.

Should my favicon have a transparent background?

It depends on where it will be used. For browser tab favicons, a transparent background is fine — the tab background (usually gray or white) shows through cleanly. For the iOS "Add to Home Screen" icon (apple-touch-icon), you should avoid transparency. Safari fills transparent areas with black before applying the rounded mask, which typically looks wrong. Use a solid colored background — your brand color, white, or any non-black color — for the apple-touch-icon specifically.

What is a maskable icon?

A maskable icon for Android allows the OS to crop your icon into any shape the device theme requires — circle, squircle, rounded square, and so on. Standard icons that are not declared maskable get padded with white space to avoid being clipped. To make an icon maskable, all critical artwork must be contained within the center 80% of the image (the "safe zone"). Use maskable.app to check whether your icon's content falls within the safe zone before deploying. Declare the icon as maskable in your web manifest by adding "purpose": "maskable" to the icon entry.

My favicon shows in Chrome but not Firefox or Safari — why?

Cross-browser favicon issues almost always have one of three causes: (1) Wrong MIME type — your server must send Content-Type: image/x-icon for .ico files and image/png for .png files; an incorrect MIME type causes some browsers to reject the file silently. (2) Missing or incorrect rel attribute — double-check that your link tags use rel="icon" (not rel="shortcut icon", which is a legacy value). (3) Browser cache — try a hard refresh in the affected browser, or open a private/incognito window to test with a clean cache state.

Can I use a GIF or animated favicon?

Technically yes — Firefox supports animated GIF favicons and will play the animation in the tab. Chrome does not display favicon animations; it shows only the first frame. In practice, animated favicons are considered distracting and are almost never used in production websites. They can draw the eye away from the page content and tend to feel unprofessional outside of very specific creative or notification-driven contexts.

How do I generate all the required favicon sizes at once?

Use the Favicon Generator on this site — upload one square image and download all sizes from 16×16 to 512×512 with one click. No account is needed and the processing happens entirely in your browser. You can also generate a ready-to-use site.webmanifest file and a copy-paste HTML snippet at the same time.

Favicon Complete Guide: Sizes, HTML, iOS, Android & PWA

The favicon is one of the smallest files on your website but one of the most visible — it appears in browser tabs, bookmarks, shortcuts, and search results. A missing or broken favicon signals neglect. Visitors notice it even if they can't articulate why. This guide covers everything you need to know: which files you actually need, the correct HTML for every platform, how to design an icon that holds up at 16 pixels, and how to wire it all up in popular frameworks.

What Is a Favicon?

A favicon (short for "favorite icon") is the small icon a browser displays alongside your page title. The term was coined by Internet Explorer 5 in 1999, which introduced a feature that automatically fetched /favicon.ico from any site a user bookmarked. Every browser has supported the concept ever since, though the implementation details have expanded considerably.

Today a favicon appears in more places than just the browser tab:

Browser tab — the most visible location; shown next to the page title
Address bar — some browsers show the icon inline with the URL
Bookmarks and reading lists — helps users identify saved pages at a glance
Browser history — each visit in the history panel is labeled with your icon
iOS "Add to Home Screen" — your icon becomes an app-like shortcut on the device home screen
Android home screen shortcut — Chrome uses icons from your web manifest
Windows taskbar pinned sites — the icon represents your site in the taskbar
Google Search results (mobile) — Google shows a small favicon next to your site name in mobile results

Because a single icon is displayed at many different sizes and in many different contexts, modern sites need more than one 16×16 ICO file. A complete favicon setup involves several image files, a JSON manifest, and a handful of HTML link tags.

Which Favicon Sizes Do You Actually Need?

The table below lists all meaningful favicon sizes with their intended platform and use case.

Size	File	Platform / Use case
16×16	favicon-16x16.png	Browser tab (standard resolution)
32×32	favicon-32x32.png	Browser tab (HiDPI / Retina displays)
48×48	favicon-48x48.png	Windows site shortcuts and taskbar
180×180	apple-touch-icon.png	iOS Safari "Add to Home Screen"
192×192	icon-192.png	Android Chrome home screen shortcut
512×512	icon-512.png	Android PWA splash screen
Any (multi-size)	favicon.ico	Legacy browsers (IE, old Edge) — universal fallback
Any (vector)	icon.svg	Modern browsers (Chrome 80+, Firefox 84+) — scales perfectly

What you actually need for most sites

You do not need to ship all eight variants to cover 99% of real-world use cases. For most modern sites, the practical minimum is:

favicon.ico — the universal legacy fallback; browsers look for it automatically at /favicon.ico even without any HTML
favicon-32x32.png — the standard for modern desktop browsers including Retina displays
apple-touch-icon.png (180×180) — required for iOS "Add to Home Screen" shortcuts
icon-192.png and icon-512.png — needed if you have a web manifest for Android / PWA support

SVG favicons

If you only need to support modern browsers (Chrome 80+, Firefox 84+, Edge 80+), an SVG favicon is the best option. It is a single vector file that scales to any resolution — from a 16×16 tab icon to a 512×512 splash screen — without any quality loss. SVG favicons also support CSS media queries, which means you can make your icon adapt to the user's dark mode preference. Safari (from version 12) supports SVG favicons for pinned tabs via rel="mask-icon", but general SVG favicon support in Safari only arrived in Safari 17. Keep an ICO fallback if you need to cover older Safari versions.

The HTML You Need

Modern minimal setup (recommended)

Place the following in the <head> of every page. This covers all major platforms with the fewest files.

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- iOS Safari — Add to Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

Browsers read these tags in order and pick the most appropriate one. The sizes attribute helps the browser select the best match for the current display density.

site.webmanifest (for Android / PWA)

The manifest file tells Android Chrome (and other PWA-capable browsers) which icons to use for home screen shortcuts and splash screens. Create a file named site.webmanifest at your domain root with the following content:

{
  "name": "My Site",
  "short_name": "MySite",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

The theme_color value controls the color of the browser UI chrome on Android when users visit your site. Set it to match your brand color or leave it white.

SVG favicon (modern browsers only)

If your browser support targets only modern browsers, you can use a single SVG file as your primary favicon with an ICO fallback for anything older:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback for older browsers -->
<link rel="icon" href="/favicon.ico" sizes="any">

The sizes="any" attribute on the ICO link signals that it can be used at any size, which prevents browsers that do support SVG from accidentally preferring the ICO. Browsers pick the most specific match, so the SVG (with a declared MIME type) wins in modern browsers while older ones fall through to the ICO.

The real advantage of SVG favicons is dark mode support. You can embed a CSS @media (prefers-color-scheme: dark) rule directly inside the SVG to change the icon's appearance when the user's OS is in dark mode — something no PNG-based favicon can do.

Where to place the files

favicon.ico and apple-touch-icon.png belong at the root of your domain (/favicon.ico, /apple-touch-icon.png). Browsers look for these paths automatically, without any HTML hint.
All other files — the PNGs, the SVG, the manifest — can live at the root or in a subfolder such as /icons/, as long as the paths in your HTML link tags match.
If you host assets on a CDN with a different domain, note that apple-touch-icon must be served from the same origin as the page for iOS to recognize it reliably.

Platform-Specific Notes

iOS Safari

iOS Safari uses the apple-touch-icon link relation for home screen shortcuts — it completely ignores the standard <link rel="icon"> tag for this purpose. If you do not include an apple-touch-icon link in your HTML, Safari falls back to looking for /apple-touch-icon.png at the root of your domain. Either approach works.

Key requirements for the iOS icon:

The canonical size is 180×180 pixels for modern iPhones (Retina). Older devices use 120×120; iOS automatically downscales the 180px version.
Do not add rounded corners to the image — iOS applies them automatically. If you round the corners yourself, you will end up with double-rounded corners that look wrong.
Do not use a transparent background. iOS fills transparent pixels with black before applying the rounded mask, so a transparent icon appears to have a black background on the home screen. Use a solid colored background that matches your brand.

Android Chrome

Android Chrome reads icons exclusively from the site.webmanifest file. It uses the 192×192 icon for the home screen shortcut and the 512×512 icon for the PWA splash screen shown while the app is loading.

Android also supports maskable icons. A maskable icon has extra padding around the actual artwork so the OS can safely crop it into any shape — circle, squircle, rounded square, and so on — without cutting off important content. The rule is that your core artwork must fit within the center 80% of the image (the "safe zone"). Use maskable.app to verify your icon before publishing. You declare maskable icons in the manifest like this:

{ "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }

Windows (IE / legacy Edge)

Legacy Internet Explorer and the original (non-Chromium) Edge rely on favicon.ico. The ICO format supports multiple embedded sizes in a single file — a well-formed favicon.ico typically contains 16×16, 32×32, and 48×48 variants. Most favicon generators produce multi-size ICO files automatically.

The msapplication-TileImage meta tag was used for Windows 8/8.1 pinned tiles in Internet Explorer. This is entirely legacy at this point and not worth adding to new sites.

Google Search (mobile)

Google displays your favicon next to your site name in mobile search results. To be eligible, the icon must meet Google's requirements:

The icon must be publicly crawlable — not blocked by robots.txt
It must be square and at least 48×48 pixels
It must be hosted at the root domain (Google prefers icons at or linked from the homepage)
The page it is linked from must itself be indexable

Note that Google does not rely solely on your HTML link tags — it crawls the page and discovers icons itself. A missing favicon means no icon in Google Search, which is a small but visible trust signal lost next to every organic listing.

Favicon Design Best Practices

Keep it simple

At 16×16 pixels, your icon has only 256 pixels to work with. A full wordmark, a detailed illustration, or a logo with multiple colors becomes an unrecognizable blob. The most effective favicons are:

A single letter (the first letter of your brand name, often bold and colored)
A simple geometric shape or symbol
Your logo mark — the icon portion of your logo, stripped of any text

Test your icon at actual 16×16px before finalizing the design. Export a PNG at exactly 16×16, place it next to a real browser tab, and ask whether it is recognizable at that scale. If you are using a design tool, zoom to 100% — do not evaluate it zoomed in at 400%.

Source image requirements

Start with a 512×512px or larger square PNG. This will be the master image from which all other sizes are generated by downscaling. A few additional rules:

Use PNG with transparency if your icon has a non-rectangular shape — this lets the tab background show through naturally in desktop browsers.
Avoid thin lines and fine detail — lines thinner than 2–3px in the final 16px render will either disappear or create aliasing artifacts. Simplify or thicken them.
Use high contrast — the icon sits against a light gray or white tab strip in most browsers. An icon with low contrast against white simply vanishes. Make sure the primary elements of your icon are clearly visible on both white and dark backgrounds.
Do not use a rectangular frame as the main design — at small sizes the border takes up a disproportionate amount of the pixel budget and the interior becomes too small to read.

Dark mode SVG favicon

An SVG favicon can contain CSS that responds to the OS dark mode preference. Here is a minimal working example — a circle that changes color in dark mode:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- favicon.svg with dark mode support -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #a5b4fc; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

In this example, the circle renders as a dark indigo in light mode and switches to a lighter lavender in dark mode. This ensures the icon remains clearly visible against both light and dark browser chrome — something no static PNG or ICO file can do without serving two separate assets.

How to Add Favicons in Popular Frameworks

Next.js (App Router)

Next.js 13+ with the App Router has built-in favicon handling. Place files in the app/ directory with the correct names and Next.js generates the appropriate HTML automatically — no <link> tags required:

app/
  favicon.ico          ← auto-detected, no HTML needed
  apple-icon.png       ← auto-detected as apple-touch-icon
  icon.png             ← used for standard favicon / open graph

Alternatively, use the Metadata API for more control over paths and sizes:

// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Next.js (Pages Router)

In the Pages Router, add favicon link tags inside the <Head> component in your custom _document file:

// pages/_document.tsx
import Head from 'next/head';

<Head>
  <link rel="icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</Head>

Place the favicon files in the public/ folder at the root of your project. Next.js serves everything in public/ at the domain root, so public/favicon.ico is accessible at /favicon.ico.

Astro / Hugo / static sites

For Astro and Vite-based projects, place all favicon files in the public/ directory. For Hugo, use the static/ directory. In both cases the files are copied as-is to the output root during build. Add the HTML link tags to your base layout template (the file that wraps every page — typically src/layouts/Layout.astro in Astro or layouts/_default/baseof.html in Hugo).

WordPress

WordPress handles favicons through the Customizer. Navigate to Appearance → Customize → Site Identity → Site Icon. Upload a square image of at least 512×512px and WordPress will generate all required sizes automatically, including the apple-touch-icon variants. The generated HTML is injected into every page's <head> without any manual coding.

Frequently Asked Questions

Do I still need favicon.ico in 2024?: Yes — it is the universal fallback that every browser understands. Browsers automatically look for /favicon.ico on every page load even without any HTML hint. Skipping it means a 404 error in your server logs on every single page request, forever. It takes 30 seconds to add and the benefit is permanent.
Why does my favicon not update even after I change it?: Browsers cache favicons aggressively — often far more aggressively than regular page assets. To force an update: do a hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac), clear your browser cache entirely, or add a cache-busting query string to the link tag: href="/favicon.png?v=2". Note that favicon cache entries sometimes survive even a full cache clear — if the icon still doesn't update, try opening the favicon URL directly in a new tab and hard-refreshing that.
Does favicon size affect SEO?: Not directly — Google does not use favicon quality as a ranking signal. However, Google requires a valid, publicly crawlable favicon of at least 48×48px to display your site's icon in mobile search results. A missing or blocked favicon means no icon next to your listing, which is a small but real trust and click-through signal lost on every impression.
Should my favicon have a transparent background?: It depends on where it will be used. For browser tab favicons, a transparent background is fine — the tab background (usually gray or white) shows through cleanly. For the iOS "Add to Home Screen" icon (apple-touch-icon), you should avoid transparency. Safari fills transparent areas with black before applying the rounded mask, which typically looks wrong. Use a solid colored background — your brand color, white, or any non-black color — for the apple-touch-icon specifically.
What is a maskable icon?: A maskable icon for Android allows the OS to crop your icon into any shape the device theme requires — circle, squircle, rounded square, and so on. Standard icons that are not declared maskable get padded with white space to avoid being clipped. To make an icon maskable, all critical artwork must be contained within the center 80% of the image (the "safe zone"). Use maskable.app to check whether your icon's content falls within the safe zone before deploying. Declare the icon as maskable in your web manifest by adding "purpose": "maskable" to the icon entry.
My favicon shows in Chrome but not Firefox or Safari — why?: Cross-browser favicon issues almost always have one of three causes: (1) Wrong MIME type — your server must send Content-Type: image/x-icon for .ico files and image/png for .png files; an incorrect MIME type causes some browsers to reject the file silently. (2) Missing or incorrect rel attribute — double-check that your link tags use rel="icon" (not rel="shortcut icon", which is a legacy value). (3) Browser cache — try a hard refresh in the affected browser, or open a private/incognito window to test with a clean cache state.
Can I use a GIF or animated favicon?: Technically yes — Firefox supports animated GIF favicons and will play the animation in the tab. Chrome does not display favicon animations; it shows only the first frame. In practice, animated favicons are considered distracting and are almost never used in production websites. They can draw the eye away from the page content and tend to feel unprofessional outside of very specific creative or notification-driven contexts.
How do I generate all the required favicon sizes at once?: Use the Favicon Generator on this site — upload one square image and download all sizes from 16×16 to 512×512 with one click. No account is needed and the processing happens entirely in your browser. You can also generate a ready-to-use site.webmanifest file and a copy-paste HTML snippet at the same time.

Key Takeaways

A complete favicon setup requires at minimum: favicon.ico (legacy fallback), a 32×32 PNG (modern browsers), a 180×180 apple-touch-icon.png (iOS), and 192×192 + 512×512 PNGs in a site.webmanifest (Android / PWA)
SVG favicons are the best choice for modern-browser-only sites — they scale perfectly and support dark mode via CSS media queries
For iOS, use a solid background color and no pre-applied rounded corners — iOS adds the rounded mask itself
Place favicon.ico and apple-touch-icon.png at the domain root so browsers can find them without any HTML hint
Design your icon as a simple, high-contrast mark — at 16×16px there are only 256 pixels, and complexity becomes noise
Browsers cache favicons aggressively — use a query string (?v=2) when deploying updates to bust the cache

Ready to build your favicon set? The tools below cover the full workflow: