Add a favicon to your WordPress blog using a hook

Add a favicon to your WordPress blog using a hook

Nowadays, any serious blog have its own favicon. To add yours into WordPress, you can directly edit header.php or you can use a more clean technique, using the power of WordPress hooks.

Just paste the following into your function.php file, save it, and you're done.

function childtheme_favicon() { ?>
	<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png" >
<?php }
add_action('wp_head', 'childtheme_favicon');

Don't forget to change the favicon url if needed. Also, please note that if the wp_head() function haven't been implemented in your theme, this recipe will not work.

By the way, if you're looking for premium WordPress themes and plugins, just have a look to the dedicated category on CouponsForBloggers.com!

16 Responses

Svilen Popov

Feb 01 2010 09:35

Just upload your favicon to root directory

Lucian

Feb 01 2010 10:17

Why is that “cleaner” than simply edit the header.php file and enter the following line:

Sid

Feb 01 2010 11:08

Thnx i needed this

Dimox

Feb 01 2010 12:37

What is the sense of using function.php instead of pasting the code directly in header.php?

samo ticu

Feb 01 2010 18:07

i think its easier to point your client to WP theme control panel then to tell them to change anything in the code of the theme…. thats the point…

cheers… nice one

Nimit Kashyap

Feb 01 2010 20:04

Good tip to add a favicon

Feb 01 2010 20:21

Jean, you’re over-complicating something that by itself only requires the favicon to be uploaded to your root directory.

And if you want to be on the safe side only include one line of code in the tags.

Lucian

Feb 01 2010 22:57

If you just upload the favicon image into the root directory and you have permalinks the icon will show only on homepage or pages that have permalinks designed in the root directory. If you have something like domain.com/2010/post/ it won’t work.

You have to add the favicon link into header.php or the longer solution provided by this article

Nick Parsons

Feb 02 2010 03:26

I think this is a great trick, thanks! And sure, it might not be ‘cleaner’ than putting it right into the theme, but it ensures that the favicon appears on all pages.

Something really cool I thought of that you could do with this would be to allow the favicon to be configured as a theme option. Anyways, thanks for the tip.

Anonymous

Feb 02 2010 08:57

@Lucian, it’s not true! By default most browsers will look for a favicon in your site’s root directory named FAVICON.ICO and you will see it in every subdir
For example check out youtube, facebook or twitter.

Btw modern browsers (Mozilla, Opera) support these favicon formats: .png, .gif, .jpg

P.S: Check out this favicon generator favicon.cc/

wesley

Feb 04 2010 19:27

Great tip,
it does kind of bug me though that so many people leave behind negative comments on your blogposts.
This post’s title clearly says “..using a hook”! Why do you people tell him it’s easier to just implement a favicon in the main dir or in the header? He probably knows that, he is just showing how you could achieve the same result using another method.
If I’m not mistaken, I could use this hook to implement an easy “change favicon” option in theme options for potential clients, right?

Jean-Baptiste Jung

Feb 04 2010 21:10

@wesley : ah, your comment made my day. WpRecipes have lots of success which is good, but sadly many people didn’t understand that the blog purpose is to show WordPress hacks as well as experimental techniques.

As you said it is clearly said in the post title that we’re going to add a favicon USING A HOOK. I don’t say it is the best method to do it, but using hooks is generally a good WP practice.

To answer your question, yes definitely. You should store the favicon url into an option and use the hook to add it to the theme with no editing for the client.