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.
Related
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" />
This is the code i used to declared which image to use as a page icon and which one to use as a desktop icon. Am i missing something?
<link rel="shortcut icon" type="image/x-icon" href="/src/images/desktop_favicon.ico" />
<link rel="icon" type="image/png" href="/src/images/page_favicon.png">
Is it even possible to have a icon for the webpage and another for desktop?
here is my problem:
I have these 2 tags in my header but they are fighting each other. If I put the rel tag for the shortcut icon below the rel tag for the style sheet (because it is parsed after) my stylesheet breaks and does not display but the icon is there. If I leave it as is the icon does not display. I am obviously doing something wrong but I can't figure it out. Thanks in advance for the help
<link rel="shortcut icon" href="tophat2.ico">
<link rel="stylesheet" type="text/css" href="style.css" rel="shortcut icon" href="tophat2.jpg"/>
Remove the rel="shortcut icon" and the href="tophat2.jpg" in the second tag and close the first one.
<link rel="shortcut icon" href="tophat2.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
Try to delete this line:
And upload your favicon to the web server root and rename it to favicon.ico
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>
I added a icon to a site I built but the problem is it doesn't appear on Google Chrome And Safari. And here's what I did:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="shortcut icon" type="icon/icon" href= Jo.ico />
<title>My site</title>
</head>
<body>
</body>
</html>
Well you haven't put speech marks on the href section. And also, you should give your content a more unique identifier, because text and html are keywords, so the browser may, hypothetically, misinterpret them.
Why don't you try this instead:
<link href="Jo.ico" rel="icon" type="image/x-icon">
Your browsers may also be caching the icon. Please make sure your browser cache is properly cleared.
Also, make sure the icon's path is correct ("Jo.ico" assumes the icon is in the same directory as the file containing the above line of HTML).
Method 1
HTML 4.01:
<link rel="icon" type="image/png" href="favicon.png">
XHTM 1.0:
<link rel="icon" type="image/png" href="favicon.png" />
Method 2
<link rel="shortcut icon" href="favicon.ico">
Apple Devices:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Method 3
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Methond 4 (no support at the moment)
HTML 5:
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
Save your icon to the root folder of your website with the name: favicon.ico