What is a Favicon and Why It Matters?

That tiny icon sitting in your browser tab? It has a name, a history, and more impact than most people give it credit for.

A favicon is the small site icon browsers display in tabs, bookmarks, address bars, and Google Search results. It comes from “favorites icon,” a term that traces back to Internet Explorer 5 in 1999.

Missing one leaves a grey globe placeholder in every search result your site appears in. Not a great first impression.

This guide covers what a favicon is, where it appears, which file formats and sizes it requires, how to add one to your site, and what makes a favicon design work at 16 pixels.

What is a Favicon?

A favicon is a small icon file associated with a website, displayed in browser tabs, bookmarks, search results, and browser history lists. The term combines the words “favorite” and “icon,” coined by Microsoft developer Bharat Shyam when he built the feature for Internet Explorer 5 in March 1999 (History of the Web).

Every browser sends a GET request to /favicon.ico in a site’s root directory automatically. No HTML declaration is required for the browser to find and load it.

A favicon is distinct from a full logo. It is a simplified or reduced version of a brand’s visual identity, designed to remain recognizable at sizes as small as 16×16 pixels.

Bharat Shyam’s original intent was simple: add a small icon next to each website in IE’s Favorites list to help users tell sites apart. The feature shipped before it could go through the W3C process, and it became one of the most universally adopted browser conventions on the web (History of the Web, 2023).

Favicon vs. logo vs. app icon

Favicon: Browser-specific, 16–512 px range, serves identification in tabs and search results.

Logo: Full-size brand asset used in marketing, printed materials, and page headers. Not constrained by pixel dimensions.

App icon: Used for native mobile applications, governed by platform-specific guidelines from Apple and Google. A favicon can share the same source artwork but is a separate file with different output requirements.

The three are related but not interchangeable. A wordmark logo rarely works as a favicon at 16×16 px because the text becomes illegible. PetSmart, for example, strips its full logo down to the bouncing red ball for its site icon so it reads cleanly at small sizes (Webflow, 2025).

Where Does a Favicon Appear?

A favicon appears in 5 distinct locations across browsers and platforms, not just the browser tab. Understanding all display locations matters because each has different size and format requirements.

Browser tab and address bar display

The browser tab is the most visible location. The favicon sits to the left of the page title, helping users identify an open site across multiple tabs.

At standard resolution, browsers render the tab favicon at 16×16 px. On retina and high-DPI displays, the browser uses a 32×32 px version if available, then scales it down.

• Chrome, Firefox, Edge, and Safari all display tab favicons by default
• Some browsers also show the favicon in the address bar while on the site
• Bookmark bars show the favicon instead of a text label when the bookmark has no name

Google Search results display

Google started showing favicons in mobile search results in May 2019, then rolled out the same design to desktop results on March 8, 2023 (GSQi, 2023).

Every organic result in Google Search now shows the site’s favicon next to the domain name, above the page title. A missing or non-compliant favicon causes Google to substitute a generic grey globe icon instead.

Google’s documentation (updated February 2026) requires the favicon to be at least 8×8 px, recommends larger than 48×48 px, and requires a 1:1 square aspect ratio. Both the favicon file and the site’s homepage must be crawlable by Googlebot-Image and Googlebot respectively.

Mobile home screen and PWA icons

When a user adds a website to their home screen on iOS or Android, the operating system pulls the site icon as the shortcut icon. This behavior dates to 2007, when Apple introduced the Apple Touch Icon with the first iPhone release (RealFaviconGenerator).

iOS uses the Apple Touch Icon at 180×180 px.

Android Chrome pulls from the web app manifest, requiring 192×192 px and 512×512 px entries. If no manifest exists, Android falls back to the Apple Touch Icon.

Progressive web apps depend on the manifest icons for installation prompts and splash screens. Without the 512×512 px version, Chrome will not trigger the PWA install banner.

What File Formats Does a Favicon Use?

4 file formats are used for favicons across modern web implementations: ICO, PNG, SVG, and (rarely) WebP. Each has different browser support, use cases, and trade-offs.

ICO format

ICO is the original favicon format, chosen by Bharat Shyam in 1999 because it was the standard Windows icon format. Its key technical advantage is that a single .ico file can bundle multiple sizes (16×16, 32×32, 48×48) in one container.

