2

Create a Favicon for your website


When you visit a website you might notice a small icon in the left side of the address bar. This is called a favicon and it can help you to brand your website or blog. The favicon doesn’t only show up when you’re on the website, but also when you save the website to your browser’s favourites, the icon will be shown. It’s easy to create a favicon.

1 - Create an image
With Photoshop or any other graphics software, you start by creating an image with a size of exactly 16×16 pixels, this is the size of a favicon. Because it’s a pretty small size, it’s difficult to design complex graphics for your favicon. Focus on simple letters or images.

2 - Convert your image to a .ico file
Now you have an image, you should convert it to the file extension for a favicon, this is .ico. There are several websites offering a free conversion tool. I always use the one on Dynamic Drive. Upload your image and click the ‘create icon’ button. You’ll see a preview of your favicon, and if you’re satisfied with the result you can download it instantly.

3 - Change your header
After downloading the favicon to your computer, now upload it to your server. Then add this line of code between the <head></head> tags of your website. Make sure the code points to the location where you’ve uploaded your favicon.

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

4 - Test the result
Now open your website, and check if the icon shows up. If you did every step in this post, you should now see your very own favicon in front of your website’s address.

Other Favicon resources:


Tagged as: , ,
  1. Melanie says:
    October 12, 2008 at 1:41 am

    What a great tutorial!

    If you’re using WordPress, you can also use the MaxBlogPress Favicon plugin. It’s pretty cool. :D

  2. favicon generator says:
    December 26, 2008 at 8:43 am

    I am using free tool at animatedfavicon.com. This one works great and its fast

Leave a Reply