subscribe: Posts | Comments | Email

How To Install A Favicon In WordPress

View Comments

You know those cool looking icons in the tabs of your browser? You know what I’m talking about, all your favorite websites have them like Gmail, Twitter, Facebook, and the rest.

Ever wonder how you get one of those installed on your WordPress blog? It can get kind of tricky cause you have to use a little bit of PHP to accomplish the task but after this quick little walk-through you’ll be a master at installing favicons.

Why You Need A Favicon

This is really important to point out because some people look at favicons as luxuries. But they’re not, they are necessities if you want to be taken seriously on the web. Why else would EVERY SINGLE website use them if they weren’t. So reason number one is use them because it makes you look more professional. The big boys will take you more seriously if you have a professional looking favicon.

Reason number two is exactly why a favicon was created in the first place. Favicon is short for Favorites Icon, meaning that when your site gets bookmarked your “favicon” is the image that shows up. This makes your site more recognizable on other computers and subliminally brands your site in the eyes of the bookmarker.

Reason number three is because Google loves them. You see, when you’re doing a lot of blogging online and you are promoting products your goal is to get ranked really well in the search engines. This way more people find you and more people will buy your stuff. One of the best ways to increase your sites rankings is to increase your PR (page rank). Google has a number of different factors that determine PR and favicons may not be HUGE on their list but you can sure bet that any site without one won’t get the best PR out there.

Creating A Favicon

First things first, you gotta actually create an image of a favicon. Ironically, this image must have something to do with your website. (who would have thought) And it’s going to be REALLY small. I’m talking tiny, like 16×16 pixels.

Now normally you would have to do this kind of work in photoshop or something similar but instead I’ve discovered a really cool resource that lets you create a favicon without any photoshop experience. But first you’ll need your image to shrink down. I suggest going to Google and typing in something related to your niche + icon. Find what you like and save it to your desktop.

Next go to http://www.html-kit.com/favicon/ and upload your image file you just found. Square images work the best because they will automatically be re-sized to 16×16. Once ready, click add image and the website will kick out a favicon.ico file ready for your WordPress.

Download that file (comes a a .zip) and open it up.

Installing A WordPress Favcion

Now you’re going to need your WordPress admin opened up. So get that ready. Before we tinker with that though, we need to upload your new favicon to the root directory of your website. That means you’re going to drop the file in the very first folder you’ve got, the one with your index.html page or in this case, probably index.php.

• Using an FTP client upload your favicon to your websites main folder. This will look like http://example.com/favicon.ico

Now, since other browsers out there (like IE) are sucky (for lack of a more vulgar word) you will need to edit the header.php section of your WordPress.

• Go to your WordPress admin panel and login.
• Click on appearance.
• Click on Theme Editor
• Now locate the file called header or header.php and select it.
• Search for some code that looks like this <link rel=”shortcut icon” and ends with /favicon.ico” />. Overwrite this if it exists or add in the following code below the <head> HTML tag.

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

That’s all one line. Make sure you don’t separate the code.

• Save the changes.

To see your new favicon you need to clear your browsers cache or try it in a different one like Chrome.

Hope this quick post helped you out. It’s super fun to start playing with this stuff and get it all working like a greased up machine.

If you liked this post, syndicate it.

If you enjoyed this post, you might also like my eBook Article Cannon

If you haven't got it yet, you may want to download this private interview with Frank Kern. Thanks for visiting!

Related Posts

  • No Related Post
468 ad
  • Hey Matthew.
    Great post. Such clear instructions and detail to help us along to get this import part of our blog installed. It is all of the little things like this that really help us stand above the rest.
    Thanks again for sharing this with us.
    Make it a great day!
    God Bless,
    -ed
  • debbybeachy
    Hi Matthew
    Great information! I saw this one other place a while back and never took the time to get my Favicon, I have this on my to do list for tomorrow! Also thanks tons for the website, this will be helpful too!
    Thanks again!
    Debby
  • Great instruction here Matthew. I always wondered how you got that little thing up there! OK, I've picked out my pic and am ready to install it. Just have to struggle through that FTP thing. (My downfall). Thanks for the always great information you provide here. Love visiting your blog!
blog comments powered by Disqus