What Is a Favicon? Definition and How It Works
Short answer
A favicon (short for 'favorite icon') is a small square image, typically 16x16 to 512x512 pixels, that represents a website or brand in browser tabs, bookmarks, search results, and AI answer engines. It is generated from an image file referenced in a site's HTML or root directory and displayed automatically by browsers and platforms that recognize it. A missing or broken favicon is a common technical SEO issue flagged in site audits.
874
Websites audited by SeoVision
SeoVision audit data · as of 2026-08-12
75/100
Median SEO score across audited sites
SeoVision audit data · as of 2026-08-12
89/100
Median Technical SEO score across audited sites
SeoVision audit data · as of 2026-08-12
What Is a Favicon?
A favicon (short for "favorite icon") is a small square image, typically 16x16 to 512x512 pixels, that represents a website or brand in browser tabs, bookmarks, search results, and AI answer engines. It is generated from an image file (ICO, PNG, or SVG) referenced in a site's HTML or root directory and displayed automatically by browsers and platforms that recognize it.
Favicons act as a visual shorthand for a domain. They help users recognize a brand at a glance among dozens of open browser tabs or bookmarked links, and they are one of the smallest but most persistent brand assets on the web.
How Do Favicons Work?
A favicon works through a simple discovery mechanism: browsers look for an image file either declared explicitly in the HTML `<head>` or placed at a default location on the server. Once found, the browser caches and displays it automatically.
There are two common ways a site declares a favicon:
- HTML link tag: `<link rel="icon" href="/favicon.png">` inside the `<head>` section tells the browser exactly where the file lives and which format to use.
- Root directory convention: many browsers and crawlers will also check for `/favicon.ico` at the domain root even without an explicit tag, as a fallback.
Modern sites often include multiple favicon variants for different contexts, including `apple-touch-icon` for iOS home-screen bookmarks and larger PNGs for Android and Progressive Web App manifests.
Where Do Favicons Appear?
Favicons show up anywhere a platform renders a compact link to a website. Common locations include:
- Browser tabs: the icon next to the page title at the top of an open tab.
- Bookmarks bar and history: icons help users scan saved or visited pages visually.
- Address bar: some browsers display the favicon next to the URL.
- Search engine results pages (SERP): Google and other search engines often show a small favicon next to the domain name in results.
- AI answer engines: platforms like ChatGPT, Perplexity, Gemini, and Google AI Overview increasingly render source favicons next to cited links, giving brands a visual presence inside AI-generated answers.
Common Favicon File Formats and Sizes
Favicons can be built in several formats, each with tradeoffs:
- ICO: the original favicon format, capable of bundling multiple sizes in one file; broadly supported by older browsers.
- PNG: widely used for modern favicons, supports transparency, easy to generate at multiple resolutions.
- SVG: a scalable vector format gaining support in newer browsers, ideal for crisp rendering at any size.
Typical required sizes include 16x16 and 32x32 pixels for browser tabs, 180x180 pixels for Apple touch icons, and up to 512x512 pixels for app icons and manifest files. Google Search Console recommends a square, uncluttered image that stays recognizable at small sizes.
Why Does a Favicon Matter for SEO?
A favicon is not a direct ranking factor, but it is part of the technical and brand signals search engines and AI engines evaluate. A missing, broken, or inconsistent favicon can make a site look unfinished or reduce click-through in search results where competitors display a clean icon.
Across the 874 websites SeoVision has audited (as of 2026-08-12), favicon and related technical issues are among the recurring items found during automated technical checks. The median Technical SEO score across audited sites is 89/100, and small issues like a missing favicon or broken icon reference are the kind of easy fixes that can nudge that score higher.
How Does a Favicon Affect AI Visibility (GEO/AEO)?
Favicons contribute to brand recognizability inside AI-generated answers, where citations and source links are often rendered with a small icon next to the domain. When an AI answer engine such as ChatGPT, Perplexity, or Google AI Overview cites a page, a clear favicon reinforces which brand is being referenced, even in a compact citation list alongside competitors.
This matters more as generative engine optimization (GEO) and answer engine optimization (AEO) become part of standard visibility strategy. A missing or generic favicon does not block citation, but it is one more small signal that affects how trustworthy and polished a brand appears when its content surfaces inside an AI answer.
How Do I Add or Check a Favicon on My Site?
Adding a favicon takes three steps: create a square image (ideally starting at 512x512 pixels and exporting smaller sizes), upload it to your site's root or assets folder, and reference it with a `<link rel="icon">` tag in the HTML head. Most CMS platforms also offer a dedicated favicon upload field in site settings.
To check whether a favicon is live and correctly served, load `yourdomain.com/favicon.ico` directly in a browser, inspect the page source for the `<link rel="icon">` tag, and confirm the file returns a 200 HTTP status rather than a 404. This kind of crawlability and status-code check is exactly what a broader SEO audit covers alongside other technical elements.
Common Favicon Mistakes
The most frequent favicon issues found on sites include:
- Missing favicon file: no icon reference at all, causing browsers to show a blank or generic page icon.
- Broken file path: the `<link rel="icon">` tag points to a URL that returns a 404 or redirect.
- Wrong format or size: a low-resolution or non-square image that looks blurry or gets cropped oddly in tabs.
- Inconsistent icons across pages: different favicons served on different sections of the same domain, confusing brand recognition.
- No apple-touch-icon: missing the dedicated icon for iOS bookmarking, resulting in a screenshot-based icon instead of the brand mark.
FAQs
What is a favicon?
A favicon is a small square icon, usually between 16x16 and 512x512 pixels, that represents a website or brand in browser tabs, bookmarks, search results, and AI answer engines. It is generated from an image file referenced in the site's HTML or placed at the root directory.
How do I add a favicon to my website?
Create a square image, upload it to your site's root or assets folder, and add a `<link rel="icon" href="/favicon.png">` tag inside the HTML `<head>`. Most website builders and CMS platforms also provide a direct favicon upload option in their settings panel.
What file format should a favicon be?
ICO is the traditional format and supports multiple embedded sizes, PNG is widely supported and simple to generate, and SVG offers scalable, crisp rendering on modern browsers. Most sites today use PNG for the main favicon and add an ICO fallback for older browser compatibility.
Does a favicon affect SEO or AI visibility?
A favicon is not a direct ranking factor, but it affects how polished a site looks in search results and how recognizable a brand appears in AI-generated citations. It is one of the technical elements checked during a full technical SEO audit.
Why isn't my favicon showing up in search results?
Common causes are a broken file path, an incorrect HTTP status code on the icon file, a missing `<link rel="icon">` tag, or an image that does not meet size and format guidelines. Checking the file directly in a browser and reviewing HTTP status codes usually reveals the issue.
How SeoVision checks this
SeoVision's free site audit runs favicon and related technical checks as part of its standard scan, evaluating crawlability, redirects, sitemaps, HTTP status codes, and canonical tags on every audited site. Failures such as a missing or broken favicon reference are flagged and turned into a prioritized action plan. This sits alongside checks covered in guides like how to check robots.txt and what llms.txt is, which look at other technical signals search engines and AI crawlers rely on.
More in Glossary
View all →Google AI Mode vs AI Overview Explained
Google AI Overview summarizes results on the SERP; AI Mode is a full-page conversational search experience. See how they differ and how to track them.
Large Language Models (LLMs): What They Are
A large language model (LLM) is an AI model trained on massive text data to understand and generate human-like language. Learn how LLMs work.
What Is LLM Optimization? Definition & Meaning
LLM optimization (LLMO) explained: what it means, how it works, and how it differs from SEO, GEO, and AEO. Clear definitions and examples.
What Is Open Graph? Meaning and How It Works
Open Graph is the meta tag protocol that controls how pages preview on social platforms and AI crawlers. Learn og:title, og:image and more.
What Is PageRank? Definition Explained
PageRank is Google's link-based ranking algorithm. Learn how it works, whether it's still used, and how it relates to SEO and AI visibility today.
See where your own site stands
Run a free SeoVision audit — it checks this and dozens of other SEO and AI-visibility factors on your site.
Free · no signup needed · or get started with the full platform