How to Create a Favicon for Your Website

What is a favicon?

A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, history, and search results next to your website's name. It's a crucial element of your site's branding and user experience. Without a favicon, browsers show a generic globe or document icon, making your site look unprofessional.

Favicon formats explained

Modern websites use several favicon formats to ensure compatibility across browsers and devices:

ICO format (legacy)

The .ico format is the original favicon format, supported by all browsers including older versions of Internet Explorer. An ICO file can contain multiple sizes (16x16, 32x32, 48x48) in a single file.

PNG format (recommended)

The PNG format offers better quality with transparency support. Most modern browsers support PNG favicons. Recommended sizes include 16x16, 32x32, 192x192, and 512x512 pixels.

SVG format (modern)

SVG favicons are vector-based and scale perfectly to any size. They also support dark mode detection via CSS media queries. Browser support is good but not universal.

Required favicon sizes

To cover all use cases, you need multiple sizes:

16x16 px — Browser tab icon (classic)
32x32 px — Browser tab icon (retina/high DPI)
48x48 px — Windows desktop shortcut
180x180 px — Apple Touch Icon (iOS home screen)
192x192 px — Android Chrome icon
512x512 px — PWA splash screen

Use our favicon generator tool to create all these sizes automatically from a single image.

HTML code for favicons

Add these lines in your HTML <head> section:

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

Best practices for favicon design

Keep it simple: favicons are tiny; complex designs become unreadable at 16x16 pixels
Use your logo or initials: ensure brand recognition even at small sizes
Test on dark and light backgrounds: browser tabs can have either background
Use transparency wisely: PNG and SVG support transparency, ICO can too
Avoid text: unless it's a single letter, text is illegible at favicon sizes

Creating a favicon step by step

Design: create or select a square image (at least 512x512 px)
Simplify: remove details that won't be visible at 16x16 px
Generate: use our favicon generator to create all required sizes
Test: verify the favicon displays correctly in multiple browsers
Deploy: upload the files and add the HTML code to your pages

Web app manifest

For Progressive Web Apps (PWAs), you also need a site.webmanifest file that references your icons:

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

Try our free tools

⭐ Favicon Generator

Frequently Asked Questions

What size should a favicon be?

The essential sizes are 16x16 and 32x32 pixels for browser tabs, 180x180 for Apple devices, and 192x192/512x512 for Android and PWAs.

What is the best favicon format?

PNG is the best all-around format for favicons. Use ICO as a fallback for older browsers, and consider SVG for modern browsers that support it.

How do I add a favicon to my website?

Place your favicon files in your site root directory and add link tags in the HTML head section. Use our favicon generator to create all required sizes automatically.

Why is my favicon not showing?

Common causes: wrong file path, browser cache (try hard refresh with Ctrl+F5), incorrect MIME type on the server, or missing link tags in the HTML head.