CODEWITHSUNDEEP
htmlfavicon
nattynerdy
nattynerdy

Reputation: 421

How can I put a favicon on a computer-based webpage?

My web page is not actually live on the internet. I have it saved on my computer and I am simply opening the HTML file from my computer- the navigation of the website is all on my computer. Anyway, before I put my site live on the internet, I want to test out all my code, including my favicon. My favicon is not showing up, though. Here is the code I found to be most recommended so far:

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

Upvotes: 0

Views: 2011

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

The link element is correct as such (though the type attribute is redundant, and all that it could achieve is to prevent a browser from using the icon), but the URL /favicon.ico is relative and generally does not work when the HTML document is local. A locally accessed HTML document has a file: URL, and such URLs are by definition system-dependent, and in practice they also depend on the browser, too. For example, in a typical Windows system, in you placed favicon.ico directly in the root of the C: disk (requiring normally admin privileges for that), Chrome would find it, Firefox wouldn’t, as they use different file: URLs when you open local files.

So in local testing, you should normally use relative URLs that are relative to the current document, e.g. as in href=favicon.ico (when favicon.ico is in the same folder as the referring HTML file) or as in href=../images/favicon.ico (when favicon.ico is in an images folder that is a sibling of the folder where the referring HTML file lies).

If you need to test locally with URLs that relative to the server root, you should download and install a local HTTP server, such as XAMPP.

Upvotes: 0

Milan and Friends
Milan and Friends

Reputation: 5610

favicon.ico must be in your root folder, same place where is your index.html, and of course you must have a localhost server

<link href="favicon.ico" rel="shortcut icon">

Upvotes: 0

havana
havana

Reputation: 120

Try "shortcut icon" instead of "icon":

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

And note that the path to your favicon is relative to the html file. If both are in the same directory, the path is just "favicon.ico", no slash.

Upvotes: 3

Related Questions