Browsers serve favicon.ico automatically from the root directory without any <link> tag. This makes it the safest fallback for legacy environments.

The correct MIME type for ICO is image/x-icon. The IANA-registered type image/vnd.microsoft.icon exists but causes rendering issues in some older Internet Explorer versions (Wikipedia).

PNG format

PNG works in all modern browsers and is the format used for Apple Touch Icons and Android manifest icons. It supports transparent backgrounds, which allows the icon to sit cleanly over different colored browser chrome.

Andrey Sitnik’s 2024 minimal favicon set (cited by Frontend Masters) recommends pairing a favicon.ico for legacy support with an icon.svg and an apple-touch-icon.png at 180×180 px as the complete modern implementation.

SVG format

SVG favicons are resolution-independent, scaling to any screen density without quality loss. Firefox and Opera added SVG favicon support first; Chrome and Edge followed, making it a practical modern choice (RealFaviconGenerator history, 2024).

The biggest practical advantage of SVG: it supports the prefers-color-scheme media query inside the file. One SVG favicon can show a dark version on dark-mode browsers and a light version on light-mode browsers, with no extra files required.

What Size Should a Favicon Be?

No single favicon size covers all platforms. A complete favicon implementation requires 5 distinct sizes across browsers, mobile devices, and PWA specifications. Favicon.im’s analysis of thousands of websites and device usage patterns confirmed these 5 sizes cover 99% of real-world use cases.

Standard browser sizes

The standard browser tab favicon renders at 16×16 px. This has been the tab size since Internet Explorer 5 introduced the format in 1999.

• 16×16 px: Browser tab, bookmarks bar, browser history
• 32×32 px: Windows taskbar shortcut, high-DPI tab rendering
• 48×48 px: Google’s recommended minimum for SERP display (Google Search Central, 2026)

ICO files can bundle the 16×16 and 32×32 versions in one container, making them the practical choice for desktop browser coverage.

Mobile and PWA sizes

Mobile home screen icons operate at significantly higher resolutions than browser tabs. The gap between 16 px and 512 px is not arbitrary, it reflects the actual rendering surfaces on different devices.

180×180 px is the Apple Touch Icon standard for iOS home screens, required since Apple updated guidelines for Retina displays.

192×192 px covers Android Chrome home screen shortcuts and is the minimum size required in a web app manifest for PWA icon display.

512×512 px is required for PWA splash screens and high-resolution display surfaces. Without it, Chrome’s PWA install prompt may not trigger correctly (Favicon.im, 2025).

How Does a Browser Detect and Load a Favicon?

Browsers use 2 methods to find a favicon: automatic root-directory detection and explicit HTML declaration. The HTML declaration takes priority when both are present.

Automatic root detection

Every browser sends a GET request to yoursite.com/favicon.ico on page load, with no code required from the developer.

If the file exists and is served with the correct MIME type, the browser displays it. If the file is missing, the server returns a 404, the browser shows no error to the user, and a generic placeholder icon appears instead.

This automatic request happens on every page load. Under HTTP/1.1, it added a small but real overhead. Under HTTP/2, the request is multiplexed with other page assets, reducing its performance cost to near zero (Evil Martians, 2024).

HTML link tag declaration

The <link> tag in the page <head> overrides the root detection method and allows specifying format, size, and file location explicitly.

The 2024 recommended minimal implementation, per Andrey Sitnik’s research:

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

Older implementations used rel=”shortcut icon”. That syntax is still supported across all browsers for historical reasons, but “shortcut” carries no meaning in current HTML specifications (Wikipedia, Favicon).

Favicon caching behavior

Browsers cache favicons aggressively, often ignoring standard cache headers. A user can see the old favicon for hours or days after a site update.

The reliable fix: change the favicon filename when updating it, then update the tag to point to the new filename. A query string like ?v=2 appended to the href sometimes works but is inconsistent across browsers.

How Do You Add a Favicon to a Website?

Adding a favicon requires 2 steps: placing the file in the correct location and declaring it in the page head. CMS platforms handle the second step through their admin interfaces.

