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>
Related
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 :)
this is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="StaticPictures/MyFavicon.ico" />
<title>Main Page</title>
</head>
<body>
</body>
</html>
**also:
I tried to add from website root.
My icon 16X16 pixels.
I cleaned cache from web browser.
I Tried to load page with (Explorer , Edge , Chrome) but without success.
I tried to convert icon to (PNG or GIF) and use this code:**
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />
Thanks for the help.
I had this problem as well. You should be able to solve it by adding the following code to your javascript file:
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'StaticPictures/MyFavicon.ico'
document.getElementsByTagName('head')[0].appendChild(link);
Please note that both the HTML5 specification of W3C and WhatWG standardize,
try this:
<link rel="shortcut icon" type="image/x-icon" href="/StaticPictures/MyFavicon.ico" />
Here is something that you might like: https://www.w3.org/2005/10/howto-favicon
<!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.
I've visited these questions and none of the answers worked for me:
Why doesn't my fav icon work in Chrome any more?
Chrome doesn't show the favicon
My Code
My website is http://mikeyaworski.com and this is the code I use to set my icon:
<head>
<title>mikeyaworski</title>
<link
rel="shortcut icon"
href="http://mikeyaworski.com/myicon.ico"
type="image/vnd.microsoft.icon"
>
</head>
This is my entire code.
What I've Tried
Instead of rel="shortcut icon"I've tried rel="icon"
Instead of type="image/vnd.microsoft.icon" I've tried type="image/x-icon"
Instead of href="http://mikeyaworski.com/myicon.ico" I've tried href="myicon.ico"
The icon works in Mozilla and Internet Explorer. The icon does not work in Google Chrome. Any ideas?
Your html is invalid and your browser tries to fix it. In doing so your link tag ends up outside the head and is ignored, fix your html and it will work
<!DOCTYPE>
<html>
<head>
<title>mikeyaworski</title>
<link rel="icon" href="myicon.ico" type="image/vnd.microsoft.icon">
</head>
<body> <!-- body tag should be here -->
<h1 style="text-align:center;font-family:trebuchet ms;" id="top"><br><br>Hompage</h1>
<p>
Coming soon. Until then, view my StackOverflow and other StackExchange profiles:
</p>
<a href="http://stackexchange.com/users/2644958">
<img src="http://stackexchange.com/users/flair/2644958.png?theme=dark" width="208" height="58" alt="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites" title="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites">
</a>
<body>
</html>
<!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
Try using the following code:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Or Else have a go at the link below with similar discussion:
local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Update:
Or else give a following link a try:
Fix missing favicons on Google Chrome
Hope this helps.
Thanks,
Jatin
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>