How To Add Favicons (Multiple Platforms)
March 19th, 2009 by James | This article was viewed 4,973 times.
Some people ask me, how do you add that little icon on top of the firefox tab in your website? I usually answer them with “go search Brother Google”. Some listened, some forget about it. Here’s a good news, for those who had forgotten about it, I’ve created a guide to insert your “little icon” AKA Favicons or Website Icon into your blog or website. The good news for those who listened, this guide is catered for multiple major platforms.
I’m a big fan of Step by Step guides. So this guide will definitely be a step by step guide to add favicons into your website.
Before you jump right into the step by step guides below, let’s talk a bit about fundamentals.
- Favicon is 16×16 pixels in size.
- Favicon appears right beside the address bar located on top of almost all major browsers.
- Favicon usually has a standard file name extension as .ico (stands for icon), but png is okay as well.
- The best part, here’s the HTML code to insert your favicon:
<LINK REL="SHORTCUT ICON" href="http://urlpath.com/favicon.ico" TYPE="IMAGE/ICO" />
Now that you’ve got all the fundamentals of what a favicon is, we should get going into the real deal already.
Things You need
Of course, you can’t just magically summon a favicon to upload to a website. So you’ll need to create one your own.
Use photoshop or even mspaint to create a 16 x 16 icon out of your website’s logo or anything that represents your website.
I suggest creating a large picture, about 300 x 300 big. Then resize it, so when you need to do any modifications, the flexibility is still there.
Also, save in both .ico and .png. Most platforms will support at least one of these two file extensions.
Here’s a list of the platforms I have covered.
Add Favicon to Wordpress.org
Note the .org, this means wordpress installed, hosted maintained by your own. Not the free-all-provided wordpress.com.
I think this is the easiest one. Mainly because I’ve been using it for more than half a year already. This guide is for Wordpress 2.7 and above.
- You’ll need to first upload your favicon to image folder of your template.
If your template name is mytemplate, then the url should be myurl.com/wp-content/mytemplate/images/favicon.ico - Then go to Appearance
- Click Editor
- Click Header (header.php)
- Search for a bunch of
<link rel=".....">.It is located right under the <title> tag. - Paste
<LINK REL="SHORTCUT ICON" href="http://urlpath.com/favicon.ico" TYPE="IMAGE/ICO" />on top or at the bottom of the bunch of<link rel=".....">codes.
You can always ignore step 2 – 4 and use a FTP program to edit your header.php and start from step 5.
Add Favicon to Wordpress.com
- Go to Settings
- Click General
- Note the Blog Picture on the right side of the page.
- Upload your Favicon and you’re good to go!
Apparently, Wordpress.com does not allow .ico file extensions, so just stick to .jpg or .png as suggested.
Add Favicon to Blogger
Blogger is not as user friendly, I don’t like it. Anyways …
- Since you don’t have a place to upload your favicon. You’ll need to upload it to any free image hosting website.
Here’s a few, Imageshack and Flickr. - Then go to Layout
- Click Edit HTML
- Under the <head> tag, search for <title> tag.
- Paste
<LINK REL="SHORTCUT ICON" href="http://urlpath.com/favicon.ico" TYPE="IMAGE/ICO" />in between your <title> tag and some CDATA stuff.
- Refresh your blog/website with ctrl+f5.
Add Favicon to Joomla
Like Wordpress.org, this is easy.
- Login as administrator
- Move your mouse over to Extensions and click on Template Manager
- Click on the template you’re using
- Click Edit HTML located at the tab bar.
- Search for a bunch of
<link rel=".....">. - Paste your favicon code …
<LINK REL="SHORTCUT ICON" href="http://urlpath.com/favicon.ico" TYPE="IMAGE/ICO" />before or after the bunch.
For Everything Else
It’s actually very easy to implement favicons. All you need to do is search for the <head></head> tags, insert the basic code for favicon, link it to your favicon image and you’re all done. Basically it is the same for everything, Forums, Wikis, Content Management Systems, Image Galleries … and everything that uses HTML to run.
Having said almost everything, I’ll have to admit that Internet Explorer runs at a totally different league of stupidity. I think maybe that’s why IE does not publish the favicons while the rest of the browsers (Firefox, Google Chrome) do.
That’s all for my How to Implement Favicons To Multiple Platforms post. Do tell me if I missed out any of the major platforms.
Enjoy.
Thank you for reading. I appreciate any Comments, Complaints and Advices that you might have. And if anything I wrote isn't clear enough. Please Tell Me about it.
If you love this post, please help to share it to the world simply by Submitting it to StumbleUpon OR ReTweet it on Twitter. It takes only 30 second to do that.
Otherwise, you could also share this link to other websites as well.
March 19th, 2009 at 6:14 pm
really a nice piece of info…..but will it enhace page rank in any cause….
March 19th, 2009 at 6:22 pm
Well, favicons are just favicons. I extremely doubt favicons will enhance page rank in any possible way.
But your favicon can definitely enhance your site’s brand to your visitors.
March 20th, 2009 at 1:10 pm
Thanks, always wondered if it was possible in a Wordpress app.
March 21st, 2009 at 12:39 am
nivash, it doesn’t increase your page rank. Basically its just an eye candy. If you want to get higher page rank , content and bounce rates are important. Not to mention backlinks and other stuff
Anyway , james . You got any cool programs for me to derive my own equation , err I mean my own icon for Windows or OSX
Thanks
March 21st, 2009 at 12:53 am
What do you mean your own icon for Windows or OSX ? If you mean a software that runs in Windows or Mac OS X.
Usually Photoshop can do all my little design work.
June 2nd, 2009 at 12:56 am
Thank you so much for that tidbit! I have been trying to figure out where to add the snippet of code, and where to stash a copy of my favicon on my server to make it come up on the blog! Now it matches the rest of my site, and it was EASY! Thanks!