What is an SEO audit?

An SEO audit reviews your site's technical SEO, on-page signals, content quality, metadata, and crawlability so you can fix issues that limit organic visibility.

How do I check my website's SEO score?

Enter your URL into a free SEO audit tool or SEO checker to scan your page, calculate a score, and surface the issues affecting performance and rankings.

What's a good SEO score?

A good SEO score is typically 80 or higher, but the most useful score is one that highlights the fixes needed to improve rankings, crawlability, and conversions.

How much does an SEO audit cost?

SEO audits can be free when run through automated tools, while consultant-led audits can cost hundreds or thousands of dollars depending on scope and strategy support.

How often should I audit my website?

Audit your website monthly and after major site changes such as redesigns, migrations, CMS updates, or new landing page launches.

By Clarity SEOPublished March 15, 2026Updated April 15, 2026

How to Add a Favicon to Your Website

Summary: To add a favicon to your website, create a square PNG image (minimum 512×512 pixels), generate a multi-size favicon package using a tool like RealFaviconGenerator, then add the <link> tags to your HTML <head> section. A properly configured favicon improves brand recognition in browser tabs, bookmarks, and Google's mobile search results — where favicons appear next to every listing.

A favicon is the small icon that appears in browser tabs, bookmarks, and search results. It's one of the most visible brand elements on the web — and one of the easiest to add. Missing it signals an unfinished website, which subtly damages trust with both visitors and search engines.

Despite being a minor technical element, favicons have a measurable impact on user engagement. According to a web.dev analysis of browser behaviour, users with 10+ tabs open rely almost exclusively on favicons to identify and switch between sites. A missing favicon means your tab becomes anonymous — indistinguishable from dozens of others competing for attention.

What Is a Favicon?

A favicon (short for "favourite icon") is a small square image associated with a website. The term dates back to 1999 when Internet Explorer 5 first introduced the feature, originally tied to the bookmarking ("favourites") system. Today, favicons serve a much broader role across the web ecosystem.

Browsers display your favicon in:

The browser tab (left of the page title)

Bookmarks and reading lists

Browser history

On mobile, as the icon when users "add to home screen"

In Google search results on mobile (and increasingly on desktop)

In Progressive Web App (PWA) installations

Windows taskbar pins and macOS dock shortcuts

The traditional format is a 16×16 or 32×32 pixel .ico file named favicon.ico placed in the root of your site. Modern best practice includes multiple sizes for different devices and use cases. According to MDN Web Docs, the <link rel="icon"> element supports multiple formats including ICO, PNG, SVG, and GIF.

The minimal HTML implementation:

<head> <link rel="icon" href="/favicon.ico" type="image/x-icon"> </head>

A complete modern implementation includes multiple sizes and formats to cover every platform:

<head> <!-- Standard favicon --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- Apple Touch Icon (iOS home screen) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Android / PWA --> <link rel="manifest" href="/site.webmanifest"> <!-- Safari Pinned Tab --> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <!-- IE/Edge legacy --> <link rel="shortcut icon" href="/favicon.ico"> </head>

Favicon Formats Explained: ICO vs PNG vs SVG

Choosing the right favicon format matters more than most developers realise. Each format has distinct advantages and browser support characteristics:

ICO format: The original favicon format, supported by every browser since IE5. An ICO file can contain multiple resolutions (16×16, 32×32, 48×48) within a single file. This remains the best fallback format and the one browsers look for automatically at /favicon.ico even without a <link> tag.

PNG format: The modern standard for favicons. PNG supports transparency, offers better compression than ICO for single-resolution files, and is the format most favicon generators output. All modern browsers support PNG favicons via the <link rel="icon" type="image/png"> tag.

SVG format: The newest option, SVG favicons scale perfectly at any resolution and can even respond to prefers-color-scheme media queries — meaning your favicon can automatically switch between light and dark mode. According to Can I Use data, SVG favicon support is now available in Chrome, Firefox, Edge, and Opera, though Safari support remains limited.

<!-- SVG favicon with dark mode support --> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" sizes="any"> <!-- fallback -->

Best practice: Use SVG as your primary favicon for modern browsers, PNG for Apple Touch Icons and Android, and ICO as the universal fallback. This three-layer approach ensures every visitor sees your brand icon regardless of their browser or device.

Why Favicons Matter for SEO

While a favicon is not a direct Google ranking factor, its impact on SEO is more significant than many site owners realise. Here's how favicons influence your search presence:

Google SERP display: Google displays favicons next to search results on mobile (and increasingly on desktop). According to Google's official favicon documentation, your favicon must meet specific guidelines to appear in search results — including being a multiple of 48px square, with the recommended size being 48×48px. Sites without a qualifying favicon display a generic globe icon, making your listing visually weaker.

