·5 min read

How to Create a Favicon for Your Website

That tiny icon in the browser tab does more than you think. A well-crafted favicon builds brand recognition, improves user experience, and makes your site look polished. Here is everything you need to create one from scratch.

What Is a Favicon and Why Does It Matter?

A favicon (short for “favorite icon”) is the small image that appears in browser tabs, bookmark lists, history entries, and search results. It is one of the first visual elements users notice about your website, even before they read a single word of content.

Favicons matter for several reasons:

  • Brand recognition: When users have dozens of tabs open, your favicon is the only visual identifier. A distinctive icon makes your site easy to find.
  • Professionalism: Sites without a favicon display a generic browser icon or a blank square. That signals “unfinished” to visitors and erodes trust.
  • Mobile home screens: When someone adds your site to their phone’s home screen, the favicon (or its larger variant) becomes the app icon.
  • SEO signals: Google displays favicons in mobile search results next to your page title. A recognizable icon can increase click-through rates.

Recommended Favicon Sizes

Modern browsers and operating systems use favicons at different sizes. To cover all use cases, you should generate your icon in multiple dimensions:

SizeWhere It’s UsedFormat
16×16Browser tabs, address barICO or PNG
32×32Taskbar shortcuts, bookmark iconsICO or PNG
180×180Apple touch icon (iOS home screen)PNG
192×192Android home screen, PWA iconPNG
512×512PWA splash screen, large display contextsPNG

If you only have time for two files, prioritize a 32×32 favicon.ico (for legacy browser support) and a 180×180 PNG (for Apple devices). But for full coverage, generate all five sizes.

PNG vs ICO: Which Format to Use

The .ico format is the original favicon format introduced by Internet Explorer in 1999. It can bundle multiple sizes into a single file (for example, 16×16, 32×32, and 48×48 all in one .ico). Every browser supports it, including very old ones.

PNG is the modern choice. It supports transparency, is universally supported by current browsers, and is easier to create with any image editor. You can also use SVG favicons for perfect scaling at any size, though browser support for SVG favicons is still growing.

Best practice: Include both. Use a favicon.ico at your site root for maximum compatibility, and use PNG files for Apple touch icons and PWA manifests. Our free Favicon Generator creates all the sizes and formats you need from a single image.

Design Tips for a Great Favicon

Designing a favicon is different from designing a logo. At 16×16 pixels, detail disappears. Follow these guidelines:

  • Keep it simple. Use a single letter, symbol, or shape. Complex logos become unrecognizable blobs at small sizes.
  • Use bold colors. High contrast helps your icon stand out against the browser’s tab bar. Avoid light pastels or thin lines.
  • Use a transparent background. PNG favicons with transparency look clean on both light and dark browser themes.
  • Test at actual size. Design at 512×512 for detail work, but always preview the result at 16×16 and 32×32 to make sure it reads well.
  • Match your brand. Use your brand’s primary color and a recognizable element from your logo. Consistency builds recognition.

HTML Code to Add Favicons to Your Site

Once you have your favicon files, add the following tags inside the <head> section of your HTML:

<!-- Standard favicon (all browsers) -->
<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" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180"
      href="/apple-touch-icon.png" />

<!-- Web app manifest (Android + PWA) -->
<link rel="manifest" href="/site.webmanifest" />

Place all the favicon files in your site’s root directory (the same folder as your index.html). This is the default location browsers check first.

Web App Manifest for PWAs

If your website is a Progressive Web App (or you want it to be installable on mobile devices), you need a site.webmanifest file that references your larger icons:

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

The 192×192 icon is used when the user adds your site to their Android home screen. The 512×512 icon is used for the splash screen that displays while the app loads.

Testing Your Favicon

After uploading your favicon files and adding the HTML, verify everything works:

  1. Hard refresh your browser. Favicons are aggressively cached. Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) to force a reload.
  2. Check the browser tab. Your 16×16 or 32×32 icon should appear next to the page title.
  3. Bookmark the page. Open your bookmarks and verify the icon shows up correctly.
  4. Test on mobile. On iOS, tap Share > Add to Home Screen. On Android, tap the three-dot menu > Add to Home screen. Confirm the 180×180 or 192×192 icon displays properly.
  5. Use a favicon checker. Online tools like Google’s Rich Results Test or realfavicongenerator.net/favicon_checker can scan your site and flag missing sizes.

Common Mistakes to Avoid

  • Using your full logo. Logos with text become illegible at 16 pixels. Use a simplified icon or monogram instead.
  • Forgetting the Apple touch icon. Without a dedicated 180×180 PNG, iOS devices will generate an ugly screenshot thumbnail when users add your site to their home screen.
  • Wrong file location. Browsers look for /favicon.ico at the root by default. If your icon is buried in a subdirectory without a <link> tag pointing to it, browsers will not find it.
  • Not testing dark mode. Many browsers and operating systems use dark tab bars. A dark favicon on a dark background becomes invisible. Test with both themes.

Create Your Favicon in Seconds

You do not need Photoshop or design skills to create a professional favicon. Upload any image — your logo, a symbol, or even an emoji — to our free Favicon Generator and it will produce every size you need, with the HTML code ready to copy and paste. Everything runs in your browser, so your files stay private and the download is instant.

Try It Now — Free

Use our Favicon Generator right in your browser. No signup, no upload to any server.

Open Favicon Generator