How to add a custom logo and favicon in WordPress?

To add a custom logo in WordPress, use the Site Logo block in the Site Editor if you have a block theme, or go to Appearance > Customize > Site Identity if you have a classic theme. Your favicon, which WordPress calls the "Site Icon," is set in the same places: toggle "Use as Site Icon" on the Site Logo block, or upload a square image under Site Identity in the Customizer. WordPress then automatically generates the different icon sizes browsers and devices need.

Your logo and favicon are small details, but they shape how professional and recognizable your site feels, from the header to the browser tab to a visitor's phone home screen. In this guide, you'll learn how to prepare the right image files, add them with both block and classic themes, add them with code when you need more control, and fix the most common problems.

Logo vs. Favicon: What's the Difference?

Although they often use the same artwork, the logo and the favicon serve different purposes.

Logo: The main brand image displayed on your site, usually in the header and sometimes the footer. It can be wide or square, and it's displayed at a relatively large size.

Favicon (Site Icon): A small square icon that appears in browser tabs, bookmarks, browser history, search results on some devices, and as the app icon when someone adds your site to their phone's home screen.

Because a favicon is shown at sizes as small as 16 by 16 pixels, a detailed wide logo usually doesn't work well. Most brands use a simplified mark, such as a monogram or symbol, for their favicon.

Preparing Your Logo and Favicon Files

Getting the files right before uploading saves a lot of frustration.

Logo Recommendations

• Format: PNG with a transparent background works everywhere. SVG is sharper and smaller, but WordPress doesn't allow SVG uploads by default for security reasons (more on that below). WebP is also supported.
• Size: Upload the logo at roughly two times the size it will display, so it looks crisp on high-resolution screens. For example, if your header shows the logo 200 pixels wide, upload a 400-pixel-wide image.
• File size: Keep it small. A logo loads on every page, so compress it with a tool like TinyPNG or Squoosh.
• Variants: If your site has a dark header or a dark mode, prepare a light version of the logo too.

Favicon Recommendations

• Shape: Square. WordPress requires the Site Icon to be square.
• Size: At least 512 by 512 pixels. WordPress will generate smaller versions (such as 32, 180, 192, and 270 pixels) from this image.
• Format: PNG or JPG. PNG is best if you need transparency.
• Design: Simple and bold. Test it at a tiny size to make sure it's still recognizable.
• Padding: Leave a little space around the mark, especially because some devices round the corners of home screen icons.

How to Add a Logo in a Block Theme

If you're using a block theme such as Twenty Twenty-Four or Twenty Twenty-Five, your logo is managed with the Site Logo block, usually inside the Header template part.

1. Open the Site Editor: Go to Appearance > Editor.

2. Open the header: Click Patterns, then Template Parts, and select Header. You can also click the header area directly while viewing any template.

3. Find or add the Site Logo block: Many themes already include a Site Logo block. If yours doesn't, click the plus icon, search for "Site Logo," and insert it where you want it, often next to the Site Title block.

4. Upload your logo: Click the Site Logo block's placeholder and choose Add media to upload or select an image from the Media Library.

5. Adjust the size: In the block settings sidebar, set the image width. You can also toggle "Link image to home" so clicking the logo returns visitors to your home page.

6. Save: Click Save in the top-right corner and confirm the changes.

The logo you set here is stored as a site-wide setting, so every Site Logo block across your templates shows the same image.

Setting the Favicon From the Site Logo Block

In the Site Logo block's sidebar settings, you'll find a toggle labeled Use as Site Icon. Turn it on, and WordPress will use your logo as the favicon too. This is convenient if your logo is already square and simple.

If your logo is wide or detailed, leave the toggle off and set a separate favicon instead. Depending on your WordPress version, you can do this in Settings > General, where recent releases include a Site Icon option, or through the Customizer as described below.

How to Add a Logo in a Classic Theme

Classic themes use the Customizer for branding. The exact options vary by theme, but the steps are generally the same.

1. Open the Customizer: Go to Appearance > Customize.

2. Open Site Identity: Click the Site Identity panel. Some themes place it under a "Header" panel instead.

3. Select a logo: Click Select logo, upload your image, and click Select.

4. Crop if needed: WordPress may ask you to crop the image to the dimensions your theme suggests. If you prefer to keep the original proportions, click Skip cropping when it's offered.

5. Hide the site title if needed: If your logo already includes your site name, uncheck Display Site Title and Tagline to avoid showing the name twice.

6. Publish: Click Publish to save.

If you don't see a logo option at all, your theme may not support the custom logo feature. You can add support with code, as shown later in this article.

How to Add a Favicon (Site Icon) in a Classic Theme

The Site Icon option lives right below the logo option in the Customizer.

1. Go to Appearance > Customize > Site Identity.
2. Scroll to Site Icon and click Select site icon.
3. Upload a square image of at least 512 by 512 pixels.
4. Crop it if WordPress asks you to.
5. Click Publish.

WordPress shows a preview of how the icon will look in a browser tab and as an app icon. Once saved, WordPress automatically outputs the necessary <link> and <meta> tags in your site's <head>.

Adding Custom Logo Support to a Theme With Code

If you're building a classic theme, or your current theme lacks a logo option, you can enable WordPress's custom logo feature. Add this to your child theme's functions.php file, or to your own theme:

function mytheme_custom_logo_setup() {
add_theme_support(
'custom-logo',
array(
'height'               => 100,
'width'                => 400,
'flex-height'          => true,
'flex-width'           => true,
'header-text'          => array( 'site-title', 'site-description' ),
'unlink-homepage-logo' => true,
)
);
}
add_action( 'after_setup_theme', 'mytheme_custom_logo_setup' );

