Favicon does not appear - html

I'm trying to add a favicon in HTML, I have seen a video about it and this code works perfectly in the video:
<html>
<header>
<link rel="icon" href="images/favicon.ico">
</header>
<body>
</body>
</html>
However, it does not work in my case:
What am I doing wrong?
You can get the files I'm using from here in case you need them (it includes the icon)

It doesn't work, because in your code you wrote <header> instead of <head> and </header> instead of </head>.
It should be like this:
<html>
<head>
<link rel="icon" href="images/favicon.ico">
</head>
<body>
</body>
</html>

I think the best way to do this by adding the icon like so
<link type="image/x-icon" href="favicon.ico" />
PS:the favicon.ico should be in the root of your project directory :)

Related

External stylesheet from github not linking

So till now I always used stylesheets which are in the same folder as my website, but I want to be more flexible and work on my layout via github. So i uploaded the css file and used the raw link. I noticed that I can't use it. Is it even possible to use stylesheets from websites? I tried to find an answer on the internet but I couldn't find an article about this issue.
Here's my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Goetterescu/Website/main/styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/Goetterescu/Website/main/styles.css">
</head>
I used https://gitcdn.link/ to serve the stylesheet since Github was serving it with the wrong stylesheet
You should use this type of file path to your css file. GitHub file directories should point to the relative path of the linked file within the repository.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>

My favicon is not showing up on the browser. What am I doing wrong?

<!doctype html>
<html>
<head>
<title>Asem Syed</title>
<link rel="icon" href="favicon.png" type="image/png" />
</head>
<body>
<div><h1>aasemjs.com will be live.</h1></div>
<div><h1>...soon.</h1></div>
</body>
</html>
Here is my short code, my favicon has been uploaded in the public_html directory, as well as a folder in that "images". On the browser it keeps showing me a broken link.
What am I doing wrong over here?
This code should help you out.
If you have the css in a folder use "../", if this doesn't work just stick with "/" in front of images.
<link rel="icon" type="image/png" href="/images/picture.png">
If you put "sizes" in the link tag, it won't be supported by any browsers, so you'll have to change the width and height in a photo editor.

CSS stylesheet not linking to my html page

I have a problem where my css does not affect my html. I made a fiddle here
It worked when I wasn't trying to connect an external stylesheet and used style tags,
Thanks in advance to anyone who can help.
btw i tried
<link rel="stylesheet" type="text/css" href="index.css">
and it did not work.
Make sure you are linking it in your 'head' section of the HTML such as this:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also be sure to close the tag and that the style sheet you are linking is named 'index.css'
Edit:
HTML is split up into two main section tags: body and head. In a normal HTML page, the structure is like so:
<html>
<head>
</head>
<body>
</body>
</html>
The code I referenced at the beginning of this answer should be placed into the head section of the HTML page.
The fact that you are linking to simply index.css worries me. Is index.css in your site root? If so, specify that:
<link rel="stylesheet" type="text/css" href="/index.css">
As stated also by BuddhistBeast, check to make sure it's in between the head tags:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also check that you are referencing it correctly. If it is all in one folder, then
<link href="index.css" type="text/css" rel="stylesheet" />
is correct.
If it's in its own folder, named "css" for example, it should be written as:
<link href="css/index.css" type="text/css" rel="stylesheet" />
You put #button instead of input, #button in the css.

Favicon displaying in Firefox and not Chrome

My website is here: www.drizly.com
Our favicon shows up in Firefox but not in Chrome... I've read and tried everything, well, clearly not everything. I don't get it. Can someone help?
Try to use rel="shortcut icon" and an absolute URL to your favicon.
Example:
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
You have wrong html structure, you missing open tag <html>.
Now i see:
<DOCTYPE! html>
<head>
...
</head>
<body>
...
</body>
</html>
Chrome interprets this like:
<html>
<head>
</head>
<body>
<doctype! html="">
<title>Drizly | Alcohol Delivery, Boston MA.</title>
<link rel="shortcut icon" href="http://drizly.com/img/favicon.ico">
...
</body>
</html>

Chrome favicon overriding issue

I have a Html page which consists of two different favicons references, I want to override the second favicon (favicon2) with the first one. i.e :
<head>
<link rel="shortcut icon" href="/assets/images/favicon1.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/assets/images/favicon2.ico" type="image/x-icon" />
</head>
In Firefox favicon2 is showing but in Chrome and IE favicon1 is displaying, how can I make Chrome display favicon2?
Please help me this. I am stuck.
Thanks in advance
Add your favicon in the root of the folder and update the url path to favicon.
function myFunction() {
document.getElementById('myIcon').href = "favicon2.ico";
}
<!DOCTYPE html>
<html>
<head>
<link id="myIcon" rel="shortcut icon" href="favicon1.ico" type="image/x-icon" />
</head>
<body>
<p>Click the button to change the value of the src attribute of the icon.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>