What is the optimal size for a WordPress favicon?


A collection of WordPress icons from the MaxiBlocks design library showing various shapes and styles.
MaxiBlocks icon set overview

Introduction

Favicons are those tiny icons seen in browser tabs, bookmarks, or mobile shortcuts—may seem small, but their impact can be surprisingly big. They boost your website’s professionalism, improve user navigation, and help your brand stand out in a sea of open tabs. Whether you’re new to web design or refining an existing site, this guide explains what favicons are, why they matter, and how to create and optimise them for your WordPress site, especially if you use tools like MaxiBlocks and the Maxi Blocks plugin.

Understanding favicons

Definition and role

A favicon (short for “favourites icon”) is a small, square image representing your site. It usually appears:

  • In browser tabs
  • In bookmarks or history lists
  • On mobile home screens
  • Sometimes alongside search results

Think of your favicon as a mini logo, reinforcing brand awareness and providing a quick visual reference for returning visitors.

Why favicons matter

  • Brand recognition: A clear favicon makes your site easily recognisable. Think about the minimalist designs of Apple’s icon, Twitter’s bird, or Facebook’s “f”—these instantly stand out.
  • User experience: When lots of tabs are open, a recognisable favicon helps users find your site faster.
  • SEO considerations: Favicons aren’t a direct ranking factor, but a site with a strong identity often appears more credible, which can indirectly improve engagement and search performance.
A clean vector icon for WordPress provided by MaxiBlocks that can be adjusted in colour and size for personalised design.
Editable vector icons for WordPress from MaxiBlocks

Creating your favicon

Dimensions and format

While a standard 16×16-pixel image works in most browsers, you should consider larger sizes for modern screens. WordPress generally recommends a 512×512 image, from which it can auto-generate icons for various devices. Common file formats include:

  • ICO: Widely supported, can hold multiple sizes in one file
  • PNG: Good quality and compression, though older browsers may have limited support
  • SVG: Scalable and sharp at any size, but not fully compatible with older browsers

Changing your WordPress site icon

To update your site icon, repeat the process outlined in the addition section. It’s a good practice to refresh your favicon periodically, especially if you’re undergoing a rebranding or major site redesign, to keep your site’s look current and consistent.

Technical considerations for WordPress favicons

While WordPress recommends a 512×512 pixel image, favicons appear in various sizes across different devices and platforms. Here’s a breakdown of common sizes and their use cases:

  • 16×16 pixels: The classic size for browser tabs.
  • 32×32 pixels: Used for new tab pages and bookmarks.
  • 96×96 pixels: Often displayed in Google’s mobile search results.
  • 180×180 pixels: The Apple touch icon size for home screen bookmarks on iOS devices.
  • 192×192 pixels: Recommended for Android Chrome app icons.

Designing your icon

  • Keep it simple: Tiny icons lose detail quickly, so opt for bold shapes and clear contrast.
  • Use brand colours: Align your favicon with your site’s brand palette.
  • Preview at different sizes: Ensure it looks good as small as 16×16.
  • Focus on recognisability: Even a stylised letter or symbol can serve as a strong cue.

Tools and resources

  • Graphic design software: Adobe Photoshop, Illustrator, GIMP, or Inkscape help refine icons in detail.
  • Favicon generators: Favicon.io or RealFaviconGenerator create multi-size icons automatically.
  • Canva: Handy for quick icon designs, even if you have limited design experience.

Subscribe to our newsletter

Implementing your favicon

WordPress Customiser

Go to Appearance > Customise > Site Identity, then “Select site icon.” Upload a 512×512 (or larger) image. WordPress will handle scaling, and you can crop if needed.

Theme settings

Some themes include built‑in favicon or “Site Icon” sections in their settings. Check your theme’s documentation or find an option labelled “Favicon” or “Site Icon” in the customisation area.

Favicon plugins

Plugins like Favicon by RealFaviconGenerator, All in One Favicon, or WP Site Icon let you upload a single image and auto-generate icons in various sizes for iOS, Android, desktop, and more.

Manual methods

  1. FTP upload: Place a favicon.ico in your site’s root directory (public_html or www). Clearing your cache might be necessary to see it in action.
  2. Child theme edits: Copy your parent theme’s header.php into a child theme. Insert a link tag in the section referencing your icon:  This keeps changes safe from theme updates. 

MaxiBlocks integration 

MaxiBlocks integrates seamlessly with WordPress’s Site Identity. While MaxiBlocks primarily focuses on page-building features, it aligns with the WordPress Customiser to ensure your favicon settings remain consistent with your site’s style.

A simple, refined icon from the MaxiBlocks library that suits a modern, professional website design.
Minimalist MaxiBlocks icon for modern websites

