How To Add A Favicon (Favorite Icon) Image To A Wordpress Blog
If you look at your browser address bar as you’re reading this blog, you’ll see my favicon image.
It’s the sweet-looking, small speech-bubble image, with the letter “K” inside.
And if you add this blog to your favorites or bookmarks (and I hope you will!), you’ll also see the image appear in your list of bookmarks,
This should help my blog to stand-out from the other sites.
If you would like to add a favicon image to your Wordpress blog, here’s how to do it.
STEP 1
Make a 16×16 pixel image and save as an “ico” image. Call it favicon.ico
You can use the free graphics program GIMP to do this, if you don’t already have suitable graphics editing software.
If you don’t want to make your own image, you may download and use this favicon I’ve made.
Just right-click and choose “save image as”, to save it to your desktop.
STEP 2
Upload the favicon using an FTP program to your server, at the top level of your blog.
Rename it to favicon.ico if necessary.
STEP 3
Login as admin for your blog. Ensure this line of code is in the header.php file, of the theme you are using.
Add the code line using the theme editor, if it’s not there already.
<link rel="shortcut icon" href="<?php echo get_settings('home'); ?>/favicon.ico" />
Here’s an image, showing the theme editor being used to edit the file header.php … (CLICK FOR LARGER IMAGE)
Adding the favicon icon code to the WordPress header.php file
STEP 4
Refresh your blog and check the favicon shows as expected.
Hope you like it!
i dont know where it is, the part 3 i cant find header.php do you need css? im using wordpress
Thanks for the question.
I have added a screenshot above, showing me using the Theme Editor, on the code in file header.php.
[...] public links >> ico How To Add A Favicon (Favorite Icon) Image To A Wordpress Blog Saved by luvpink4ever22 on Wed 22-10-2008 ?Icon? PRYNDER & AQUINDER Finder icons Saved [...]
STEP 2
Upload the favicon using an FTP program to your server, at the top level of your blog.
What do you mean by “at the top level of you blog”
can you elaborate? What is the top level? sorry I am new to all this. THanks.
Hi Ali
Thanks for the question. By “at the top level of your blog”, I mean don’t put it in a subfolder.
So if your blog is installed at the root of the domain, put it there ie. yourdomain.com/favicon.ico
Alternatively, is your blog is in a subfolder, for example at yourdomain.com/blog then put the icon there at.. yourdomain.com/blog/favicon.ico
Hope that helps.
Thanks for your post. At first I thought it didn’t work until I closed all my browsers and tried again – this time it did. What I don’t understand is why my established bookmark in my FF browser has not changed icon.
Liked the post very much, the tut given was really great. Thank you for the lovely contribution.
I would add a favicon to my blog as soon as i make a logo for it
Thank you.Helpful content.Helped me setup icon on my wordpress.
I’ve followed your steps but it seems not working on my site.
How long should it take before I can see the icon?
Mylene, Well done! It’s there for me, when I look. Do a ctrl+f5 refresh, or open your site in another browser and you should see it.
i’ve tried a few times, but still not appear icon?
anny suggestion?
Hi ben
I assume you are working with the site you have linked?
There is a problem with the line of code. You have this in your source code for the page..
<link rel=”shortcut icon” href=”/favicon.ico” />You have some weird quote symbols there (they should be “). I looks like they are causing the line not to work.
Hi Kevin,
As I was searching this because in free wordpress blog we can easily change this but I did not find it in my .net site so I googled it and found your post which is really very nice.
Thanks again and keep it up.
Regards.
Shafaquat Ali.
It worked for me, but I initially had the same problem Ben did. When I C&Ped the code from this page, it copied the curly typeset quotes; I had to replace them with the flat quotes that (X)HTML expects.
Also, on my WP build, the menu illustrated in the graphic in Step 3 doesn’t seem to appear anywhere. I found the relevant code snippet in Appearance>Editor on the left and then Header (header.php) on the right.
Thanks for the comments.
I have altered the display of the line of code and have also updated the image, to show the latest version of the WordPress theme editor.
Hello,
Sorry to be a bother, but I can’t seem to get this to work. I renamed my little ico file (16×16) as favicon.ico, uploaded it to my top level, put the line of code in the header.php file … and nothing happens. I can’t figure out what I’m doing wrong. I use WP (lastest build) and Firefox (latest version). Can you help?
Barbara
Hi Barbara
It looks to me like you have done it properly! See screenshot image..
You not seeing it, is probably just a refreshing issue with your browser.
Kevin
Hi,Kevin …
I didn’t expect you to answer so fast, so I was playing around with it. But I got it to work only by putting the icon in the /wordpress folder and pointing the code line to it:
When I try to pull up the ico file that I place in the root directory where all the WP files are, it doesn’t show up. But when I put it in the empty Wordpress folder, it does. Weird, huh? On my other blog, http://www.pound-a-week.com (using your same directions), it worked fine, but not on this one!).
Oh well, all’s well that ends well, huh? The favicon still doesn’t show up on the dashboard page, but who cares since I’m the only one who sees that!
I really did appreciate your post and instructions, and you incredibly fast response.
Barbara
Thank you Barbara! Makes it all worthwhile.
You’ve got some clever directory stuff going on there, but it works so all is good. And no, you’re not going to see it in the admin backend dashboard.
All the best, Kevin
One more thing … I didn’t see a “donate” link on your site. Did I miss it? If you don’t have that, how else can we support you?
Great idea Barbara! For now, I am just happy to help others use wonderful WordPress.
All the best, Kevin
Hello admin
Step 3
Login as admin for your blog. Ensure this line of code is in the header.php file, of the theme you are using.
Add the code line using the theme editor, if it’s not there already.
<link rel="shortcut icon" href="/favicon.ico” />
Here’s an image, showing the theme editor being used to edit the file header.php … (CLICK FOR LARGER IMAGE)
ummmmm i don have editor on my admin panel
Hi, You should find the link to the theme editor in the left sidebar when logged in as admin, at Appearance > Editor
HTH
i don see editor i see themes,widgets,menus,extras,header,typekit fonts and edit CSS
Ah, I get it now.. you are using a free blog at wordpress.com, rather than wordpress installed on your own domain. The latter gives you full control over your site.
HTH
do i have to delete my website
Of course not! If it suits your needs, stick with it.
Alternatively, if you wanted to start again, you could export your existing posts to a self hosted wordpress blog.