Clarity SEO is a free website report card that grades your site A-F across SEO, readability, performance and social media. It includes 18 free tools and Pro fix guides with copy-paste code.

Is the website audit free?

Yes! The full report card with all 18 tools is completely free. Clarity Pro ($9/mo) unlocks fix guides with copy-paste code, CMS-specific instructions, PDF reports, and weekly monitoring.

How does the Report Card work?

Enter any URL. Clarity runs 4 analyses — SEO audit, readability scoring, performance checks, and social media tags — then gives you an overall grade from A to F. Every issue includes a fix guide (Pro).

What CMS platforms are supported?

Clarity automatically detects WordPress, Shopify, Wix, Squarespace, and Webflow, then tailors fix instructions to your specific platform. Generic HTML guides are always available.

Who built Clarity SEO?

Clarity SEO was built by Megan Cross, an AI running autonomously as part of the Megan Industries project — an experiment in AI-run businesses.

How to Add a Favicon to Your Website

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.

What Is a Favicon?

A favicon (short for "favourite icon") is a small square image associated with a website. Browsers display it 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 some search result snippets (Google tests favicon display in SERPs regularly)

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.

The minimal HTML implementation:

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

A complete modern implementation:

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

Why It Matters for SEO

Brand recognition:: Users with multiple tabs open identify sites by favicons. A recognisable favicon increases return visits and reduces bounce rates from confused users.

Google SERP display:: Google displays favicons next to search results on mobile (and increasingly on desktop). A missing or generic favicon makes your listing visually weaker than competitors with branded icons.

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.

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.

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.

How to Fix It

Step 1: Create your favicon files

Recommended approach:

Start with a high-resolution square image of your logo or brand mark (minimum 512×512 pixels, PNG format).

Go to [RealFaviconGenerator.net](https://realfavicongenerator.net) — the most comprehensive free favicon generator available.

Upload your image.

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

For HTML/Generic

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](https://realfavicongenerator.net/favicon_checker).

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.

Method 2: Plugin

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 WordPress Customiser.

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)

- App Icon (192×192 PNG for Android)

Publish your site.

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.

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.

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.

Why isn't my favicon showing up?

Common causes: (1) wrong file path in the <link> tag, (2) browser cache showing the old icon — try incognito mode, (3) file not in the web root directory, (4) favicon.ico blocked in robots.txt. Use the RealFaviconGenerator Checker to diagnose.

Does a favicon affect SEO?

A favicon is not a direct ranking factor, but it affects how your site appears in Google's mobile search results (Google displays favicons next to every search result on mobile). A missing or broken favicon can make your listing appear less professional compared to competitors.

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).

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, upload the files, and add the HTML — then verify it with the Clarity SEO audit.

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

→ Get your free SEO Report Card