Brand recognition and CTR: Users with multiple tabs open identify sites by favicons. A recognisable favicon increases return visits and click-through rates from search results. A Moz analysis of SERP features found that branded visual elements in search results positively correlate with higher click-through rates.

Trust signals: A missing favicon is a signal of an incomplete or low-effort site. Trust affects conversion rates, time-on-site, and the engagement signals Google uses to assess quality. First impressions form in approximately 50 milliseconds according to research from the Missouri University of Science and Technology, and a polished favicon contributes to that initial perception.

Bookmarks and PWA install: Users who bookmark your site or install it as a Progressive Web App see your favicon as the app icon. A crisp, recognisable favicon makes your site feel professional and app-like.

Report Card score: Clarity SEO's 29-point audit specifically checks for favicon presence — it's one of the baseline technical indicators of a properly maintained site. A missing favicon affects your overall SEO score and signals gaps in technical implementation.

Social sharing overlap: While favicons and Open Graph tags serve different purposes, both contribute to your brand's visual identity across the web. Sites that get favicons right tend to also get OG images right — and vice versa.

Google's Favicon Requirements for Search Results

Google has specific requirements for favicons to appear in search results. If your favicon doesn't meet these criteria, Google will show a generic globe icon instead — losing your brand visibility in every search listing. According to Google's favicon guidelines:

The favicon file must be a multiple of 48px square (e.g., 48×48, 96×96, 144×144)

The favicon URL must be crawlable by Googlebot (not blocked by robots.txt)

The favicon must visually represent your website's brand

The favicon must not be inappropriate, obscene, or related to hate symbols

The favicon must not be a generic or empty image

Google renders the favicon at 16×16px in search results but requires a higher-resolution source for quality. If you use a 16×16 source, it may appear blurry. Providing a 48×48px minimum ensures crisp rendering. Make sure your robots.txt file doesn't block access to your favicon files — this is a surprisingly common oversight that prevents Google from indexing your icon.

How to Check Your Favicon

Clarity SEO's free Report Card checks whether your site has a favicon configured correctly and flags any issues with the implementation.

→ Check your favicon with Clarity SEO

You can also verify manually: visit your website in any browser and check whether an icon appears in the browser tab. If the tab shows a generic browser icon or a blank square, your favicon is missing or broken.

For a more thorough check, use the RealFaviconGenerator Favicon Checker — it tests your favicon across all major browsers and platforms, including iOS, Android, Windows, and macOS. This tool catches issues like missing Apple Touch Icons or incorrect manifest files that a simple browser tab check would miss.

You can also check programmatically via the terminal:

# Check if favicon.ico exists at root curl -sI https://yoursite.com/favicon.ico | head -5 # Check HTML head for favicon link tags curl -s https://yoursite.com | grep -i 'rel="icon"\|rel="shortcut icon"\|rel="apple-touch-icon"'

How to Create and Add a Favicon

Step 1: Design Your Favicon

Start with a high-resolution square image of your logo or brand mark (minimum 512×512 pixels, PNG format with transparent background). Keep these design principles in mind:

Simplify aggressively: Your favicon will be displayed at 16×16 pixels in browser tabs. Complex logos with thin lines, gradients, or small text become unreadable blobs. Reduce to a single bold mark, letter, or symbol.

Use your brand colour: Colour is the primary recognition signal at small sizes. A distinctive brand colour in your favicon helps users spot your site instantly among dozens of tabs.

Test at small sizes: Before generating the favicon package, resize your design to 16×16 and 32×32 pixels to check it's still recognisable. If you can't tell what it is, simplify further.

Consider dark mode: Many users browse with dark browser themes. A favicon that relies on dark colours may disappear against a dark tab bar. Add a subtle light border or use an SVG favicon that adapts to colour scheme.

Step 2: Generate Your Favicon Package

Recommended approach:

Go to RealFaviconGenerator.net — the most comprehensive free favicon generator available.

Upload your square image (512×512px minimum).

Configure platform-specific settings (iOS background colour, Windows tile colour, etc.).

Click Generate your Favicons and HTML code.

Download the package — it includes all required sizes and a ready-to-paste HTML snippet.

The generated package typically includes:

favicon.ico          (16x16 + 32x32 multi-size ICO) favicon-16x16.png favicon-32x32.png apple-touch-icon.png (180x180) android-chrome-192x192.png android-chrome-512x512.png safari-pinned-tab.svg site.webmanifest

The site.webmanifest file is a JSON configuration that tells Android browsers and PWA-capable browsers about your app's icons, name, and theme colour. It looks like this:

