Bloggst Homepage
Welcome! You have found your way to Bloggst, a community for bloggers. Apart from providing you with daily updated articles on blogging, the main feature of Bloggst is our thriving discussion forum. If you wish to participate in the discussions you will need to register. It will only take a minute of your time, and it is completely free. If you wish to know more about us first, take a look at our about page.
Go Back   Bloggst Forums > Articles > Design and Manage

Tags:        

Comment
 
Article Tools
Give your blog a favicon!
Give your blog a favicon!
Instructions on how to create a favicon for your blog.
Published by Lars-Christian
03-02-2007
Give your blog a favicon!

Do you know what a favicon is? Of course you do, even though you might not know that you do, you have most definitely seen favicons in actions while browsing through the web. They are infact those small icons right next to the title of a page, that can also been seen in when you bookmark a certain site in your browser. Infact we even have one here at Bloggst, which you should be able to see right now as you are reading this. The name favicon is short for "favourite icon", and originally came from when the idea behind it was to display an icon in the list of bookmarks, or favourites. These days most internet browsers support favicons in some way, some by displaying them next to the URL of the site you are viewing, and others by showing them next to the title of the page in the tab you are viewing that page.

While this might not be the most useful thing you can spend your time on, it's well worth it, because it just takes a few minutes to create and add a favicon to your blog. It will also make your blog stand out from the crowd for the reader, and help you brand it.

The first thing you will need to do when creating a favicon, is to load up your favourite image editor. I personally use Adobe Photoshop, but it costs a bit of money, and other people prefer less expensive alternatives like for instance GIMP which is completely free. Did that look to complicated to you? Don't worry, even a program as simple as Paint will do when you want to create a favicon.

Once you have your image editing program opened, what you should do is create a new image that is 32x32 pixels in width and height. You might be wondering why we want it to be so big? Well that is because an ICO file can contain more than one size for each icon, and incase someone wants to put your link on their desktop, it is a good idea to have that size included as well. Now go crazy on it and start making your favicon. But remember, since you want to utilize the favicon to brand your blog, you should try to include some of the visual elements that are also present on your blog's design, like for instance the colour.

When you have finished up your favicon is happy with the way it looks, save it as an image file in the PNG format. The next step is to convert your image to an icon in the ICO format. Some people like to just rename the image to favicon.ico, but this is not advisable, as it will not create a true ICO file, and will not work properly in all cases. What you should do instead is to go to this part of the Dynamic Drive website, which has a favicon generator tool that you can easily use to convert your PNG file to a proper favicon within your browser.

As soon as you have converted your image to a true ICO file, you will need to upload it to the root directory of your blog. That means that if your blog is published at for instance yourdomain.com/blog/, you should upload it to the /blog/ directory.

Now we are as good as done. There is just one more thing you need to do in order to make sure your favicon is picked up by all browsers. In the HEAD section of your template files (somewhere between <HEAD> and </HEAD>) you must add in this line of code:

" <link rel="shortcut icon" href="/favicon.ico" /> "

And with that done, you have successfully added a favicon to your own blog! You might not see it immediately because of your browser's cache, but if you clean that you should be able to see it right away.
Sponsors
Break design barriers!

Article Tools

Featured Articles

Content thieves, how to deal with em [part1]

. Keep any beta copies or changes you made handy for the same reason.

 
#1 - By Douglas on 03-03-2007, 03:48 PM
This is actually a very useful article, as there are so many different and inaccurate sources out there on how to create and implement a favicon. From what I could see though, you were actually able to get it right. Congratulations
Reply With Quote
 
#2 - By Lars-Christian on 03-04-2007, 08:13 AM
Yeah, that's actually why I wrote up this article. There's so much mumbo-jumbo information out there on favicons, I thought someone needed to set the facts straight!
Reply With Quote
 
#3 - By Captain Cornflake on 03-06-2007, 10:20 PM
Question: Is there any advantage to using an ICO file over a PNG file? Because I've been using this for over a year now and have yet to experience any problems:
Code:
<link rel="icon" type="image/png" href="/favicon.png">
Reply With Quote
 
#4 - By doolols on 03-09-2007, 03:11 PM
I'm also wondering about using vector graphics - I caught an article sometime recently somewhere that VG scales better than bitmaps. Great article, though, and demystifies the whole thing.
Reply With Quote
 
#5 - By Lars-Christian on 03-10-2007, 01:53 PM
Quote:
Originally Posted by Captain Cornflake View Post

Question: Is there any advantage to using an ICO file over a PNG file? Because I've been using this for over a year now and have yet to experience any problems:
Code:
<link rel="icon" type="image/png" href="/favicon.png">
The first and most obvious that springs to mind is that it doesn't support multiple sizes like the ICO file format does, so it won't let you include those for other uses (like put-on-desktop or similar). I'm not sure if there are any other drawbacks, but I'm guessing the same issue as with "fake ICO" could apply. Don't take my word for it!

Quote:
Originally Posted by doolols

I'm also wondering about using vector graphics - I caught an article sometime recently somewhere that VG scales better than bitmaps. Great article, though, and demystifies the whole thing.
Yeah, vector is definitely better for scaling than bitmap will ever be, due to the difference between the two formats. If you've read up on that though, I'm sure you'll know all about why I don't think the ICO format supports vector graphics however, so it's kind of a moot point in this particular discussion.
Reply With Quote
 
#6 - By pigmoose on 03-11-2007, 10:06 PM
This is a great article I have been wondering how to do this for so long, Cheers Dean
Reply With Quote
 
#7 - By Lars-Christian on 03-12-2007, 06:37 AM
Great to hear that you found the article useful Dan
Reply With Quote
 
#8 - By shankarganesh on 04-08-2007, 08:29 PM
i love this site: http://www.antifavicon.com for a favicon generator
Reply With Quote
 
#9 - By infektia on 04-09-2007, 12:32 AM
Or you can do it the trickier way that I wrote about here: http://www.infektia.net/2006/12/04/h...add-a-favicon/
Reply With Quote
Comment


Article Tools

Posting Rules
You may not post new threads
You may post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -8. The time now is 03:14 AM.
Home | About | Contact Us | Archive | Top
All content and images, unless specified otherwise, is copyright © 2011, Bloggst.com | Jobs | CPA Affiliate Network
Powered by vBulletin® - Copyright ©2000 - 2007, Jelsoft Enterprises Ltd