How to Add a Favicon to WordPress (2024 Guide)

Adding a favicon to WordPress is one of the simplest yet most impactful branding tasks you can complete for your website. A favicon — the small icon that appears in browser tabs, bookmarks, and search results — helps visitors instantly recognise your site and reinforces your brand identity. In this comprehensive guide, you will learn every practical method to add a favicon to your WordPress site, whether you prefer using the built-in Customizer, a dedicated plugin, or a custom code snippet.

What Is a Favicon and Why Does It Matter?

A favicon (short for "favourite icon") is a tiny image, typically 32x32 pixels or 512x512 pixels for high-resolution displays, that represents your website visually in the browser UI. WordPress refers to this as a Site Icon in its settings. Here is why having one matters:

Brand recognition: Users can identify your tab among dozens of open tabs at a glance.
Professionalism: A missing favicon signals an unfinished website to visitors and search engines.
Bookmarks and home screens: When users bookmark your site or save it to a mobile home screen, the favicon is used as the icon.
Search engine results: Google displays favicons next to URLs in mobile search results, making your listing more clickable.

The ideal favicon image is a square PNG, ICO, or SVG file that is at least 512x512 pixels so WordPress can scale it down to the sizes required by different devices and browsers.

Method 1: Add a Favicon Using the WordPress Customizer (Recommended)

The easiest and most reliable method is to use the WordPress Customizer, which has included a native Site Icon feature since WordPress 4.3. No plugin or code is required.

Step-by-Step Instructions

Log in to your WordPress Admin Dashboard.
Navigate to Appearance > Customize in the left-hand menu.
In the Customizer panel, click on Site Identity.
Scroll down to the Site Icon section at the bottom of the panel.
Click the Select site icon button. The WordPress Media Library will open.
Either select an existing image from your Media Library or click Upload Files to upload a new image from your computer.
Select your favicon image (recommended size: 512x512 pixels, PNG format) and click Choose Image.
If your image is larger than 512x512 pixels, WordPress will present a cropping tool. Adjust the crop to your preference or skip if the image is already square.
Click Publish in the top-left corner of the Customizer to save your changes.

Once published, WordPress automatically generates the correct favicon sizes and inserts the appropriate <link> tags into your site's <head> section. Your favicon should now appear in browser tabs within seconds of refreshing the page.

Troubleshooting: Favicon Not Showing After Upload

If your favicon does not appear immediately after publishing, try the following:

Clear your browser cache: Press Ctrl + Shift + Delete (Windows) or Cmd + Shift + Delete (Mac) and clear cached images.
Clear your WordPress caching plugin: If you use WP Super Cache, W3 Total Cache, or LiteSpeed Cache, purge the cache from the plugin's settings.
Check your CDN: If you use Cloudflare or another CDN, purge the CDN cache as well.
Hard refresh: Press Ctrl + F5 on Windows or Cmd + Shift + R on Mac to force the browser to reload all assets.

Method 2: Add a Favicon in the Full Site Editor (Block Themes)

If your WordPress site uses a block theme (such as Twenty Twenty-Three or Twenty Twenty-Four), the Customizer may be replaced by the Full Site Editor (FSE). The process for adding a favicon is slightly different.

Step-by-Step Instructions for Block Themes

Go to your WordPress Admin Dashboard.
Navigate to Appearance > Editor to open the Full Site Editor.
Click on the Settings icon (the gear icon) in the top-right corner of the editor.
In the settings panel, look for the Site Icon option.
Click Select or the existing icon preview to open the Media Library.
Upload or select your favicon image and confirm the selection.
Click Save to apply the changes.

Alternatively, block theme users can still access the Site Icon setting through Appearance > Customize if it is available, or directly under Settings > General in some configurations.

Method 3: Add a Favicon Using a Plugin

If you prefer a plugin-based solution — for example, if you want more control over favicon sizes or need to generate a full set of app icons — several free plugins are available.

Using the Favicon by RealFaviconGenerator Plugin

From your Dashboard, go to Plugins > Add New.
Search for Favicon by RealFaviconGenerator and click Install Now, then Activate.
Navigate to Appearance > Favicon in the Dashboard menu.
Upload your master image (at least 512x512 pixels recommended).
Customise favicon appearance for iOS, Android, Windows, and macOS as desired.
Click Generate favicon. The plugin will process your image and install all required icon files automatically.
Once complete, click Install your favicons to apply them to your site.