HTML declaration method

Place favicon.ico in the root directory of the domain. This handles automatic browser detection without any code.

For full cross-platform coverage, add these declarations inside the element of every page:

• for desktop browsers
• for modern browsers with SVG support
• for iOS home screen
• for Android and PWA

The web app manifest file must include icons entries at 192×192 px and 512×512 px to satisfy PWA and Android Chrome requirements.

CMS implementation (WordPress, Shopify)

WordPress: Appearance > Customize > Site Identity > Site Icon. WordPress accepts an image at least 512×512 px and generates the required sizes automatically. No code editing required.

Shopify: Online Store > Themes > Customize > Theme Settings > Favicon. Shopify accepts PNG or ICO files and handles tab display. PWA and Apple Touch Icon sizes may need manual addition via the theme’s layout/theme.liquid file for full coverage.

Both platforms resize the uploaded image for tab display. Uploading a 512×512 px PNG is the recommended starting point since both CMSes can scale down from that base.

Web app manifest for PWA icons

The manifest.webmanifest file controls how the site appears when installed as a progressive web app on Android and desktop Chrome.

A minimal manifest icon block looks like this:

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

Without both entries, the browser will not confirm the site as a PWA-installable app. The 512 px version is specifically used for splash screens during app launch.

What Makes a Good Favicon Design?

A favicon’s design challenge is compression: taking a brand identity and making it legible at 16×16 pixels. Most complex logos fail completely at that size.

Visual clarity at small sizes

At 16×16 px, each pixel is roughly 6% of the total image area. A design with fine details, thin lines, or multiple colors will blur into an unreadable block.

High contrast between the icon and its background is the single most important design factor at small sizes. Low-contrast designs disappear in both light and dark browser themes.

3 design approaches that consistently work at 16 px:

• A single letter or monogram from the brand name (Gmail’s envelope M, for example)
• A brand symbol already used as a logomark (Apple’s apple, Twitter’s bird before the X rebrand)
• A high-contrast geometric shape tied to the brand color

Dark mode adaptation with SVG

SVG favicons support the prefers-color-scheme CSS media query inside the file itself.

A black icon on a white background becomes invisible on dark-mode browser chrome. The SVG approach solves this with one file instead of maintaining two separate icon variants.

Implementation inside the SVG file:

<svg> <style> @media (prefers-color-scheme: dark) { path { fill: white; } } </style> </svg>

This is currently the most practical reason to adopt SVG favicons in new projects. The CSS media query logic applies directly inside the SVG, requiring no JavaScript or server-side logic.

Simplifying an existing logo for favicon use

Most logos are not designed for 16 px output. Wordmarks with fine typography, detailed illustrations, and multi-element lockups all require redesign before use as a favicon.

The right process: start from the logo’s most distinctive single element. PetSmart uses only the red bouncing ball. Apple uses only the apple silhouette. Behance uses a crisp “Be” letterform that remains legible even at the smallest tab sizes (Webflow, 2025).

Avoid gradients at small sizes. They compress poorly and lose definition. Flat, solid-color designs with clean edges consistently outperform gradient versions in tab readability.

Does a Favicon Affect SEO?

A favicon has no direct ranking signal in Google’s algorithm. The SEO impact is indirect but real: favicons appear next to every organic result in Google Search, and a missing or broken one gets replaced with a generic grey globe icon that weakens brand recognition at the moment a user decides whether to click.

Google rolled out favicon display in mobile search results in May 2019, then extended it to desktop search on March 8, 2023 (GSQi, 2023). Every organic listing now carries a site icon visible before the user reads the page title.

How favicons influence click-through rate

The #1 organic result in Google receives an average CTR of 27.6% of all clicks, according to Backlinko’s analysis of 4 million search results. Branded and navigational queries skew higher. A recognizable favicon reinforces brand trust in that split-second scan of the results page.

A well-rendered favicon signals that a site is maintained and professional. The globe placeholder signals the opposite. According to Collaborada (2025), an optimized favicon can improve CTR by making a result stand out from competitors in crowded SERPs.

Google’s favicon requirements for SERP display

What Google requires (Search Central documentation, updated February 2026):

