loading

HTML URL icon?

How can I put an image in the URL and/or title of a HTML page? I am trying to make a website and would like to have a little image on it.

sort by: active | newest | oldest
kelseymh4 years ago

In your HTML document, add the markup


<HEAD>
<LINK REL="shortcut icon" HREF="full-path-to-icon-file">
</HEAD>

If your document already has a HEAD section (and all documents must), just add the LINK tag into that section. The URL to the icon must be a full path, not relative.

Or...

You can have the HREF read: href="favicon.ico" if you make a 16 x 16 pixel icon (you can do that in MsPaint) and stick the .ico file in the directory where the webpage is located. Easy Peasy.

Qa
Are you sure? My read of the spec is that LINK HREFs always have to be full path, not relative. Maybe some/most browsers have workarounds built in to resolve the reference.
The default for HTML is to look in the current directory for related files, then root, then specified directory using relative or specific addresses. Wikipedia and W3C have info on Favicons, and there are many more if you search. An example of relative path use can be found at a small site I wrote some time ago. It works on my computer(s) with IE8 ( and previously IE7).

Full path is preferred when you have a link to something that isn't specifically on your site or is so far away from your page's directory that relative isn't reliable.

Qa

There are different requirements in the specifications. Whether browsers strictly follow those specifications, or provide more flexible performance, is a separate issue, and may very well be browser-dependent (that is especially true of anything which is said to "work on IE").

As one example, a fully-qualified URL is required when specified with the BASE tag.

...Ah, ha! You are correct for the LINK tag. RFC-1866 section 5.2.4,

The element represents a hyperlink (see 7, "Hyperlinks"). Any number of LINK elements may occur in the element of an HTML document. It has the same attributes as the element (see 5.7.3, "Anchor: A").

Since ordinary anchors may use relative URLs, it follows that LINK tags may also use relative URLs.