This plugin generates a comprehensive set of icons including Apple Touch Icons, Android Chrome icons, and Windows tile images — giving your site maximum compatibility across all devices and platforms.

Other Recommended Favicon Plugins

All In One Favicon: Simple plugin for adding ICO, PNG, and GIF favicons quickly.
WP Site Icon: Lightweight plugin with basic favicon upload functionality.

Method 4: Add a Favicon Manually with Code

Advanced users may prefer to add a favicon by directly editing theme files. This approach gives you full control and is useful when working with custom or headless WordPress setups.

Adding Favicon Code to functions.php

The cleanest way to add a favicon manually is by hooking into wp_head in your theme's functions.php file or a custom plugin. First, upload your favicon image (e.g., favicon.png) to your theme directory or the /wp-content/uploads/ folder, then add the following code:

/**
 * Add custom favicon to WordPress
 */
function my_custom_favicon() {
    echo '<link rel="icon" type="image/png" href="' . get_template_directory_uri() . '/favicon.png" sizes="32x32">';
    echo '<link rel="apple-touch-icon" href="' . get_template_directory_uri() . '/favicon.png" sizes="180x180">';
}
add_action( 'wp_head', 'my_custom_favicon' );

Important: Always add this code to a child theme's functions.php file, never to the parent theme directly. Editing the parent theme means your changes will be overwritten when the theme updates.

Adding a Favicon via WP-CLI

If you manage WordPress from the command line, you can set the site icon using WP-CLI. First, note the attachment ID of the image you have already uploaded to the Media Library, then run:

wp option update site_icon 123

Replace 123 with the actual attachment ID of your favicon image. You can find the attachment ID by going to Media > Library, clicking on the image, and checking the URL in your browser's address bar (e.g., post=123).

Best Practices for WordPress Favicons

Following these best practices will ensure your favicon looks great across all browsers and devices:

Use a square image: Favicons must be square. Non-square images will be cropped, potentially cutting off important parts of your logo.
Minimum 512x512 pixels: WordPress requires at least 512x512 pixels for the Site Icon to ensure high-quality output at all scales.
PNG format preferred: PNG supports transparency and delivers crisp edges, especially for logos with transparent backgrounds.
Keep it simple: At 16x16 or 32x32 pixels, complex logos become unreadable. Use a simplified version of your logo, monogram, or brand mark.
Test across browsers: Check your favicon in Chrome, Firefox, Safari, and Edge to confirm it renders correctly in all environments.
Consider dark mode: Modern browsers support SVG favicons which can adapt to light and dark mode. Consider providing an SVG version for future-proofing.

Frequently Asked Questions

What size should a WordPress favicon be?

WordPress recommends uploading a favicon image of at least 512x512 pixels. The image must be perfectly square. WordPress will automatically generate the smaller sizes (16x16, 32x32, 180x180) needed for different browsers and devices from this single source image.

Why is my favicon not showing up in WordPress?

The most common reason a favicon does not appear is a cached version of your site being served to the browser. Clear your browser cache, purge any WordPress caching plugin, and clear your CDN cache if applicable. Also ensure you clicked Publish in the Customizer after uploading the icon. If the issue persists, verify the image meets the minimum 512x512 pixel square requirement.

Can I use a GIF or ICO file as a WordPress favicon?

The WordPress Customizer's Site Icon feature accepts PNG, JPG, and GIF formats. ICO files are not directly supported through the Customizer upload but can be added manually via code using the wp_head hook in functions.php. PNG is the recommended format because it supports transparency and renders sharply at all sizes.

Do I need a plugin to add a favicon to WordPress?

No, a plugin is not required. WordPress has included a native Site Icon feature in the Customizer since version 4.3, which handles favicon creation automatically. Plugins are only necessary if you need advanced features like generating a full icon set for iOS home screens, Android apps, or Windows tiles.

Adding a favicon to WordPress is a straightforward task that pays dividends in brand recognition and professionalism. Whether you use the Customizer, the Full Site Editor, a plugin, or custom code, your site will look more polished and trustworthy with a properly configured favicon. If you want an even easier way to manage tasks like this and many other WordPress configurations, WP AI Agent lets you handle them through simple natural-language chat commands — no manual navigation or code editing required.

How to Add a Favicon to WordPress: Complete Step-by-Step Guide