• Square aspect ratio (1:1), minimum 8×8 px, recommended 48×48 px or larger
• Both the favicon file and the homepage must be crawlable by Googlebot and Googlebot-Image
• The favicon must visually represent the site’s brand
• Content violating Google’s policies (pornography, hate symbols) gets replaced with the default globe icon

Blocking the favicon URL in robots.txt is the most common silent cause of the globe placeholder appearing in search results (onewebcare.com, 2025). The browser still displays the icon fine because it reads the file directly. Google cannot.

Favicon and site authority signals

Chrome’s bookmark system pulls favicon data when indexing bookmarked sites. Mailchimp’s favicon documentation notes that sites without a favicon risk missing out on bookmark-derived engagement signals Chrome surfaces to Google.

The relationship is indirect. No favicon means no bookmark icon, which reduces the likelihood of a site being revisited through bookmarks, which lowers the behavioral engagement signals that indirectly contribute to search performance.

What Are the Common Favicon Mistakes?

Most favicon problems fall into 5 categories: wrong file format, incorrect MIME type, robots.txt blocking, cache issues after updates, and missing size variants. Each one causes a different failure mode across browsers and Google Search.

Blocking the favicon in robots.txt

A Disallow rule that covers the favicon path or the entire site root stops Googlebot-Image from fetching the icon. The browser still shows the favicon locally, which makes this error invisible during development.

How to check: Run the favicon URL through Google Search Console’s URL Inspection tool. If Googlebot cannot access it, the Coverage report flags it as blocked by robots.txt.

Theme installs, security plugins, and site migrations sometimes silently append Disallow rules. Any major site change warrants a robots.txt audit (Upward Engine, 2025).

Wrong MIME type on the ICO file

Serving favicon.ico with text/plain or application/octet-stream instead of image/x-icon causes some browsers to ignore the file entirely, even when the request returns a 200 status code.

The browser DevTools Network tab exposes this in seconds. Filter for the favicon request, check the Content-Type response header, and confirm it reads image/x-icon.

Renaming a PNG as favicon.ico

A PNG file renamed to favicon.ico is not an ICO file. ICO is a container format that holds multiple embedded image sizes in a single file. A renamed PNG is a single raster image with a misleading extension.

Chrome and Firefox are forgiving and will usually render it anyway. Older Edge versions and some mobile browsers will not. The correct fix is to use a proper converter (RealFaviconGenerator, Favicon.io) that outputs a true ICO container, not a renamed PNG.

Stale cache after favicon updates

Browsers cache favicons aggressively. Replacing a favicon while keeping the same filename means many users see the old icon for days or weeks after the update.

Reliable fix: rename the file (e.g., favicon-v2.png), update the href in the tag to match, and purge CDN cache layers (Cloudflare, CloudFront) by entering the favicon URLs in the custom purge tool (premiumfavicon.com, 2025).

Missing size variants for mobile and high-DPI displays

Providing only a 16×16 ICO file covers desktop tabs. It does not cover iOS home screens, Android PWA install prompts, or high-DPI retina displays where the 16 px version renders blurry.

Favicon.im’s analysis of thousands of websites confirmed that the 4-size essential set (ICO, 180 px, 192 px, 512 px) covers 99% of real use cases. Anything beyond that covers edge cases.

How Do You Generate a Favicon?

3 workflows exist for favicon generation: online generator tools, design software with manual export, and command-line conversion for automated pipelines. The right choice depends on whether the source asset already exists and how much platform coverage the project needs.

Online generator tools

Online generators handle the most tedious part: outputting multiple sizes and formats from a single source image. For most projects, they eliminate the need for any manual resizing.

RealFaviconGenerator is the most comprehensive option. It accepts an image at least 70×70 px (recommends 260×260 px), shows a live preview of how the icon renders on iOS, Android, Chrome, and Safari, and generates the complete HTML markup alongside the file package (Webflow, 2025).

Favicon.io suits smaller projects or developers who need a site icon from text or an emoji in under a minute. It uses 800+ Google Fonts for text-based icon generation and supports copy-pasting Unicode characters directly into the text field.

Design software workflow (Figma, Illustrator)

