Something werid happens to me, I am going to build my personal website, put favicon.ico in the header.html, like below:
<link rel="shortcut icon" href="/favicon.ico">
And clean up the history records of the browser, Firefox shows the icon, but Chrome doesn't show up.
I can't figure out the reason, please help me.
This is probably because you have non-header markups in your head. For example:
<html>
<head>
<div>This div has nothing to do here. It's a "body" markup.</div>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
When Chrome finds a non-header markups in the head (eg. div, span, p...), it considers the header to be completed (even if it is not technically closed) and everything that follows is supposed to be in the body. And since the favicon markup doesn't work when it is in the body...
This behavior is specific to Chrome, this is why your favicon work in Firefox.
Related
My websites favicon is NOT working no matter what I try. I am on Brave browser.
Here is the code for that:
<body style="background-color:gray">
<title>MultiLangCoder Games</title>
<link rel="icon" type="image/x-icon" href="multilangcoder.repl.co/Logo.ico"/>
</body>
I followed every help online, but NOTHING worked!
The problem is already solved, but just for good measures:
The <title> </title> and <link> </link> tags both go in the <head> </head>. This also applies for some other tags as you can see here.
Commenter is probably right, change the href link to: "https://multilangcoder.repl.co/Logo.ico"
Works in both firefox and chrome for me.
I want to make a favicon for my web page. I found a sample but it's not working for me. Can someone please help me get it to work. On the index page of the web site I put this in the of the page.
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
!-->
Can I put this on specific pages that I want to display the favicon or does it have to be somewhere at the root of the site?
If you can think of any solution I would really appreciate it. Thanks for any help!
Try this, your comment end was in the wrong place
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
!-->
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
Assuming you are using IE conditional comments for a reason, it looks like your comment syntax is off. You can read more about them here.
Otherwise, the conditional comments aren't specifically needed for a favicon; your first tag looks good to me.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Yes, you can use unique favicons for individual pages, but browsers go cache crazy and will usually show the most recent icon for that domain unless otherwise instructed. For example: if you set an icon on your home page, but then didn't set one on a subpage, it would likely keep the home page's icon.
Below is a minimal example of the code that I am using for my website's favicon. It is showing up as a favicon in Safari 8.0's address bar, but it is not showing up in the favorites dropdown box that appears when you click on the address bar when it is added as a bookmark. Instead, the default compass icon appears. What do I need to add to or change in my HTML5 to make my icon show in the dropdown box?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
</head>
<body>
</body>
</html>
I figured out how to add a icon to the favourites dropdown box in Safari 8.0 by looking at other websites where the icon is showing up. I'm not sure why it works, but it works for me and the other websites that I looked at. Make sure to specify that the icon is a shortcut icon, the type is image/x-icon and the file is an ICO.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
</body>
</html>
Try a larger icon size (e.g., 144x144 px).
seems that when the link is placed outside of the < head > section, that the icon will show up for bookmarks, but will not work for home screen.
-hope this helps someone else
how to add more than a singe favicon for different browser?
Reason:
[Google Chrome] favicon matches perfectly at horizontal axis with page title to make "AT Drive" a complete sentence!
[Mozilla Firefox] Now here you can see the "Same favicon" miss matched the horizontal axis, it shifted little downwards
What i want:
To insert Multi-Favicon icons in a website with respect to browsers..
I can`t think of any pure html/css solution but You can change favicon for specify browser via JavaScript.
For example detect if browser is firefox (Detect all Firefox versions in JS) and then set diferent favicon for it (Changing website favicon dynamically) so final code should look something like this
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
<script type="text/javascript">
if (/firefox/i.test(navigator.userAgent)) {
document.getElementById("favicon").href = "favicon-firefox.png";
}
</script>
So here's another IE cross-compatibility issue. My website, www.zerozaku.com, is compatible with Chrome and Firefox, but IE has an issue with my Mini-Chat overflowing out of the box. Could anyone help?
P.S. I've only tested it on IE8, Firefox, Chrome
First error on list <link rel="shortcut icon" href="favicon.ico">
needs a closing tag like <link rel="shortcut icon" href="favicon.ico" />
Also if you try to run the validator on your page you'll notice that you have 50+ markup errors which I bet are causing missbehaviour in IE.
I just restructured the XHTML and CSS to be IE-compliant.