Favicon information

technica · #1 (**permalink**) 01-20-2004, 10:14 PM

Hello everybody.
Just wondering, how do you add in a little icon for your website, similar to the one you guys have on WPW that appears in the address bar and when you add to favorites?
Thanks for helping...

matauri · #2 (**permalink**) 01-21-2004, 12:09 AM

I think your referring to this command:

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

which is put between your <head></head> tags.

If you havent already got it in .ico format, you will have to convert it. (there are plenty of freebie icon convertors on net)

Cindy

technica · #3 (**permalink**) 01-21-2004, 07:29 AM

Cindy,
Thanks for your help. What is the specific size of the icon? Thanks...

mikmikmik · #4 (**permalink**) 01-21-2004, 08:57 AM

32px x 32px is the stantard.
I don't speak for the girl, though lol.

Do you need a tutorial to look at?

http://codepunk.hardwar.org.uk/ahtml33.htm
This was the best tutorial site I used at the very beginning of my career!

paulhiles · #5 (**permalink**) 01-21-2004, 09:20 AM

Hi Becky,

the topic of favicons came up on Web Programming in August last year, have a look through the thread see if there's anything of use to you.
http://www.webproworld.com/viewtopic.php?t=4620

PS. there's also an online favicon application at www.favicon.co.uk, but it's tricky to get it just right!

Hope that helps,

Paul

technica · #6 (**permalink**) 01-21-2004, 11:36 PM

Thanks everybody, I think I'll be able to make one now... :)

**weegillis** · #7 (**permalink**) 01-22-2004, 04:08 AM

If you can believe it, someone is actually charging a hundred and twenty five bucks for a favicon! Better come with power windows and seats for that price.

I've managed to 'force' some icons out of paint, but it's not worth explaining how. For only ten bucks, USD you can buy IconArt Pro, with commercial license. Then you can charge your customers and arm-and-a-leg for favicons.

In this metatag example,

Code:

<link rel="shortcut icon" href="favicon.ico" type="icon/x-image" />

does anyone know just how important it is the include the type attribute?

zigbert · #8 (**permalink**) 03-17-2004, 02:23 AM

I have viewed some websites and when saving these websites to my favorites they have a icon or picture that is set in replace of the standard (e) internet explorer icon. I want to do this on my website so this will show up when someone saves my website to their favorites.

Thank you for any help.

sijpie · #9 (**permalink**) 03-17-2004, 05:40 AM

This is easily done, but remember, it isn't foolproof, as sometimes the icon cash gets messed up and suddenly you will see the standard icon back.

Easiest is to place the icon in the root directory of the website, and call it favicon.ico It needs to be a proper windows icon that you can make using a icon maker programme (many freeware available)

Alternatively you can point to a suitable icon from the HTML using the following
<LINK REL="SHORTCUT ICON" HREF="/favicon.ico">
in the <head> section of your page.

That's it!

eightfifteen · #10 (**permalink**) 03-17-2004, 02:40 PM

Last I checked, IE is not kosher with the favicon

amorphic8 · #11 (**permalink**) 03-17-2004, 03:21 PM

IE on PC is ok using favicons, IE Mac, however does not. Safari mac does, and I believe that the latest Netscape both Windows and Mac also displays favicons.

It is also recommended that you upload a version of the favicon in .png format and link BOTH in the head of your pages in the follwing way:

<link rel="SHORTCUT ICON" href="favicon.ico">
<link rel="ICON" href="favicon.png" type="image/png">

The favicons (both .ico and .png) need to be uploaded in the site root directory.

Also, the favicons should be exactly 16 pixels square.

Look at the source code of these pages:
http://www.latex-mania.com
http://www.grindergirl.com

One more thing: there is a favicon tutorial at:
http://hotwired.lycos.com/webmonkey/01/18/index1a.html

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode