Your favicon is the smallest piece of branding on your website, yet it appears in browser tabs, bookmarks, search results, mobile home screens and browser history. A poorly designed favicon looks blurry, gets cropped or simply fails to load on certain platforms. In this practical guide, we cover both the design craft and the technical implementation, so your icon looks crisp everywhere it appears.

What Is a Favicon and Why It Still Matters in 2026

A favicon (short for favorite icon) is a small image associated with a website. It appears in browser tabs, bookmark lists, browser history, mobile home screens (when a user pins your site), and increasingly, next to your listing in Google search results on mobile.

A clean favicon builds trust, improves recognition and helps users find your tab among the dozens they have open. A blurry or missing one signals amateurism, no matter how polished the rest of your site is.

Favicon Dimensions You Need to Know

There is no single favicon size anymore. Different browsers, operating systems and devices request different resolutions. Here are the sizes you should prepare:

Size (px)	Purpose	Format
16×16	Classic browser tab	ICO / PNG
32×32	Retina browser tab, taskbar	ICO / PNG
48×48	Windows site icons	ICO / PNG
96×96	Desktop shortcuts, Google TV	PNG
180×180	Apple touch icon (iOS home screen)	PNG
192×192	Android Chrome home screen	PNG
512×512	PWA splash screen, high DPI	PNG
Any	Modern browsers, scalable	SVG

Choosing the Right File Format

Each format has strengths and weaknesses. Most modern sites use a combination.

ICO

• The traditional format, supported by every browser including legacy versions.
• Can bundle multiple resolutions (16, 32, 48) in one file.
• Best used as favicon.ico at the root of your domain.

PNG

• Widely supported and offers clean transparency.
• Ideal for Apple touch icons and Android icons.
• Provide multiple sizes rather than relying on browsers to scale a single file.

SVG

• Vector, meaning it scales without quality loss.
• Tiny file size, and can even adapt to dark mode using media queries inside the SVG.
• Supported by all major modern browsers. Use it as your primary icon, with PNG and ICO as fallbacks.

Design Principles for Tiny Icons

Designing for a 16×16 canvas is not the same as designing a logo. Here is how to make a favicon that reads clearly at extremely small sizes.

1. Simplify aggressively. Remove text, thin lines and small details. A favicon should represent your brand with a single strong shape or letter.
2. Use bold contrast. High contrast between the icon and its background prevents it from disappearing in both light and dark browser themes.
3. Design at 16×16 first. If it works at the smallest size, scaling up is easy. Doing the reverse rarely works.
4. Avoid your full logo. Most logos include a wordmark that becomes unreadable at 16 pixels. Extract a single symbol or initial.
5. Snap to the pixel grid. Especially at 16 and 32 pixels, anti-aliasing on off-grid shapes creates blur. Align edges to whole pixels.
6. Test on real browsers. Preview your favicon on Chrome, Safari, Firefox and mobile before shipping.
7. Consider dark mode. A dark icon on a dark tab is invisible. Add a subtle background, or use an SVG that adapts.

How to Create Your Favicon Step by Step

1. Start From a Vector Source

Design your icon in a vector tool like Figma, Illustrator or Inkscape. Working in vector lets you export any size later without loss of quality.

2. Design Inside a 64×64 Artboard

Leave a small internal margin (about 8 to 10 percent) so the icon does not touch the edges when browsers add rounded corners on mobile.

3. Export the Full Set

Export PNG versions at 16, 32, 48, 96, 180, 192 and 512 pixels. Then generate an ICO file containing 16, 32 and 48 pixel versions bundled together.

4. Generate an SVG Version

Simplify the SVG by removing unused metadata and grouping paths. Optimize it with a tool like SVGO to keep the file small.

How to Implement Your Favicon in HTML

Placing favicon.ico at the root is not enough anymore. Here is a modern, cross-platform setup to add inside the <head> of your HTML:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Your site.webmanifest file should reference the Android icons:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Why This Setup Works

• Modern browsers prefer the SVG, giving perfect quality at any zoom level.
• Legacy browsers fall back to the ICO file.
• iOS uses the Apple touch icon when a user adds your site to their home screen.
• Android reads the manifest to display your PWA icon correctly.

Common Mistakes to Avoid

• Uploading a single low-resolution PNG. It will appear blurry on retina displays and Android.
• Using transparency without a plan. A transparent icon can vanish against dark backgrounds. Test both themes.
• Forgetting cache issues. Browsers aggressively cache favicons. Add a query string like ?v=2 when you update.
• Ignoring Google search results. Google requires a favicon of at least 48×48 pixels, and it must be a multiple of 48. Provide a large enough version.
• Placing the file in the wrong directory. Keep favicon.ico at the domain root so browsers can find it by default.

Testing Your Favicon

Before considering the job done, run through this quick checklist:

1. Open your site in Chrome, Firefox, Safari and Edge, both in light and dark mode.
2. Pin your site to the home screen on an iPhone and an Android device.
3. Search for your site on Google mobile and confirm the icon appears next to the result.
4. Bookmark the page and check that the favicon renders in the bookmarks bar.
5. Zoom in on the browser tab to confirm the icon is sharp at retina resolution.

FAQ

What is the best favicon size to use?

There is no single best size. Provide a bundle: an ICO with 16, 32 and 48 pixel versions, an SVG for modern browsers, a 180×180 PNG for Apple devices, and 192×192 plus 512×512 PNGs for Android and PWAs.

Can I use a JPEG as a favicon?

Technically yes, but you should not. JPEG lacks transparency and produces visible compression artifacts at small sizes. Use PNG, ICO or SVG instead.

Do I still need favicon.ico if I have an SVG?

Yes. Some older browsers and crawlers still request favicon.ico from the root of your domain. Keep it as a fallback.

Why does my favicon look blurry?

Usually because a large image is being scaled down to 16×16 by the browser. Provide a version designed specifically at that resolution, with edges aligned to the pixel grid.

How do I update a favicon that browsers keep caching?

Change the file name or append a version query string in your HTML, for example href="/favicon.svg?v=3". This forces browsers to fetch the new version.

Does the favicon affect SEO?

Indirectly. Google displays it next to your listing on mobile results, which can improve click-through rates. A missing or generic favicon reduces visual trust and recognition.

Final Thoughts

A great favicon is the intersection of thoughtful design and correct technical setup. Spend time simplifying your icon so it reads clearly at 16 pixels, export the full range of formats and sizes, and implement them with the proper HTML tags and manifest file. Done well, your favicon becomes a small but powerful brand asset that follows your users across every screen they use.