{ "name": "Your Site Name", "short_name": "Site", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }

For HTML/Generic Websites

Upload all favicon files to your website's root directory (the same folder as your homepage's index.html).

Add the HTML snippet from RealFaviconGenerator to the <head> of every page (or your master template/layout):

<head> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <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="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb"> <meta name="msapplication-TileColor" content="#2563eb"> <meta name="theme-color" content="#ffffff"> </head>

Verify by opening your site in a browser and checking the tab icon.

Test with the RealFaviconGenerator Favicon Checker to verify all platforms.

For Next.js / React Applications

Modern React frameworks have their own favicon conventions:

Next.js (App Router): Place your favicon files in the app/ directory. Next.js automatically picks up favicon.ico, icon.png, and apple-icon.png files placed in the root app directory.

app/ ├── favicon.ico ├── icon.png          (or icon.svg) ├── apple-icon.png └── layout.tsx

Next.js (Pages Router): Place favicon files in the public/ directory and reference them in your _document.tsx or _app.tsx using Next.js's Head component.

Create React App / Vite: Place all favicon files in the public/ directory and add the link tags to your index.html.

For WordPress

Method 1: WordPress Customiser (easiest)

Go to Appearance → Customize → Site Identity.

Under Site Icon, click Select image.

Upload a square image (minimum 512×512 pixels recommended).

WordPress automatically generates the required sizes.

Click Publish.

WordPress saves this as the "Site Icon" and outputs the correct <link> tags in your <head> automatically. Note that WordPress generates the Apple Touch Icon at 180×180px from your upload, so start with the highest resolution you have.

Method 2: Plugin for full platform control

Use Favicon by RealFaviconGenerator (available in the WordPress plugin directory):

Install and activate.

Go to Appearance → Favicon (or find it in the plugin menu).

Follow the wizard to generate and upload all favicon variants.

This plugin gives you full platform-specific control beyond the WordPress Customiser — including Safari pinned tab icons, Windows tile colours, and Android manifest settings.

For Shopify

Go to Online Store → Themes → Customize.

In the theme editor, go to Theme settings → Favicon.

Upload your favicon image (PNG format, square, at least 32×32 pixels — 512×512 recommended).

Shopify automatically serves the appropriate size.

Save.

For advanced favicon control (Apple Touch Icon, Android icons), edit your theme's layout/theme.liquid to add the full set of <link> tags manually in the <head>.

For Wix / Squarespace / Webflow

Wix:

Go to Settings → Favicon & App Icon.

Upload your image (PNG or ICO, minimum 100×100 pixels).

Wix generates the favicon and Apple Touch Icon automatically.

Squarespace:

Go to Design → Browser Icon (Favicon).

Upload a PNG (minimum 100×100 pixels; 300×300 recommended for clarity).

Save.

Webflow:

Go to Project Settings → General → Favicon & Touch Icons.

Upload separate images for Favicon (32×32 PNG), Touch Icon (180×180 PNG for iOS), and App Icon (192×192 PNG for Android).

Publish your site.

How Favicons Connect to Other SEO Elements

Your favicon is part of a broader technical SEO foundation. It connects to several other on-page elements that Clarity SEO checks:

Title tags: Your title tag appears next to your favicon in browser tabs. A strong favicon paired with a clear, keyword-rich title creates a powerful visual-text combination that users recognise instantly when switching between tabs.

Open Graph tags: Open Graph images serve a similar branding function on social media that favicons serve in browser tabs. Sites that invest in one tend to invest in both — creating a consistent visual identity across all touchpoints.

Meta descriptions: In Google's mobile search results, your favicon appears directly beside your meta description. Together they form the entire visual impression of your listing — a branded icon followed by compelling copy.

Structured data: Structured data markup enhances your search listings with rich snippets, and your favicon appears alongside those enhanced results. The combination of a recognisable favicon plus rich results like star ratings or FAQ dropdowns significantly increases click-through rates.

Mobile friendliness: On mobile devices, favicons appear in browser tabs, "Add to Home Screen" prompts, and search results. A crisp Apple Touch Icon (180×180px) is essential for iOS users who save your site as a home screen bookmark.

Favicon Statistics and Industry Data

Understanding how widespread (and impactful) favicon implementation is can help prioritise this seemingly small task:

According to web.dev, the average user has 10-20 browser tabs open simultaneously, making favicons the primary way users identify and navigate between sites.

Google's mobile search results display favicons for 100% of organic listings — meaning every search result either shows your branded icon or a generic grey globe.

According to HTTP Archive data, approximately 84% of the top 1 million websites have a valid favicon.ico file. The remaining 16% return 404 errors for favicon requests, generating unnecessary server errors in their logs.

