6

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="images/favicon.ico" />

How can I implement it?

2 Answers 2

9

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 Answer

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="<?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:

An Apple touch icon's dimension is 129px x 129px. :)

4
  • 1
    Proper answer. This will help many out there. Been using this code in my own plugin for a while now. Mar 16, 2014 at 5:56
  • 1
    This answer definitely deserve more up votes.
    – Smokey
    Oct 16, 2014 at 5:05
  • 2
    Great answer, except you should be using get_stylesheet_directory_uri(), not get_template_directory_uri() for child themes! :) Oct 30, 2015 at 21:00
  • @EricHolmes I actually meant so, but I got it, it may be confusing, so fixed now. Thanks for your comment. :) Oct 31, 2015 at 15:18
4

I am too late to reply on this thread. But may be it might help someone in future.

Go to your WordPress Admin Panel then,

Appearance » Customize » Site Identity

Now Upload an Icon.

3
  • 1
    yes, that functionality was added in 4.4 IIRC Dec 4, 2016 at 7:09
  • hmm that i did not know :) Dec 5, 2016 at 8:42
  • With recent WordPress versions, this is probably the best way. Mar 28 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.