School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!
You're Browsing As A Guest! Register Now...
Become an Expert!

Join 357,626 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,570 people online right now.Registration is fast and FREE... Join Now!



Adding a Favorite Icon

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
  • Icon

Reputation: 3
  • View blog
  • Posts: 144
  • Joined: 11-August 09


Dream Kudos: 50

Posted 02 September 2009 - 01: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. :)
Was This Post Helpful? 0
  • +
  • -


#2 kewlkreator  Icon User is offline

  • Total DIC-Wad
  • Icon

Reputation: 20
  • View blog
  • Posts: 1,044
  • Joined: 25-March 09


Dream Kudos: 550

Re: Adding a Favorite Icon

Posted 06 September 2009 - 10: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
  • Icon

Reputation: 3
  • View blog
  • Posts: 144
  • Joined: 11-August 09


Dream Kudos: 50

Re: Adding a Favorite Icon

Posted 07 September 2009 - 06: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? -1
  • +
  • -

#4 moopet  Icon User is offline

  • D.I.C Regular
  • PipPipPip

Reputation: 53
  • View blog
  • Posts: 442
  • Joined: 02-April 09


Dream Kudos: 50

Re: Adding a Favorite Icon

Posted 13 March 2010 - 01: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
  • Icon

Reputation: 3
  • View blog
  • Posts: 144
  • Joined: 11-August 09


Dream Kudos: 50

Re: Adding a Favorite Icon

Posted 13 March 2010 - 01:58 PM

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

#6 comptechexpert  Icon User is offline

  • D.I.C Regular
  • Icon

Reputation: 10
  • View blog
  • Posts: 303
  • Joined: 27-December 09


Dream Kudos: 0

Re: Adding a Favorite Icon

Posted 14 March 2010 - 12: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
  • Icon

Reputation: 3
  • View blog
  • Posts: 144
  • Joined: 11-August 09


Dream Kudos: 50

Re: Adding a Favorite Icon

Posted 14 March 2010 - 01: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 comptechexpert  Icon User is offline

  • D.I.C Regular
  • Icon

Reputation: 10
  • View blog
  • Posts: 303
  • Joined: 27-December 09


Dream Kudos: 0

Re: Adding a Favorite Icon

Posted 15 March 2010 - 08:14 AM

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

Page 1 of 1

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users



Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month