The design software approach starts with a source file, not the final output. Designing in Figma gives you full control over the icon’s visual treatment before sending it to a generator.

Recommended workflow:

• Design the icon at 500×500 px or larger in Figma or Illustrator
• Export as PNG or SVG
• Run the exported file through RealFaviconGenerator for multi-platform output
• Use SVG optimization tools like SVGOMG before using an SVG as the favicon source to reduce file size

Designing at a large scale and downscaling through a generator consistently produces sharper results than designing at 16 px directly.

Command-line conversion with ImageMagick

ImageMagick converts PNG files to true ICO format from the terminal, which fits automated build pipelines where manual tool use is not practical.

The command for a multi-size ICO file bundling 16, 32, and 48 px versions:

convert favicon-source.png -define icon:auto-resize=48,32,16 favicon.ico 

This creates a proper ICO container, not a renamed PNG. The auto-resize flag handles the embedded size generation automatically from a single source file.

For teams using Squoosh or SVGOMG in their front-end workflow, running these tools on the PNG or SVG source before ICO conversion reduces favicon file size without any visible quality loss. The performance impact of the favicon request is near zero under HTTP/2, but keeping file sizes lean is still good practice for cross-browser compatibility across older network conditions.

FAQ on Favicon

What does favicon stand for?

Favicon stands for “favorites icon.” Microsoft developer Bharat Shyam coined the term in 1999 when building the feature for Internet Explorer 5. It combined “favorite” and “icon” to describe the small image displayed next to bookmarked websites.

Where does a favicon appear?

A favicon appears in browser tabs, bookmarks, the address bar, browser history, and Google Search results. On mobile, it also shows as a home screen shortcut icon when a user saves a site to their device.

What is the standard favicon size?

The standard browser tab favicon is 16×16 pixels. High-DPI screens use 32×32 px. A complete implementation also needs 180×180 px for iOS, and 192×192 px plus 512×512 px for Android and PWA use.

What file format should a favicon use?

ICO is the original format with the widest browser support. PNG works in all modern browsers and is used for Apple Touch Icons. SVG is the best modern choice since it scales to any size and supports dark mode switching.

Does a favicon affect SEO?

Not directly. There is no confirmed ranking signal tied to favicons. However, Google displays them in every search result. A missing favicon gets replaced with a grey globe placeholder, which can reduce brand recognition and click-through rate in SERPs.

How do I add a favicon to my website?

Place favicon.ico in your root directory for automatic browser detection. Then add a tag inside your page . For CMS platforms, WordPress uses Appearance > Customize > Site Identity, and Shopify uses the Theme Editor.

Why is my favicon not showing in Google Search?

The most common cause is the favicon URL being blocked in robots.txt, which prevents Googlebot-Image from crawling the file. Other causes include a 404 error on the file, wrong image dimensions, or the domain being too new to have been indexed.

What is an Apple Touch Icon?

An Apple Touch Icon is the 180×180 px PNG favicon used when a user saves a website to their iOS home screen. Introduced with the first iPhone in 2007, it acts as the high-resolution shortcut icon on Apple devices.

Can I use my logo as a favicon?

Yes, but most logos need simplification first. Wordmarks and detailed illustrations become unreadable at 16 pixels. Use a single letter, symbol, or icon mark from the logo instead. High contrast and a flat design work best at small sizes.

What tools generate a favicon?

RealFaviconGenerator is the most complete tool, covering all platforms including iOS, Android, and desktop browsers. Favicon.io is faster for simple text or emoji-based icons. Both output the required file sizes and the HTML code for direct use.

Conclusion

This conclusion is for an article presenting what is a favicon, and the answer is straightforward: a small website icon file with a big role in how users identify and trust your site.

Get the file formats right. Cover the essential sizes: 16×16 for browser tabs, 180×180 for Apple Touch Icon, 192×192 and 512×512 for Android Chrome and web app manifest requirements.

Keep the design simple. High contrast, flat shapes, and a single recognizable element hold up at 16 pixels where complex logos fall apart.

Make sure Googlebot-Image can crawl the shortcut icon file. A blocked favicon means a grey globe placeholder in every search result your site appears in.

Small detail. Real consequences. Worth the five minutes it takes to do it correctly.