How to Create a Favicon for Your Website (All Sizes Explained)

A favicon is the small icon that appears in browser tabs, bookmarks, history lists, and on the home screen when users save your site on mobile devices. Despite being tiny, it is one of the most visible elements of your brand on the web. A missing or default favicon makes your site look unfinished. This guide covers everything you need to know about creating and implementing favicons.

Where Favicons Appear

Your favicon shows up in more places than you might expect:

  • Browser tabs — the most common location. Each open tab displays the favicon next to the page title.
  • Bookmarks bar and menu — favicons help users visually identify saved sites at a glance.
  • Browser history — the favicon appears next to each visited URL.
  • Mobile home screen — when users "Add to Home Screen" on iOS or Android, the apple-touch-icon or Android Chrome icon is used.
  • Search results — Google displays favicons next to search results on mobile and desktop.
  • Progressive Web Apps (PWAs) — the manifest icons serve as the app icon on devices.

Required Favicon Sizes

Different browsers and platforms expect different sizes. Here are the essential ones:

favicon.ico (32x32 and 16x16)

The classic ICO format, which dates back to Internet Explorer 5. An ICO file can contain multiple sizes embedded in a single file — typically 16x16 and 32x32. Despite being old, it is still the universal fallback. Place it at the root of your site so browsers can find it automatically at /favicon.ico.

apple-touch-icon.png (180x180)

Used by iOS Safari when users add your site to their home screen. Apple rounds the corners and adds its own visual effects. The recommended size is 180x180 pixels. iOS does not use the ICO file at all — it specifically looks for the apple-touch-icon.

Android Chrome Icons (192x192 and 512x512)

Defined in your web app manifest (manifest.json or manifest.webmanifest). Android uses the 192x192 icon for the home screen shortcut and the 512x512 icon for the splash screen. These should be PNG files with transparent backgrounds if desired.

SVG Favicon

Modern browsers support SVG favicons, which scale perfectly to any size and support dark mode via CSS media queries inside the SVG. If you have a simple logo that works as a vector, an SVG favicon is an excellent choice. Use the <link rel="icon" type="image/svg+xml"> tag.

How to Add Favicon HTML to Your Site

Add the following tags to the <head> section of your HTML:

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

The browser will use the most appropriate icon from the options provided. Modern browsers prefer the SVG, Safari on iOS uses the apple-touch-icon, and older browsers fall back to the ICO file.

Design Tips for Small Icons

Designing for 16x16 or 32x32 pixels is a unique challenge. What looks great at logo size may be unrecognizable at favicon size.

  • Simplify ruthlessly. Use the simplest possible version of your brand mark. A single letter, a simple shape, or an abstract icon works best. Detailed logos with fine lines will turn into an unreadable blob.
  • Use bold shapes and high contrast. Thin lines disappear at small sizes. Thick, solid shapes with strong contrast against the background remain legible.
  • Test at actual size. Always preview your favicon at 16x16 pixels in an actual browser tab. What looks good at 512x512 in your design tool may not work at the display size.
  • Consider dark mode. Your favicon should be visible on both light and dark browser chrome. If your icon is dark, it may disappear on dark browser themes. Add a subtle border or use an SVG favicon with dark mode styles.
  • Avoid text beyond a single letter. Words are illegible at favicon sizes. If you want to use text, stick to a single bold letter or monogram.
  • Use a distinct color. A favicon with your brand color stands out in a row of tabs and makes your site instantly recognizable.

Testing Your Favicon

After implementing your favicon, verify it works correctly:

  • Clear your browser cache before testing. Browsers aggressively cache favicons, so changes may not appear immediately.
  • Test in multiple browsers — Chrome, Firefox, Safari, and Edge each have slightly different favicon handling.
  • Test the mobile home screen by adding your site to the home screen on both iOS and Android.
  • Check Google's search results by searching for your site and verifying the favicon appears next to your listing. Note that Google may take days or weeks to pick up a new favicon.

Common Mistakes

  • Missing favicon.ico at the root. Browsers automatically request /favicon.ico. If it is missing, you get 404 errors in your server logs. Always place the file at the root, even if you also use other formats.
  • Only providing one size. A single 16x16 ICO file will look blurry on high-DPI displays and on mobile home screens. Provide multiple sizes for sharp display everywhere.
  • Using a full-size logo. Scaling down a detailed logo to 16x16 pixels produces a muddy, unrecognizable result. Create a dedicated simplified version for the favicon.

Generate all favicon sizes from one image

Upload your image and download a complete favicon package — ICO, PNG, apple-touch-icon, and manifest icons.

Open Favicon Generator