How to put an image into the URL bar of a browser

Hello there.

How do you put that little image into the address bar of the browser, with the URL? Like the Sitepoint logo in front of the page address.
Thanks, it’s intriguing.

In the head element:

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

Great, thanks. Does that include XHTML too?

I’ve just put it into the Head, but I don’t understand how to put one of my images in. Where do I put my image? Please

Go here and get a favicon then put it in your document head (add a “/” before the closing “>” for xhtml)

Yes, except that you need to close the tag with ‘/>’ instead of just ‘>’.

You can put it anywhere, as long as the href attribute in the <link> tag points to it. In my example the address is ‘/favicon.ico’, which means a file named favicon.ico (the traditional name for this) in the root directory of the web site.

It should be an ICO file, though. You may need some extra software to create one of those, as Tailslide indicated.

Fantastic, both thanks very much.

That site that Tailslide gave the link for is great. It’s what I use to make mine. Really easy – you just upload the image you want to use and it creates it.

indeed. The image you’re talking about is also called ‘favicon’. might be interested for you to know :slight_smile:

you use a favicon.ico image for that. search the web for instructions on how to make the. there are several sites that have online tools that will turn a 16x16 or 32x32 icon into and .ico image for you.

some people will tell you to put the following into you head tag. but it’s not necessary unless you are linking to a .ico on another web site or using a different image format.

in html

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

in xhtml

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

just upload the image to your root directory and the browser will automatically load the .ico without the link tag.