How to Add a Favicon to Your WordPress Site

Learn how to add a favicon to your WordPress website. Our free favicon generator creates all the favicon files you need, and this guide shows you exactly how to implement them through the WordPress admin panel or theme files.

Upload Your Logo

Click to upload or drag and drop

PNG, JPG, SVG up to 10MB

What You'll Get

Favicons (7 sizes)

16×32×48×96×128×196×512px icons for browser tabs, bookmarks, and desktop shortcuts

Android Icons (6 sizes)

48×72×96×144×192×512px icons for Android apps and home screens

iOS Icons (5 sizes)

60×76×120×152×180px icons for iOS apps and home screens

Additional Files

manifest.json for PWAs and HTML link tags ready to use

WordPress Favicon Implementation

WordPress makes it easy to add a favicon (called a "Site Icon" in WordPress) through the admin panel. You can also manually add favicon files to your theme if you need more control.

Use our free favicon generator to convert your logo to favicon, then follow the steps below to add it to your WordPress site.

Method 1: Using WordPress Admin (Recommended)

The easiest way to add a favicon to WordPress is through the Customizer:

Generate your favicon files using our WordPress favicon generator
Log in to your WordPress admin dashboard
Navigate to Appearance → Customize (or Appearance → Theme Customizer)
Click on Site Identity (or Site Icon)
Click Select Site Icon and upload your favicon file (512x512 recommended)
WordPress will automatically generate all required sizes
Click Publish to save your changes

WordPress will automatically create all necessary favicon sizes and add them to your site's <head> section.

Method 2: Manual Upload via FTP

For more control, you can manually upload favicon files to your WordPress installation:

Generate all favicon sizes using our favicon generator
Connect to your WordPress site via FTP or file manager
Upload favicon.ico to your WordPress root directory (where wp-config.php is located)
Upload other favicon PNG files to the root directory or a favicons folder
Add favicon link tags to your theme's header.php file or use a plugin

Method 3: Using functions.php

You can add favicon links programmatically through your theme's functions.php file:

// Add to your theme's functions.php
function add_favicon_links() {
  echo '<link rel="icon" type="image/x-icon" href="' . get_template_directory_uri() . '/favicon.ico">' . "
";
  echo '<link rel="icon" type="image/png" sizes="16x16" href="' . get_template_directory_uri() . '/favicon-16x16.png">' . "
";
  echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/favicon-32x32.png">' . "
";
  echo '<link rel="icon" type="image/png" sizes="96x96" href="' . get_template_directory_uri() . '/favicon-96x96.png">' . "
";
  echo '<link rel="apple-touch-icon" sizes="196x196" href="' . get_template_directory_uri() . '/favicon-196x196.png">' . "
";
}
add_action('wp_head', 'add_favicon_links');

Replace get_template_directory_uri() with get_site_url() if you uploaded favicons to the root directory.

WordPress Favicon Sizes

For optimal WordPress favicon support, include these sizes:

favicon.ico: Legacy browser support (16x16, 32x32, 48x48 combined)
16x16: Browser tabs (most common)
32x32: Browser bookmarks
96x96: Android home screen
192x192: WordPress admin bar and Android
196x196: Apple touch icon
512x512: WordPress Site Icon (recommended upload size) and high-resolution displays

Our WordPress favicon generator creates all these sizes automatically.

Adding Manifest.json for PWA Support

For Progressive Web App support in WordPress, add a manifest.json file to your root directory and link it in your theme:

// Add to functions.php
function add_pwa_manifest() {
  echo '<link rel="manifest" href="' . get_site_url() . '/manifest.json">' . "
";
}
add_action('wp_head', 'add_pwa_manifest');

// manifest.json file (upload to root directory)
{
  "name": "Your WordPress Site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

Our favicon generator includes a ready-to-use manifest.json file with all icon references.

Best Practices for WordPress Favicons

Use the WordPress Customizer method for easiest implementation
Upload a 512x512 image - WordPress will generate other sizes automatically
Always include favicon.ico in the root directory for legacy support
Test your favicon after theme updates (some themes override favicon settings)
Use a child theme when modifying functions.php to preserve changes
Consider using a favicon plugin if you need advanced features
Use our free favicon generator to create all required sizes at once

Related Resources

Free Favicon Generator

Convert your logo to favicon and generate all required sizes for your WordPress site.

Favicon Sizes Guide

Learn about the best favicon sizes for modern websites and PWAs.