Troubleshooting and optimisation

Common problems and fixes

  • Not showing up: Clear browser cache, verify file name (favicon.ico) and path, and ensure you placed it in the correct directory.
  • Poor resolution: Double-check that your source image is large and crisp. WordPress can auto-size it, but starting with at least 512×512 is ideal.
  • Inconsistent display: Some older browsers or OSs may require additional sizes. Tools like RealFaviconGenerator can produce multiple files.

Multi-device compatibility

Modern screens vary in pixel density. Creating multiple icon sizes or letting WordPress handle them helps your icon look good on everything from older laptops to 4K monitors and mobiles.

Performance and accessibility

  • Optimise the file size: Keep your icon as small as possible without losing clarity.
  • High contrast: Ensure it’s readable on light and dark backgrounds.
  • Alt text: If your site uses accessible design frameworks, add alt text so screen readers can interpret the icon’s purpose.

Build like a pro

Advanced techniques and final thoughts

Animated or dynamic favicons

You can create animated GIF or APNG icons, or even use JavaScript for real-time updates (e.g., unread notifications). While eye-catching, these can be distracting or have limited browser support. Use them sparingly.

Touch icons and app icons

If users pin your site on iOS or Android, you may want to provide larger icons for home screens (like 180×180 for iOS or 192×192 for Android). This ensures a polished look across platforms.

Inspiration and trends

Minimalist symbols, negative space, and subtle gradients are current trends. Examine major brands (Twitter, Netflix, etc.) for best-in-class examples, but tailor your design to your brand.

Final words

A favicon is more than a tiny icon—it’s part of your site’s identity. By choosing a distinct, clear design and implementing it correctly, you boost brand recognition, make browsing easier for visitors, and add a professional touch. Whether you rely on WordPress’s default options, a theme’s built‑in settings, or a plugin, the key is consistency and clarity.

Tip: If you want a faster website-building experience overall, consider MaxiBlocks and the Maxi Blocks plugin. Their design-centric features, combined with a well-chosen favicon, bring your site closer to a polished, memorable user experience. Take time to test and refine your icon, and you’ll have a small but meaningful asset that helps your site stand out in any browser

WordPress icons resources for design and customization

Explore our articles on choosing, customizing, and optimizing WordPress icons for faster, accessible sites.

HomePage-Maxi-Pils

Frequently asked questions about WordPress favicons 

What is a favicon and why is it useful?

A favicon is a small icon displayed in browser tabs, bookmarks, and sometimes in search results. It helps users recognise and remember your site, enhancing your brand’s visibility and professional look.

What is the recommended size and format?

WordPress suggests a 512×512 pixel image for clarity on high-resolution screens. Favicons are typically in ICO format, though PNG also works. Some people use SVG, but not all browsers fully support it.

How do I add or change a favicon in WordPress?

You can upload a favicon through the WordPress Customiser by going to Appearance > Customise > Site Identity. Many themes also provide a dedicated favicon area. For extra flexibility, plugins like Favicon by RealFaviconGenerator or All in One Favicon handle different sizes and device setups. Advanced users may manually upload via FTP or edit header.php in a child theme.

Does a favicon affect SEO?

While not a direct ranking factor, a favicon can indirectly improve site engagement by making your brand appear credible and recognisable in search results, potentially leading to better click‑through rates and retention.

Why is my favicon missing or not displaying?

Clear your browser cache if your favicon does not appear. Also check the file’s location (often in your site’s root directory) and whether it is named correctly (usually favicon.ico). If you’re linking it manually, ensure you have the correct file path in your code.

Can I use animated or dynamic favicons?

Yes, but browser support is limited, and complex animations can be distracting or raise accessibility concerns. Use a subtle approach, and test the results across different browsers before implementing.

What about touch icons on mobile devices?

Touch icons, commonly 180×180 pixels, display when users save your site to their mobile home screen. You can add them in the same ways you would add a regular favicon, ensuring a polished appearance for mobile users.

Any tips on designing a favicon?

Keep the design simple, use high contrast so it remains clear at small sizes, and consider your brand colours or a simplified logo. Test the icon on several devices and screen sizes to confirm its legibility.

Does MaxiBlocks support favicons?

MaxiBlocks integrates smoothly with WordPress’s Site Identity feature and standard theme settings. Uploading a favicon through these usual WordPress routes ensures consistency with your design, even when using MaxiBlocks.

Should I update my favicon regularly?

If your branding changes or if you notice display problems, revisiting and updating your favicon keeps your site looking consistent and professional. Regular checks help you catch any potential issues early.

Author-Kyra

Kyra Pieterse

Author

Kyra is the co-founder and creative lead of MaxiBlocks, an open-source page builder for WordPress Gutenberg.

You may also like