What is a favicon and how can you add one to your WordPress site?

What is a favicon?

A favicon (short for "favourite icon") is a small square icon that represents your website across the internet. Originally just 16×16 pixels, modern favicons are now recommended to be at least 48×48 pixels for optimal display across different devices and platforms.

• Browser tabs (helping you find your site amongst multiple open tabs)
• Bookmark lists and favourites
• Browser address bars and search suggestions
• Mobile search results on Google (since 2019)
• Browser history lists
• Mobile home screen shortcuts
• Progressive web app icons

Why is it important to have a favicon?

In today's digital landscape, a favicon is no longer optional—it's essential for several reasons:

Brand recognition and professionalism

Your favicon acts as a micro-logo, reinforcing your brand identity every time someone visits your site. Without a custom favicon, WordPress automatically displays its default logo, which makes your site appear less professional and established. This small detail signals to visitors that you've invested in your online presence.

Improved user experience

With the average user having multiple browser tabs open (often 10 or more), a distinctive favicon makes it dramatically easier for visitors to find and return to your site. This improved navigation directly supports user engagement and return visits.

Mobile search visibility

Since 2019, Google has displayed favicons alongside mobile search results. A well-designed favicon can significantly increase your click-through rates by making your listing more visually appealing and trustworthy compared to competitors without favicons.

How do favicons help with SEO and search results?

While favicons aren't a direct ranking factor, they provide several SEO benefits that can improve your overall search performance:

Enhanced click-through rates

Research shows that search results with favicons receive higher click-through rates than those without. When users can quickly identify your brand in search results, they're more likely to click on your listing over competitors.

Brand trust and credibility

A professional favicon signals legitimacy and attention to detail. Users often associate well-designed visual elements with trustworthy websites, which can positively influence their clicking behaviour.

Google's current requirements for search display

As of 2025, Google has specific requirements for favicons to appear in search results:

• Must be square (1:1 aspect ratio)
• Minimum size: 8×8 pixels (though this is not recommended)
• Recommended size: 48×48 pixels or larger for optimal display
• Must be crawlable by Google's bots
• Should be visually representative of your brand
• URL must remain stable (don't change it frequently)

Sometimes yes, but often no. Here's what you need to consider:

The square requirement

Favicons must be perfectly square, so your logo will only work if it's already in a square format. Rectangular or landscape logos won't work without modification.

Size and visibility challenges

At 48×48 pixels (or smaller in some contexts), fine details become invisible. Logos with intricate designs, small text, or complex elements often become unrecognisable when scaled down to favicon size.

Better alternatives

Consider these approaches instead:

• Use a simplified version of your logo
• Extract the most recognisable element from your branding
• Use your company's first initial in your brand colours
• Create a symbol that represents your business
• Ask your designer to create a favicon version when designing your logo

How to create the perfect favicon

Design principles

Follow these guidelines for maximum impact:

• Keep it simple: Bold shapes and strong contrast work best at small sizes
• Ensure scalability: Your design should remain clear from 16×16 up to 512×512 pixels
• Consider backgrounds: Test your favicon against both light and dark backgrounds
• Maintain brand consistency: Use colours and elements that align with your existing branding
• Think recognition: Users should instantly connect this icon with your business

Recommended dimensions and formats

These are the key sizes you should prepare:

• 512×512 pixels: WordPress recommended upload size
• 180×180 pixels: Apple touch icon for iOS devices
• 192×192 pixels: Android home screen shortcut
• 96×96 pixels: Standard favicon for most modern browsers
• 32×32 pixels: Traditional favicon size
• 16×16 pixels: Legacy support

File formats for 2025

• PNG: Most versatile, supports transparency
• SVG: Best for scalability and small file sizes
• ICO: Traditional format, good browser support

Free tools for creating favicons

• RealFaviconGenerator: Comprehensive tool that creates all sizes
• Favicon.io: Simple generator with text and emoji options
• Canva: Design platform with favicon templates
• GIMP or Photoshop: For creating from scratch.

How do I add a favicon to my WordPress site?

WordPress makes adding a favicon straightforward with its built-in Site Icon feature. Here's the step-by-step process:

Method 1: Using the WordPress Customiser (recommended)

1. Log into your WordPress dashboard
2. Navigate to Appearance → Customise
3. Click on Site Identity in the left sidebar
4. Scroll down to find the Site Icon section
5. Click Select Site Icon to upload your image
6. Choose your favicon file (WordPress recommends 512×512 pixels)
7. Crop the image if needed to ensure it's perfectly square
8. Click Publish to save your changes

Method 2: Using WordPress Settings (alternative)

Some WordPress installations offer favicon upload through:

1. Go to Settings → General
2. Look for Site Icon section
3. Click Choose a Site Icon
4. Upload and select your favicon image
5. Save changes

Method 3: Using the Site Editor (Block themes)

If you're using a modern block theme:

1. Go to Appearance → Editor
2. Select Site Identity from the patterns
3. Upload your favicon through the Site Icon option

What WordPress does automatically

Once uploaded, WordPress automatically:

• Generates multiple favicon sizes for different devices
• Adds the necessary HTML code to your site's header
• Ensures compatibility across browsers and platforms
• Displays the favicon in browser tabs, bookmarks, and search results

Best practices for favicons in 2025

Technical optimisation

• File size: Keep your favicon under 100KB for fast loading
• Stable URL: Don't change your favicon URL frequently, as this can affect search display
• Multiple formats: Consider providing both PNG and SVG versions
• Cache considerations: Allow time for changes to appear (browsers cache favicons heavily)

Design optimisation

• Test at different sizes: Ensure your favicon remains recognisable from 16×16 to 512×512 pixels
• Dark mode compatibility: Test how your favicon appears in both light and dark browser themes
• Transparency: Use transparent backgrounds when appropriate for better integration
• Colour contrast: Ensure your favicon stands out against various background colours

SEO optimisation

• Brand consistency: Align your favicon with your overall visual identity
• Memorability: Create something distinctive that users will remember
• Professional appearance: Avoid pixelated or blurry images
• Search guidelines: Follow Google's current requirements for search result display

Favicon not showing in browser

Solution: Clear your browser cache, or try viewing in an incognito/private window. Browser caching can delay favicon updates for several days.

Favicon not appearing in Google search results

Solution: Ensure your favicon meets Google's requirements (square, 48×48px minimum, crawlable). It can take several weeks for Google to update search result displays.

Blurry or pixelated favicon

Solution: Upload a larger, higher-quality version (512×512 pixels minimum) and ensure it's designed for small-scale display.

Different favicon showing on mobile vs desktop

Solution: Use WordPress's Site Icon feature, which automatically handles multiple formats and sizes for different devices.

Still showing default WordPress favicon

Solution: Ensure you've uploaded the favicon correctly through Site Identity in the Customiser. Some themes may have their own favicon settings that override WordPress defaults.

Final thoughts

Adding a favicon to your WordPress site is a small change that delivers significant benefits. In 2025, with mobile search prominence and increased competition for user attention, a professional favicon is essential for:

• Building brand recognition and trust
• Improving user experience across devices
• Enhancing your appearance in search results
• Standing out from competitors

The process is quick and straightforward using WordPress's built-in tools, but the impact on your professional image and user experience is substantial. Don't let this simple branding opportunity slip by—add your custom favicon today and give your website the polished, professional appearance it deserves.

Remember to design with simplicity and recognition in mind, follow current technical requirements, and be patient as changes propagate across browsers and search engines. Your favicon is working 24/7 to represent your brand, so make it count.