Generate Now

How to Add a Favicon to WordPress

Complete guide to adding, changing, and optimizing favicons in WordPress. Learn three different methods and choose the best one for your site.

Quick Answer

The easiest way to add a favicon to WordPress is through Appearance ? Customize ? Site Identity. Upload a 512×512px image and WordPress automatically creates all required sizes.

Method 1: WordPress Customizer (Recommended)

Best for: Most WordPress users (easiest method)

Step-by-Step Instructions

1

Access Customizer

Go to Appearance ? Customize in your WordPress admin panel

2

Open Site Identity

Click on Site Identity in the Customizer sidebar

3

Upload Icon

Click Select Site Icon and upload your image (512×512px recommended)

4

Publish

Click Publish to save your changes

What WordPress Does Automatically

  • Creates all required favicon sizes
  • Generates proper HTML code
  • Adds to all WordPress pages
  • Creates Apple Touch Icon
  • Sets up WordPress admin favicon

Method 2: Using Plugins

Best for: Advanced features and multiple icon versions

Popular WordPress Favicon Plugins

Yoast SEO

Popular

Full-featured SEO plugin that includes favicon management in the free version.

  • Easy favicon upload
  • Automatic optimization
  • Social media integration
? FREE

RealFaviconGenerator

Specialized

Dedicated favicon plugin with comprehensive platform support.

  • All platform support
  • Multiple size generation
  • Preview before publish
? FREE

All in One SEO

Premium

Comprehensive SEO suite with favicon management included.

  • Advanced options
  • Social media icons
  • PWA support
?? $49.60/year

Favicon by RealFavicon

Simple

Lightweight plugin focused solely on favicons.

  • Easy to use
  • No bloat
  • Fast performance
? FREE

How to Install a Plugin

  1. Go to Plugins ? Add New
  2. Search for the plugin name
  3. Click Install Now
  4. Click Activate
  5. Follow plugin's setup instructions

Method 3: Manual Installation

Best for: Advanced users who need complete control

Manual Upload via FTP/cPanel

This method involves uploading favicon files directly to your server and adding HTML code to your theme.

Steps:

1. Generate Favicons

Use our generator to create all necessary favicon files

2. Upload Files

Upload favicon files to /wp-content/themes/your-theme/

3. Edit header.php

Add favicon HTML code to your theme's header.php file

4. Clear Cache

Clear WordPress cache and browser cache

Code to Add to header.php:

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri(); ?>/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo get_template_directory_uri(); ?>/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="<?php echo get_template_directory_uri(); ?>/favicon-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri(); ?>/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="manifest" href="<?php echo get_template_directory_uri(); ?>/site.webmanifest">
Warning

Manual edits to theme files will be lost when the theme is updated. Consider using a child theme or the built-in WordPress method instead.

Common WordPress Favicon Issues

Solutions:
  • Clear WordPress cache (if using caching plugin)
  • Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
  • Check file permissions (should be 644)
  • Verify file was uploaded correctly
  • Try hard refresh (Ctrl+Shift+R)

Solutions:
  • Clear all caches (WordPress, CDN, browser)
  • Wait 24-48 hours for complete propagation
  • Use incognito/private browsing to test
  • Rename new favicon file

Solutions:
  • WordPress requires minimum 512×512px
  • Regenerate favicon with correct size
  • Use square images only (1:1 ratio)
  • Re-upload through Site Identity

WordPress Favicon Best Practices

Do's

  • Use 512×512px source image
  • Use PNG format with transparency
  • Test in multiple browsers
  • Use simple, recognizable design
  • Match your brand colors

Don'ts

  • Don't use images smaller than 512×512
  • Don't use overly complex designs
  • Don't forget to test on mobile
  • Don't use copyrighted images
  • Don't skip cache clearing

Generate WordPress-Ready Favicons

Create all necessary favicon files for WordPress in one click

Generate for WordPress

Related Articles

How to Create

Creation guide

Favicon Sizes

Size requirements

Troubleshooting

Fix common issues

An unhandled error has occurred. Reload 🗙