Page 1 of 1

Adding a Favorite Icon How to Add a Favorite Icon to Your Website Rate Topic: ***** 1 Votes

#1 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Posted 02 September 2009 - 02:23 PM

This is my first tutorial with DIC, so hopefully it will all work out! :) Since I am a relatively new web designer I was surprised to find that there are no tutorials on the simple subject of how to make a favorite icon. Although most web designers should know how to do this, I think there are many (I was one) who do not.

Of course the first step is to create a favorite icon. For most browsers (like safari) you can just through in a jpeg of any size, and it will work. But, the ever-popular ie (internet explorer) has very strict rules for what kind of image you can use. :( To make this very picky browser happy, you must convert your image to .ico and it must be 16x16. A program I have found to be helpful is Icon Editor, this program will convert any .bmp image into .ico format, it will also resize it for you.

Now that you have your icon ready, you need to use it on your webpage. You will need to upload your icon to the root directory on your server. Name the file “favicon.ico,” this will make all of the pages on your site have that icon placed next to the address bar, just like Google! Now, if you don’t want to clutter up your root directory with a favorite icon, you will need to put this code in between the <head> and </head> elements on every page on your site:
<link rel="shortcut icon" type="image/ico" href="http://www.domain.com/the/root/to/the/icon/file/favicon.ico">


I hope that makes sense. Any comments or questions would be appreciated. :)

Is This A Good Question/Topic? 1
  • +

Replies To: Adding a Favorite Icon

#2 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Posted 06 September 2009 - 11:24 PM

Could you explain the other methods? There are many.
Was This Post Helpful? 1
  • +
  • -

#3 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Posted 07 September 2009 - 07:48 AM

Why? The one given in this tutorial has worked the best for me. :^: I have tried many different methods of doing this and the one given in this tutorial is by far the best way to do it! :)
Was This Post Helpful? 0
  • +
  • -

#4 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Posted 13 March 2010 - 02:43 PM

View Posttim4christ, on 07 September 2009 - 01:48 PM, said:

Why? The one given in this tutorial has worked the best for me. :^: I have tried many different methods of doing this and the one given in this tutorial is by far the best way to do it! :)


Because if you use a bigger icon in a real format - like a 64x64 png - when you save a bookmark to your desktop, the icon doesn't look like it's pixelated rubbish from 1993. You can use more than one, to cater for crippled browsers like IE. You can save site-specific thumbnails as well (like the ones facebook uses).

Things to note if you're making an icon:
If you're working with IE, you need to make sure the path to the file is absolute, else it doesn't always work.
If you're changing it and hitting F5 to refresh to see what it looks like, well, in some browsers that Just Won't Work, so be careful and get it right first time.
Was This Post Helpful? 0
  • +
  • -

#5 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Posted 13 March 2010 - 02:58 PM

Yes, that is true...because 16x16 icons can look rather bad! Great points also :bigsmile:
Was This Post Helpful? 0
  • +
  • -

#6 williamgeorgegardner  Icon User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Posted 14 March 2010 - 01:30 PM

favicon.cc is a good way to make favicons.
Was This Post Helpful? 1
  • +
  • -

#7 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Posted 14 March 2010 - 02:30 PM

WOW!! Great site!!!! I've never seen this one before but it's great how you can make animated favorite icons too :^:
Was This Post Helpful? 0
  • +
  • -

#8 williamgeorgegardner  Icon User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Posted 15 March 2010 - 09:14 AM

I know it is a great website!!!!.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1