Images im title bar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Images im title bar

Post 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?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

http://favicon.com/ Should tell you how to do it.
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post 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?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post 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>
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post 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.
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post 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>
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post by 4Boredom »

ok great it seems to work now... thanks all that helped
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post 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
4Boredom
Forum Contributor
Posts: 176
Joined: Tue Nov 08, 2005 4:29 pm

Post 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 :)
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post by tecktalkcm0391 »

it takes time for MS IE to work... You have to be on the page alot for it to work..
LiveFree
Forum Contributor
Posts: 258
Joined: Tue Dec 06, 2005 5:34 pm
Location: W-Town

Post by LiveFree »

In IE for the favicon to show up the site must be in your favorites...

Yea I know, M$ sucks
Post Reply