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>
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 :)
When I open one of my HTML documents in Google Chrome, the left of opened tab doesn't have any ICON on the tab, how do I set that?
You need to add a favicon image with .ico at the end.
Add it like:
<head>
<title>~~~~</title>
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
You need to set title and favicon for your html in the head section of html:
<head>
<title>Your custom title</title>
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
and put the favicon.png in same folder of html page.
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
I opened Chrome's developers tools and it doesn't load my favicon at all when I looked for it at networks tab.
Here is my code:
<DOCTYPE HTML>
<head>
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
<meta charset="utf-8">
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
Try this one:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
Seems there's no issue with your code attributes.This is the standerd form
<link rel="icon" href="imagelocation" type="image/x-icon" sizes="16x16">
Try a Image from internet without downloading and make verify that it's not a issue of Chrome first.Then take a look to your code and location of the image are matching correctly with your location of file you have call your Favicon.
Accroding to your tag your favicon should be in a sub directory called 'img'.This may be a browser cacheing issue also. Try viewing page source (Right Click > View Page Source ) and go to the location of the image and try reload it.
Try adding type type="image/x-icon"
<link rel="icon" href='./favicon.ico' type="image/x-icon"/>
and try move the favicon.ico in an subdir /img
then
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
or with shortcut icon
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
or save the ico like a png
<link rel="shortcut icon" type="image/png" href="./img/favicon.png" />
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>