View Full Version : logo placement before http://www.site.com

02-13-2008, 09:36 PM
i'm not sure where to ask this question so i apologize if this is the wrong place.

i'm wondering how to place a logo before the url address. on this site it shows "cf" written in black with a yellow highlight.


02-13-2008, 10:09 PM
Hi faclimber,

It's called a favicon (http://en.wikipedia.org/wiki/Favicon).

02-13-2008, 10:21 PM
thanks croatiankid!

assuming my website is: favicon.com and my image is favicon.gif, is this code written correctly?

<link rel="shortcut icon" href="http://favicon.com" type="image/favicon.gif" />
<link rel="icon" href="http://favicon.com" type="image/favicon.gif" />

02-13-2008, 11:05 PM
It has to be an ico image if you want to support IE. It wouldn't be right anyway.

<link rel="shortcut icon" href="/images/favicon.gif" type="image/gif"/>

02-13-2008, 11:20 PM
thanks CyanLight. i'm unfamiliar with ico images so i'll have to google it. am i to assume correctly that you can save files in illustrator/photoshop as such?

if i'm reading this correctly, is the href="/images/favicon.gif" telling the browser where it should find the image and type="image/gif" is telling the browser what kind of file it is?

assuming, favicon.ico is my image name would this code be correct?

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

02-13-2008, 11:26 PM
Close, but no. The unrecognized MIME type is image/x-icon, but you should use the registered one, image/vnd.microsoft.icon

02-13-2008, 11:35 PM
how is this?
<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon"/>

is this all you would need for the header because the link posted above stated that you needed to place two <link's> in the head.

lastly, i just tried to save one of my gif's in photoshop as an ico and it didn't give me the option.

thanks for the help thus far, you've been a great help and i really appreciate it.

02-13-2008, 11:40 PM
Yep, that's it.

Take nothing at face value. You only need one: Firefox takes icon whilst IE takes shortcut icon. Both win.

As for saving it: ICO plugin for Photoshop and Illustrator (http://www.telegraphics.com.au/sw/).

02-14-2008, 12:21 AM
thanks again, CyanLight.

i've got it working in firefox but it won't open correctly in safari. it shows an html document but not the image.

should this code work for safari as well? i haven't been able to check it in ie yet as i don't own a pc.

thanks again.