Add favicon to wordpress front end and admin area

In this article I’m going to describe how to add favicon to wordpress front end and admin. First of all we should have a favicon image created. So, lets go ahead and create an image with these dimension.

  • 16px x 16px   or
  • 32px x 32px

and save it in png format with ‘favicon.png’ as the name. And upload it to somewhere inside the theme. I stored inside ‘images’ folder inside my theme folder. Well, now we have to do the coding.

Setting up favicon can be done in many ways. Let me go through one by one. Favicon can be set up either using theme or developing a custom plugin.

1. Add favicon to wordpress Using Theme

There are two ways to add favicon to wordpress using the theme code. You can hard code the content in head section or you can add a function into the functions.php and call it using a hook.

a) By hard coding in theme files

In order to add favicon to wordpress website, use the following code inside <head> tag in your header.php file of the activated theme.

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />
 get_template_directory_uri(); 

code is used to get the correct path to the wordpress theme directory.

Usihg this method, favicon will only be appeared in front end. There is no way to add favicon to admin area, hard coding the above code in header.php

b) By adding to the theme dynamically

In this method, the coding is done in functions.php file.

show_my_favicon();

function will be used to show favicon and it will be fired using following hooks

wp_head //for front end
admin_head //for admin area

ok, this is the full code to include in functions.php in order to show the favicon in front end and back end.

function show_my_favicon() {
   $ficon_url = get_template_directory_uri() . '/images/favicon.png';

   echo '<link rel="shortcut icon" href="' . $ficon_url . '" />';
}

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

Add favicon Using a plugin

You can add favicon to your site by your own plugin. The advantages using a plugin to add a favicon are
1. Favicon will remain even if you change the theme of your website.
2. You can re-use this code as plug-and play in any wordpress website you develop in the future.

So, in order to develop a plugin, create a directory inside wp-content/plugins/ and name it with what ever you prefer. Then create a plugin php file inside that directory. In my case the full path to plugin file is ROOT_DIR/wp-content/plugins/my-favicon-plugin/my-favicon.php. Here is the content for my-favicon.php

<?php
/**
 *Plugin Name: New Favicon Plugin
 *Description: Adding a favicon to front end and admin area of my site.
 */
function show_my_favicon() {
   $ficon_url = plugins_url('/favicon.png', __FILE__);

   echo '<link rel="shortcut icon" href="' . $ficon_url . '" />';
}
add_action( 'wp_head', 'show_my_favicon' ); //show favicon on front end
add_action( 'admin_head', 'show_my_favicon' ); //show favicon on admin area

copy above code to your plugin file and activate the plugin on wordpress admin area. Thats it, you should see the favicon in title bar after you follow either of method described above.