How to add favicon to my site – in both front end and admin panel

by

How can I add favicon to my WordPress site in both front end, and admin panel. I’ve tried many ways, but failed.

I know, to show favicon the code is:

<link rel="shortcut icon" href="https://wordpress.stackexchange.com/questions/138098/images/favicon.ico" />

How can I implement it?

2 s
2

Update

The following workaround is necessary for users who are using WordPress older than version 4.4. If you are using WordPress v4.4+ then you don’t need to go for such an extensive work-around. Simply follow the Usman Siddiqui’s answer, and it’s that easy.

Actual

You can add a favicon into your WordPress site in either-

  • by Theme, or
  • by Plugin

Preparation

To add a favicon, you first have to make one. Favicon are typically of-

  • 16px x 16px, or
  • 32px x 32px.

So, at first, make one using graphics software and save the file with the name ‘favicon’ into the format .png (for transparent) or .jpg etc. Rename the file and change the extension to .ico (icon file) – so your file would be favicon.ico.

By theme:

Hard Code

To implement favicon using theme you need to remember that, you are using WordPress and you have to do it in WordPress way, and to show the file’s exact path, you have to use get_template_directory_uri() for parent theme, or get_stylesheet_directory_uri() for child themes. So your code to implement favicon would be (where the favicon.ico file is stored in a folder named “images” inside your theme folder:

<link rel="shortcut icon" href="https://wordpress.stackexchange.com/questions/138098/<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

You can put the above code block in between your theme’s <head> and </head> to make the favicon works.

Dynamic Code

To implement favicon in a dynamic way, use the following code:

function add_my_favicon() {
   $favicon_path = get_template_directory_uri() . '/images/favicon.ico';

   echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}

add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

We used the same code, but now embraced it with a function to trigger the action. And then we added the action using two hooks:

  • wp_head — it’ll fire the favicon into the front end using wp_head() WordPress function on your theme’s head section
  • admin_head — it’ll fire the favicon into your admin panel

By plugin

You can make your own plugin to set the favicon to your site. It’d be better because even if you change your site’s theme, your favicon won’t lost. Here’s how we’re implementing it with our own custom plugin:

<?php
/*
Plugin Name: My Favicon Plugin
Description: Activating a favicon into my site.
*/

function add_my_favicon() {
    $favicon_path = plugins_url( '/favicon.ico', __FILE__ );    

    echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}


add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

Save the file with a name my-favicon.php in a folder and place your favicon.ico file inside that folder. Name the folder to my-favicon and put that inside the /wp-content/plugins/. Now get into your WordPress admin panel and active the plugin to see your favicon in action. 🙂

Apple Touch Icon

Additionally by these ways, you can also implement an Apple Touch icon:

  • Implementing an Apple Touch Icon by helgatheviking — WordPress Development

An Apple touch icon’s dimension is 129px x 129px. 🙂

Leave a Comment