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!
If you enjoyed this article, please consider sharing it!
Leave a Comment
On Twitter : @jeanninejung Oui ca va, dommage qu'on doive repartir. Pas de bol pour Djerba, cosmos doit pas etre content
Copyright © 2008 - 2010 WordPress Development by Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
17 Responses
Just upload your favicon to root directory
Why is that “cleaner” than simply edit the header.php file and enter the following line:
<link rel="shortcut icon" href="/images/favicon.png” >
Thnx i needed this
What is the sense of using function.php instead of pasting the code directly in header.php?
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
Good tip to add a favicon
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.
<link rel="shortcut icon" href="/favicon.ico” />
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
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.
@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/
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?
@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.
There are some thing wrong in the code, did you test it?
it will not work!
Trackbacks: