Page 1 of 1

Images im title bar

Posted: Tue Jun 20, 2006 12:40 am
by 4Boredom
I see a lil logo in most title bars now on big websites, this one included. Right to the left of the http...

Anyone know how to do this?

Posted: Tue Jun 20, 2006 12:53 am
by Benjamin
http://favicon.com/ Should tell you how to do it.

Posted: Thu Jun 22, 2006 12:24 am
by 4Boredom

Code: Select all

<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="http://www.4boredom.com/myicon.ico">
<title>4boredom.com</title>
</head>
this isnt working? I have it in my header.php.. is it right?

Posted: Thu Jun 22, 2006 12:35 am
by Benjamin
http://en.wikipedia.org/wiki/Favicon
For optimal browser support, the following rules should be obeyed:

* Include both of these element types (for reasons explained below under Standardization):

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

* The link elements must be inside the head element (between <head> and </head>) in the HTML.
* For XHTML, the link element must be empty (terminated by /> )
* The href can, but need not, point to the location /favicon.ico. It could equally well point anywhere else on your site that is convenient.
* The image can usually be in any image format supported by the web browser, the major exception is IE, which only supports ICO although it appears IE7 may support alternative formats.
* The .ico file format will be read correctly by most browsers.
* Configure the webserver to send the correct MIME identifier:
o ICO files image/x-icon (the IANA-registered MIME type of image/vnd.microsoft.icon is not recognized by major browsers)
o GIF files image/gif
o PNG files image/png
* Use the appropriate resolution and colordepth.
o ICO: include multiple resolutions (most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp - i.e. 16, 256 and 16 million colours) in the file.
o GIF: use 16×16 in 256 colors.
o PNG: use 16×16 in either 256 colors or 24-bit.

Note: A file called favicon.ico and located in the document root directory will also be found by some browsers which do not process the link elements, even if it is not linked from anywhere on your site.

Posted: Thu Jun 22, 2006 12:39 am
by 4Boredom
Still not workin

http://www.4boredom.com/index2.php

http://www.4boredom.com/myicon.ico

Code: Select all

<html>
<head>
<link rel="icon" href="http://www.4boredom.com/myicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="http://www.4boredom.com/myicon.ico" type="image/x-icon" /> 
<title>4boredom.com</title>
</head>

Posted: Thu Jun 22, 2006 12:51 am
by Benjamin
Works in firefox. You'll just have to go through the article in the previous link and make sure the .ico file conforms to all the specs. Might want to rename it to favicon.ico rather than myicon.ico as IE tends to be a little bit weird about things.

Posted: Thu Jun 22, 2006 1:01 am
by AKA Panama Jack
It's been supported in Opera for like forever on each tab an in your bookmarks. :D

This site http://www.chami.com/html-kit/services/favicon/ will allow you to upload an image file and it will convert it to into ico format. It's really simple. You don't need any special software to convert an image into a faveicon.

Posted: Thu Jun 22, 2006 1:27 am
by 4Boredom
I just used the checker at http://www.html-kit.com/favicon/validator/


http://4boredom.com/index2.php was checked and found to have a valid favicon.ico file.

Notes:
This page has a valid favicon.ico but it does not use a favicon link tag (<link rel="shortcut icon" ...> or <link rel="icon" ...>). Although this is not a problem, the favicon link tag is likely to be more compatible with upcoming browser versions.
Details:
Found the web page at:
http://4boredom.com/index2.php (1.51 KB)

Found the default favicon (favicon.ico)

Found favicon at:
http://4boredom.com/favicon.ico (3.54 KB)

This favicon has 2 images/icons.

(16*16 pixels, 256 max colors)

Could not find a <link ...> tag that specify a favicon.

_______________________________________________________________


ok so my link tags must be wrong?

Code: Select all

<head>
<link rel="icon" href="http://www.4boredom.com/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="http://www.4boredom.com/favicon.ico" type="image/x-icon" /> 
<title>4boredom.com</title>
</head>

Posted: Thu Jun 22, 2006 1:29 am
by 4Boredom
ok great it seems to work now... thanks all that helped

Posted: Thu Jun 22, 2006 1:35 am
by 4Boredom
the only problem is that it shows a distorted version? Oh well tho i guess its good that I even got it up

Posted: Thu Jun 22, 2006 1:38 am
by 4Boredom
ok firefox shows it fine... so it was just IE that messed it up

that just shows i did it right and microsoft sucks :)

Posted: Thu Jun 22, 2006 10:08 pm
by tecktalkcm0391
it takes time for MS IE to work... You have to be on the page alot for it to work..

Posted: Thu Jun 22, 2006 10:58 pm
by LiveFree
In IE for the favicon to show up the site must be in your favorites...

Yea I know, M$ sucks