Tutorials

What is a favicon?

A favicon is a small icon or collection of icons associated with a website, web page, or web application. It’s displayed within the browser tabs and bookmarks bar. The examples below show the favicons for Google, Reddit, and Squarespace within the browser tab.

Below are some favicons from a handful of popular websites displayed within the Chrome bookmarks bar.

What is a favicon used for?

A favicon is used to help users visually identify websites, web pages, and web applications more easily within browser tabs, bookmarks, shortcuts, and address bars more easily. It’s important to have a favicon for your website for brand recognition so that your users can easily identify your site in their browser tabs and bookmarks.

Squarespace uses its logo as its favicon to stay consistent with the company's brand.

What are alternative names for favicon?

Some alternative names for favicon are browser icon, favorite icon, shortcut icon, tab icon, URL icon, and bookmark icon. The word favicon is short for “favorite icon” and originates from Internet Explorer’s “Favorites” feature which most modern browsers call “bookmarks”.

What are common favicon file formats?

ICO - favicon.ico

The most common favicon formats are ICO, PNG, and SVG, but there are additional formats for specific browsers or devices. The ICO file format was developed by Microsoft and is the original file format for the favicon. The format is unique because it allows for multiple small images within the same file. This is advantageous because the small icons required for a favicon in ICO format (16x16, 32x32, and 48x48 pixels) can be scaled and optimized independently. At small dimensions you can’t rely on the browser to automatically resize your icon in an optimal way. The ICO format is supported by all browsers and it’s the only format that IE5 through IE10 supports.

PNG - favicon.png

The PNG format is a nice format because it’s a format that most people are used to and doesn’t require any special tools to create. With modern screens being high resolution the original problem of small icon dimensions for small resolutions no longer exists. For browsers that support the PNG favicon format oftentimes the quality of the favicon displayed within the browser tab or bookmarks bar will be higher than the ICO format. The disadvantage of the PNG format is that it’s not compatible with IE5 through IE10.

SVG - favicon.svg

The SVG format has benefits over the PNG and ICO formats, but doesn’t have great browser support yet. SVG files are very lightweight and they are infinitely scalable. This means that image quality is superb without sacrificing load times for heavy images. Only Chrome, Firefox, and Opera support SVG format favicons.

What are common favicon sizes?

All favicons must be square. The most common favicon sizes are 16x16, 32x32, and 48x48 pixels, but modern websites need additional sizes for different devices and platforms.

Standard Favicon Sizes

• 16x16 pixels — The classic favicon size. Used in browser tabs, bookmarks bars, and history. This is the minimum size every website should have.
• 32x32 pixels — Used by newer browsers for tabs and taskbar shortcuts. Provides sharper display on standard resolution screens.
• 48x48 pixels — Used in Windows site shortcuts and some browser contexts. Included in ICO files as the largest standard size.

Apple Touch Icon Size

180x180 pixels — Required for Apple devices. When users add your website to their iPhone or iPad home screen, this icon is displayed. Use the <link rel="apple-touch-icon"> tag to specify it.

Android and PWA Sizes

• 192x192 pixels — Used by Android Chrome for the home screen icon and in the web app manifest.
• 512x512 pixels — Used for Android splash screens and Progressive Web App (PWA) installs. The largest standard size.

Which Sizes Do I Need?

For most websites, you need at minimum a favicon.ico file containing 16x16, 32x32, and 48x48 pixel versions, plus a 180x180 Apple Touch Icon and 192x192 and 512x512 icons for Android. Our favicon generator creates all of these sizes automatically in a single download.

Do favicons affect search engine optimization or SEO?

Yes — favicons can indirectly affect SEO in several ways. Google now displays favicons in mobile search results next to your site name and URL. An eye-catching favicon helps your listing stand out, which can increase click-through rates (CTR). Other search engines like DuckDuckGo and Bing also display favicons in their results.

Beyond search results, a favicon is essential for brand recognition and trust. Users see your favicon in browser tabs, bookmarks, browsing history, and PWA installs. A missing or broken favicon (the generic globe or blank page icon) can make your site look unfinished or untrustworthy, potentially increasing bounce rates.