A missing favicon generates a 404 error on every page load (browsers automatically request /favicon.ico), which wastes server resources and clutters error logs.

PWA installations have grown significantly — according to Google, over 80% of top-traffic sites now support "Add to Home Screen" functionality, which requires properly configured favicon/icon assets.

Common Mistakes to Avoid

Only uploading favicon.ico: The .ico format covers browsers, but you'll miss Apple Touch Icons (iOS), Android home screen icons, and Safari Pinned Tab icons. Use a full favicon package.

Non-square image: Browsers force favicons to square. A non-square logo gets cropped or squeezed awkwardly. Create a square-specific version of your logo for favicon use.

Too much detail: Favicons display at 16–32px. Complex logos with thin lines or small text become unreadable. Simplify to a single bold mark or letter.

Wrong file path: If the favicon files are uploaded but the HTML href path is wrong, browsers show a broken icon or fall back to the default. Always verify the paths match where the files are hosted.

Caching confusion: After uploading a new favicon, browsers cache the old one aggressively. Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or test in an incognito window to see the updated icon.

Forgetting the .webmanifest file: The site.webmanifest file is needed for Progressive Web App behaviour and Android home screen icons. Include it even if you're not building a PWA.

Blocking favicon in robots.txt: If your robots.txt blocks the directory where your favicon files live, Google can't crawl them — and your search listings will show a generic icon instead of your brand. Check our guide on robots.txt best practices to avoid this.

Using a low-resolution source image: Starting with a 32×32px image means your Apple Touch Icon (180×180) and Android icon (512×512) will be blurry upscaled versions. Always start with the largest size and scale down.

FAQ

What size should a favicon be?

The minimum favicon size is 16×16 pixels, but you should generate multiple sizes for modern browser and device support. Use 16×16, 32×32, and 180×180 (Apple Touch Icon) as a baseline. For PWA/Android support, also include 192×192 and 512×512. Google specifically requires a multiple of 48×48px for favicons to appear in search results. Start with a 512×512px source image and use a generator like RealFaviconGenerator to create all required sizes automatically.

What format should a favicon be?

The traditional format is .ico, which browsers have supported since the early 2000s. Modern practice uses PNG files at multiple sizes, with .ico as a fallback for older browsers. SVG favicons are increasingly supported and scale perfectly at any size — plus they can adapt to dark mode using CSS media queries. The recommended approach is to provide all three: SVG as primary, PNG for Apple/Android platforms, and ICO as the universal fallback.

Why isn't my favicon showing up?

Common causes: (1) wrong file path in the <link> tag — double-check the href matches where the file is actually hosted, (2) browser cache showing the old icon — try incognito mode or hard refresh with Ctrl+Shift+R, (3) file not in the web root directory, (4) favicon.ico blocked in robots.txt, (5) incorrect MIME type set by your server — the server should return image/x-icon for ICO files and image/png for PNG files. Use the RealFaviconGenerator Checker to diagnose the specific issue.

Does a favicon affect SEO rankings?

A favicon is not a direct ranking factor in Google's algorithm. However, it significantly affects how your site appears in Google's mobile search results — Google displays favicons next to every organic listing on mobile. A missing or broken favicon means your listing shows a generic globe icon, which can reduce click-through rates compared to competitors with branded favicons. Since click-through rate influences rankings indirectly through user engagement signals, a strong favicon contributes to your overall SEO performance.

Can I use a PNG instead of ICO for my favicon?

Yes. Modern browsers all support PNG favicons. Use <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. Keep the .ico file in your root for legacy browser support (no <link> tag needed — browsers check for favicon.ico automatically). For the broadest compatibility, provide both formats.

How do I make a favicon that works in dark mode?

Use an SVG favicon with embedded CSS media queries. Inside your SVG file, add a <style> block that uses @media (prefers-color-scheme: dark) to change fill colours. For example, a dark logo on a transparent background can switch to a light logo when the user's system is in dark mode. This ensures your favicon remains visible regardless of the browser's theme. Note that this only works with SVG favicons — ICO and PNG formats cannot adapt dynamically.

Summary

A favicon takes ten minutes to add and makes your site look finished, trustworthy, and professional in browser tabs, bookmarks, and Google's search results. Generate a full favicon package using RealFaviconGenerator, upload the files, add the HTML link tags to your <head>, and verify everything works with the Clarity SEO audit. Don't forget the Apple Touch Icon, Android manifest, and Safari pinned tab icon — covering all platforms ensures every visitor sees your brand, not a generic grey globe.

Check your site's favicon status as part of a full technical SEO audit.

→ Get your free SEO Report Card