What Is a Favicon? Sizes, Formats, and How to Add One to Your Website

What is a favicon?

Favicon stands for Favourite Icon - the name comes from Internet Explorer's original implementation, where the icon appeared when you bookmarked (favourited) a page. Today, favicons appear in browser tabs, browser bookmarks, the address bar on some browsers, Google search results next to your URL, and on the home screen when a visitor saves your site as a shortcut on their phone or tablet. A missing favicon leaves a blank or generic browser icon - a small but noticeable signal of an unfinished website.

Where favicons appear

• Browser tab: the 16x16px or 32x32px icon shown in the tab strip. This is the most visible placement.
• Bookmarks bar and bookmarks menu: appears alongside the page title when someone saves your site.
• Google search results: the favicon appears to the left of your URL in mobile search results (16x16px display).
• iOS home screen: when someone taps 'Add to Home Screen' on an iPhone or iPad, the 180x180px Apple Touch Icon is used as the app icon.
• Android home screen and PWA: the 192x192px PNG is used when adding a Progressive Web App to the Android home screen.
• Windows taskbar (pinned sites): some browsers use the 48x48px size for pinned site icons.

The complete set of favicon sizes you need

• 16x16px: the standard browser tab size. Keep it simple - complex logos become unreadable at this size.
• 32x32px: used by high-DPI displays in the tab strip and in some bookmark contexts.
• 48x48px: used by Windows for pinned site icons and desktop shortcuts.
• 180x180px (apple-touch-icon.png): used by iOS when someone adds the site to their home screen. Must be named exactly 'apple-touch-icon.png' in the site root, or linked via HTML.
• 192x192px: used by Android Chrome and for Progressive Web App (PWA) manifests.

ICO vs PNG: which format to use

The ICO format was originally required for favicon.ico because it can contain multiple sizes in a single file. Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons and will use the correct size from the link tags in your HTML. For new websites, use PNG files for all sizes - they are easier to generate, work in all modern browsers, and give better quality. Keep a favicon.ico file in the root of your site for compatibility with older browsers and tools that look for it automatically, but name one of your PNG files as the primary favicon via the HTML link tag.

How to add a favicon to your website

Place the files in your site root

Add all favicon files to the public root of your website - the same folder as your index.html. Name them: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, and favicon-192x192.png. Some tools and browsers automatically look for favicon.ico in the root - copy or rename one of your PNG files to favicon.ico for maximum compatibility.

Add the HTML link tags to your head

Add these tags inside the head element of every page (or in your layout template if using a framework):

• <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">

Why your favicon looks blurry (and how to fix it)

A blurry favicon is almost always caused by one of three things: starting with a low-resolution source image, using a complex multi-element logo that does not simplify well at small sizes, or uploading a single large PNG and letting the browser scale it down. The fix is to generate dedicated PNG files at each required size from a high-resolution square source (512x512px or larger). If your logo is complex, create a simplified version - just the icon element or initial letter - specifically for favicon use. Dedicated size files always look sharper than browser-scaled versions.

Common favicon mistakes

• Only adding the 16x16px size and missing the Apple Touch Icon - iOS home screen shortcuts will use a screenshot of the page instead.
• Using a rectangular logo without cropping to square first - the icon will be squeezed or padded.
• Not clearing the browser cache after updating - favicons are aggressively cached. Force-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac) to see the new version.
• Forgetting to add the HTML link tags - placing files in the root is not enough for all browsers. The link tags tell the browser exactly which file to use.
• Using a JPEG for the favicon - JPEG does not support transparency, so any rounded corners or shaped logos will have a white box around them.

Use the Favicon Generator

The Favicon Generator on this site produces all five sizes from a single upload. Upload a square PNG logo, preview the icon at each size to check it is legible at 16px, and download a ZIP containing all five files plus an HTML code snippet to paste into your site's head. Everything runs in your browser - no files are uploaded to a server.