How to Add a Favicon in WordPress

Adding a favicon in WordPress is done through the Customizer under Site Identity, where you upload a square image that WordPress automatically resizes for browser tabs, bookmarks, and mobile home screens. In the block-based Twenty Twenty-Four theme and most modern setups, you go to Appearance → Customize → Site Identity → Site Icon, or Appearance → Editor → Styles → Site Identity in full-site editing themes. The process takes under a minute once you have a 512×512 pixel image ready.

What a Favicon Actually Is

A favicon (short for “favorites icon”) is the small image that appears in a browser tab, next to the address bar, in bookmarks, and on mobile home screens when a site is saved. It is not a single file anymore—modern browsers request multiple sizes and formats, but WordPress handles all of that for you when you set a Site Icon. The icon you upload is used to generate the classic favicon.ico, Apple touch icons, and the site.webmanifest file for Android devices. The word “favicon” comes from the early days of Internet Explorer, which was the first browser to support a custom icon in the favorites menu.

Why Your Site Needs One

A favicon is a small but significant part of your site’s identity. It helps users find your tab among dozens of open tabs, makes bookmarks recognizable, and adds a professional touch to your URL in search results (Google displays it next to your listing). Without one, browsers show a generic globe or document icon, which looks unfinished and makes your site harder to identify at a glance. For a business, it is also a subtle branding opportunity—the same icon can appear on mobile home screens when someone “Adds to Home Screen,” reinforcing your logo every time they open your site.

How WordPress Handles Favicons

WordPress has built-in favicon support since version 4.3, so you do not need a plugin for the basic task. When you upload a Site Icon, WordPress:

• Creates a favicon.ico file (32×32) for older browsers.
• Generates Apple touch icons (180×180) for iOS home screens.
• Creates an Android Chrome icon (192×192 and 512×512) and a site.webmanifest file.
• Adds the necessary <link> tags to your site’s <head> automatically.

This means you only need to upload one square image, and WordPress does the rest. The image is stored in your media library, and you can change it anytime by uploading a new one.

Step-by-Step: Adding a Favicon in Classic Themes

If your theme uses the classic Customizer (most older and many current themes), here is the exact path:

1. Log in to your WordPress dashboard.
2. Go to Appearance → Customize.
3. Click on Site Identity in the left panel.
4. Scroll down to Site Icon and click Select image.
5. Upload a square image (at least 512×512 pixels) or choose one from your media library.
6. Click Select, then Publish.

WordPress will automatically crop the image to a square if needed, but it is best to upload a perfectly square image to avoid cropping important parts of your logo.

Step-by-Step: Adding a Favicon in Block Themes (Full Site Editing)

If your theme is a block theme like Twenty Twenty-Four or Twenty Twenty-Five, the path is slightly different:

1. Go to Appearance → Editor (this opens the Site Editor).
2. Click on the Styles panel (usually a palette icon in the top right).
3. Click on the Site Identity section (sometimes under “Layout” or directly visible).
4. Find the Site Icon field and click to upload an image.
5. Select your image and it will be applied immediately.

In some block themes, you may also see a “Logo” field—that is different from the favicon. The Site Icon is the one that appears in the browser tab.

Choosing the Right Image

Your favicon should be simple and recognizable even at tiny sizes. Here are practical guidelines:

• Use a square image—WordPress will crop it to a square anyway, so a non-square image may lose important parts.
• Minimum 512×512 pixels—this ensures it looks sharp on high-DPI screens and mobile devices.
• Keep it simple—fine details and text will be illegible at 16×16 pixels. A single letter, a simple shape, or a simplified logo works best.
• Consider transparency—a transparent background works well on light and dark browser themes, but make sure your design has enough contrast.
• Test on different backgrounds—some browsers use dark tab bars, so a dark icon may disappear. A light background or a white border can help.

If you don’t have a 512×512 version of your logo, you can use any image editor to resize it. Online tools like Canva or even Paint can do this, but avoid upscaling a tiny image—it will look blurry.

Common Problems and How to Fix Them

Even after uploading a favicon, you might not see it immediately. Here are the most common issues:

• Browser cache—Browsers cache favicons aggressively. Hard-refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) or wait a few hours. You can also visit your site in a private/incognito window.
• WordPress cache—If you use a caching plugin (like WP Super Cache or W3 Total Cache), clear the cache after uploading the icon.
• CDN cache—If your site uses a CDN (like Cloudflare), purge the cache for your domain.
• Wrong file format—WordPress accepts JPG, PNG, and GIF (static). Animated GIFs are not supported for favicons; the first frame is used.
• Theme conflict—Rarely, a theme may output its own favicon code that overrides WordPress’s. Check your theme’s documentation or use a plugin like “Favicon by RealFaviconGenerator” to force your icon.

If you still don’t see the new favicon after clearing caches, check the <head> of your site’s HTML (right-click → View Page Source) and look for link rel="icon". If it’s not there, your theme may be stripping it—try a different theme or a plugin.

Frequently Asked Questions

Can I add a favicon without a plugin?

Yes, absolutely. The built-in Site Icon feature in WordPress is all you need for the standard favicon. Plugins are only necessary if you want to add multiple custom icons for different devices or if your theme is interfering.

What size should my favicon be?

WordPress recommends a minimum of 512×512 pixels. This ensures it is crisp on all devices, including high-DPI screens and mobile home screens. If you upload a smaller image, WordPress will still use it, but it may look blurry on larger screens.

Why is my favicon not showing in Google search results?

Google’s favicon display is not immediate—it can take days or even weeks to update. Also, Google only shows favicons for sites that are “authoritative” (usually high-traffic or well-known). You cannot force it, but having a valid favicon helps.

Can I use a different favicon for mobile devices?

Yes, WordPress automatically generates Apple touch icons and Android icons from your Site Icon. If you want a completely different image for mobile, you would need a plugin like “Favicon by RealFaviconGenerator” that lets you upload separate images for each device.

Does the favicon affect SEO?

Not directly—Google has stated that favicons are not a ranking factor. However, a favicon can improve click-through rate in search results because it makes your listing more recognizable, which can indirectly benefit your SEO.

What if I don’t have a logo?

You can use any simple image—a letter, a symbol, or even a screenshot of your site’s main color. Many sites use a simple text-based icon. Just make sure it is square and at least 512×512 pixels.

Related

• RF Front End Components in 4G & 5G Devices
• How to Turn Off Autoplay on Hulu While Watching Movies
• Chromecast Multiplayer Game: How It Works