How to Add/Change Favicon in WordPress

This tutorial will elaborate four ways to add or change favicon in WordPress.

Note: This tutorial assumes you have your favicon file ready to use.

Table of Contents

  1. Using the WordPress Theme Customizer
  2. Go Old School (Manually)
  3. Using Theme’s Option Page
  4. Using a Favicon Plugin

1. Using the WordPress Theme Customizer

If WordPress theme customizer doesn’t have option:

First check, is there any favicon upload option available at Appearance -> Customize?  If not, paste the following code in functions.php to add the favicon upload section.

function wpparse_customizer_favicon( $wp_customize ) {
 
 $wp_customize->add_section( 'wpparse_favicon_section' , array(
    'title' => __( 'Favicon', 'wpparse' ),
    'priority' => 30,
    'description' => 'Upload a favicon',
 ) );
 $wp_customize->add_setting( 'wpparse_favicon' );

 $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'wpparse_favicon', array(
    'label' => __( 'Favicon', 'wpparse' ),
    'section' => 'wpparse_favicon_section',
    'settings' => 'wpparse_favicon',
 ) ) );
}
add_action('customize_register', 'wpparse_customizer_favicon');

A section would appear in Appearance -> Customize for favicon upload.

change favicon wordpress

Now, put the following code in header.php around <head></head>.

<?php if ( get_theme_mod( 'wpparse_favicon' ) ) : ?>
    <link rel="shortcut icon" href="<?php echo esc_url( get_theme_mod( 'wpparse_favicon' ) ); ?>" />
<?php endif; ?>

If WordPress theme customizer have option

Go to Appearance -> Customize. Go to “Site Identity” or whatever wordings appear I don’t know.

Upload the favicon, and now you have setup the favicon.


2. Go Old School (Manually)

If you don’t’ want any “hanky phanky” then go old school.

Upload favicon in your site’s root directory

Upload the favicon in your website’s root directory because this is the first place where most browsers look there for favicon first and paste the following code in your theme’s functions.php.

function wpparse_favicon() {
  printf( "<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"%s/favicon.ico\" />\n", site_url() );
}

add_action( 'wp_head', 'wpparse_favicon' );

Upload favicon in your theme folder’s root

Upload the favicon to your theme’s root folder and use the following code in functions.php.

function wpparse_favicon() {
  printf( "<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"%s/favicon.ico\" />\n", get_stylesheet_directory_uri() );
}

add_action( 'wp_head', 'wpparse_favicon' );

3. Using Theme’s Option Page

Just use the WordPress theme’s optional panel if available. If the option panel is available, there could be option available to upload favicon.


4. Using a Favicon Plugin

There are many plugins available out there. But I will go through All in One Favicon here. Install and activate the plugin.

Now go to Settings -> All in one Favicon.

Frontend Settings

Upload the favicon for the frontend of your website. The file types supported are .ico, .gif, .png and also Apple touch icon.

Backend Settings

Same as upload the icon for backend pages.

And that’s it. I hope you would find this tutorial helpful.

In this article

Join the Conversation