Up in the address bar where it says "http://doctype.com/questions" on the left of it shows the doctype logo, which is a orange light bulb. How do I a page to show my logo up there. It's on the left of the address bar. Thx in advance.

2 answers

This was chosen as the best answer

See what John had to say about what the icon is. His example is not very good, though.

<link rel="icon" type="image/vnd.microsoft.icon" href="/path/to/favicon.ico">

FIrst of all, the correct MIME type of ico files is image/vnd.microsoft.icon. The best case result of using a wrong or non-existing MIME type is that the browser decides to ignore the value and check the file itself. Currently most browsers apparently do this, but strictly speaking, this is non-standard behaviour. If you don't know the MIME type, it's better not to specify one than specifying the wrong one.

Secondly the correct value of the rel attribute is icon. Not shortcut icon. Think of rel attributes as specifying a list of attribute vales separated by spaces. icon tells the browser all it needs to know and unless you need to plan for, say, Netscape 4*, there's no good reason to use the antiquated syntax.

Finally, the answer is incomplete. In the age of mobile browsing it's noteworthy that the iPhone and other web-enabled devices by Apple don't use the favicon for bookmarks. Instead they rely on a declaration like the following:

<link rel="apple-touch-icon" type="image/png" href="/path/to/apple-touch-icon.png">

The iPod Touch derivatives don't seem to support the ico format and create a screenshot by default to provide a bookmark icon. By creating an icon of the appropriate dimensions (I wasn't aware of the automatic modifications TBH) you can provide your own icon the same way you can provide favicons in browsers.

*I don't actually know whether Netscape 4 required the word shortcut to be present. Point is that no currently noteworthy browser does.

Answered over 9 years ago by Alan Plum

It's called a favicon. Usually, it's a favicon.ico file located at the root of your website. If it's at the root and specfiically named "favicon.ico", then you don't have to add any special HTML to your pages. But if you want it in a different place/format, use this code in the head part of your HTML:

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

Change the "image/ico" to "image/png" if your favicon is in .png format (like doctype.com is - link)

Answered over 9 years ago by John McKenzie
  • Thank you so much, I've been trying to figure out how but nobody else knew. canyonchase1 over 9 years ago