Here's what the options do:

• height and width: The suggested dimensions for cropping.
• flex-height and flex-width: Allow the user to skip cropping or use different proportions.
• header-text: CSS classes to hide when the "Display Site Title and Tagline" option is unchecked.
• unlink-homepage-logo: Removes the link from the logo when you're already on the home page, which is better for accessibility.

Next, display the logo in your theme's header.php:

<div class="site-branding">
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<a class="site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
<?php endif; ?>
</div>

The the_custom_logo() function outputs the logo wrapped in a link to the home page, with proper alt text and responsive srcset attributes. If no logo has been set, the site title is shown instead.

Getting the Logo URL Directly

Sometimes you need just the image URL, for example to use it in a custom login page or an email template:

function mytheme_get_logo_url() {
$logo_id = get_theme_mod( 'custom_logo' );

if ( ! $logo_id ) {
return '';
}

$logo = wp_get_attachment_image_src( $logo_id, 'full' );

return $logo ? $logo[0] : '';
}

The logo is stored as an attachment ID in the custom_logo theme mod. For block themes, WordPress keeps this in sync with the site_logo option used by the Site Logo block.

Adding a Favicon Manually With Code

The built-in Site Icon feature is the best choice for most sites. But if you have a professionally prepared favicon set, such as an SVG favicon plus an Apple touch icon, you can output the tags yourself.

First, upload your files to a folder in your child theme, for example assets/icons/. Then add this to your child theme's functions.php:

function mytheme_custom_favicons() {
$icons = get_stylesheet_directory_uri() . '/assets/icons';
?>
<link rel="icon" href="<?php echo esc_url( $icons . '/favicon.ico' ); ?>" sizes="32x32">
<link rel="icon" href="<?php echo esc_url( $icons . '/icon.svg' ); ?>" type="image/svg+xml">
<link rel="apple-touch-icon" href="<?php echo esc_url( $icons . '/apple-touch-icon.png' ); ?>">
<?php
}
add_action( 'wp_head', 'mytheme_custom_favicons' );
add_action( 'admin_head', 'mytheme_custom_favicons' );
add_action( 'login_head', 'mytheme_custom_favicons' );

If you do this, remove any Site Icon set in WordPress so you don't end up with duplicate icon tags. The admin_head and login_head hooks make your favicon show in the dashboard and login screen too.

A nice advantage of an SVG favicon is that it can adapt to dark browser themes using a media query inside the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle {
      fill: #111111;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: #ffffff;
      }
    }
  </style>
  <circle cx="16" cy="16" r="14" />
</svg>

Can You Upload an SVG Logo?

WordPress blocks SVG uploads by default because SVG files are XML and can contain malicious scripts. If you want to use an SVG logo, install a reputable plugin such as Safe SVG, which sanitizes SVG files on upload and restricts who can upload them.

Avoid code snippets that simply add svg to the allowed MIME types without sanitizing the files, especially on sites where multiple people can upload media.

Troubleshooting Logo and Favicon Problems

The favicon isn't updating: Browsers cache favicons aggressively. Try a hard refresh, open the site in a private window, or check a different browser. If you use a caching plugin or CDN, clear its cache too.

The logo looks blurry: Upload a larger image (about twice the display size) and make sure your theme isn't forcing a smaller cropped version. SVG logos avoid this entirely.

The logo is too big or too small: In a block theme, adjust the width in the Site Logo block settings. In a classic theme, check the theme's own logo size options, or add a small CSS rule under Appearance > Customize > Additional CSS, for example .custom-logo { max-width: 180px; height: auto; }.

There's no logo option in my theme: Your theme may not support the custom logo feature. Add add_theme_support( 'custom-logo' ) in a child theme, or check the theme's own settings panel.

The site name appears twice: Hide the Site Title block in your header, or uncheck "Display Site Title and Tagline" in the Customizer.

The favicon shows in some places but not others: Some platforms, such as certain search engines, fetch icons on their own schedule. Make sure your icon is at least 512 by 512 pixels and publicly accessible, and give it time to update.

Two favicons are being output: A theme or SEO plugin may be adding its own icon tags. Check your page source for multiple rel="icon" tags and disable one source.

Branding Tips

• Keep it consistent: Use the same colors and mark across your logo, favicon, and social media profiles.
• Add alt text: When you upload your logo, set its alt text in the Media Library to your brand name so screen reader users know what it is.
• Test on real devices: Add your site to your phone's home screen to see how the icon looks.
• Consider your login page: You can reuse your logo on the WordPress login screen for a branded experience.
• Don't forget social sharing: Your favicon isn't used for social previews. Set a proper featured image or Open Graph image, often through your SEO plugin.

---

FAQ: Custom Logo and Favicon in WordPress

---

Conclusion

Adding a custom logo and favicon in WordPress takes only a few minutes once your images are ready. With a block theme, the Site Logo block in the Site Editor handles your logo and can double as your Site Icon. With a classic theme, the Site Identity panel in the Customizer handles both. For more control, you can add custom logo support or your own favicon tags with a few lines of code in a child theme.

Start with well-prepared files: a crisp, lightweight logo and a simple square icon of at least 512 pixels. Upload them, check how they look on desktop, mobile, and in browser tabs, and clear your caches if changes don't appear right away. These small touches make your site instantly more recognizable and trustworthy.