Favicon not working on webpage in IE10 and below - html

Why is the favicon on this webpage not working in IE10 and lower? The webpage is here. It works in IE11 as well as other major browsers.
Here is the code on the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>...</title>
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" >
<!-- (various stylesheet, script, and meta declarations) -->
<link rel="Shortcut Icon" href="/riteAid-theme/images/custom/riteaid.ico" />
<!-- (more stylesheets and scripts) -->
<link rel="canonical" href="..." />
</head>
Things I have tried (to no avail):
Setting type="image/x-icon" in the link declaration.
Setting rel="icon" in the link declaration.
Setting the declaration higher up in the head.
Changing the name of the icon to favicon.ico
I am using a new virtual machine instance between attempts, so caching is not the issue.

It looks like the .ico file is in the wrong format (PNG or GIF). See this question.

Related

HTML not showing style on (local) browser

I have made an HTML file (code will be shown below for reference) using some images and style sheet (from local filesystem).
My Folders are as follows:
Main (contains the StyleSheet Style1.cs and HTML file Page1.html)
Images are placed in folder Main/pics
The style is perfectly visible in Code Editor (VS 2010), but whenever I run the file on Mozilla or Edge, etc, its failing to show any image or even style. Here is screenshot of html in editor:
Yes I have seen the question here but my problem is not fixing even though I tried it on both IE and Mozilla (Edge as well). (And I have followed the preventive measures as prescribed by the question above)
My code is pretty simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="/Style1.css" />
</head>
<body>
<div id="HeaderDiv" class="top-header-blue">
Header
</div>
<div id="CentreDiv" class="content-header-white">
Test
</div>
<div id="footerDiv" class="footer-centre">
CopyRights 2015 -
</div>
</body>
</html>
Any help will be so valuable. Thanks
you have given the wrong path in style as / in before the Style1.css just replace
<link rel="stylesheet" type="text/css" href="Style1.css" />

Getting W3C "document type does not allow element "LINK" here" even though links are in head?

I am running my site through the W3C validator and getting the error:
document type does not allow element "LINK" here"
for my external CSS style sheet links.
However, my links are within my head tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta name="description" content="[[*description]]" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
Would anyone know why this is occurring?
I am using the ModX Revo CMS if that matters.
The link isn't in the head.
You are using HTML 4 so / will end a tag. This means that <meta /> is the same as <meta>> which is the same as <meta>>.
You can't have character data in the <head> but the end tag for <head> and the start tag for <body> are optional. Therefore, <meta /> is the same as:
<meta>
</head>
<body>
>
Since the link element appears after this, it is in the body.
Get rid of the /. You aren't writing XHTML.

Does this DOCTYPE tag make IE9 render a page in compatibilty mode?

I just started working on a website, and in IE9 it is rendering in "IE9 compatibility view" browser mode.
Is there anything in the following DOCTYPE tag that would force that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The full contents of the <head> tag:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Applications</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Applications" />
<meta name="Description" content="Applications" />
<link rel="stylesheet" type="text/css" media="screen" href="ui/2009/css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui/2009/css/standard.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui/2009/css/home.css" />
<link rel="stylesheet" type="text/css" media="print" href="ui/2009/css/print.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="ui/2009/css/ie.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="ui/2009/css/ie6.css" /><![endif]-->
<script type="text/javascript" src="ui/2009/js/swfobject-2.js"></script>
</head>
I don't know is it possible to solve problem by modifying the doctype
But its meta tag should help you:
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
IE=edge - it says to IE to use highest mode available and chrome=1 - it says to IE6,7,8,9 to use Chrome frame (if it is installed)
Is there any reason to use an (old) XHTML doctype?
If not, use the current one:
<!DOCTYPE html>
No, there is nothing in the doctype that causes “compatibility mode” (aka “quirks mode”). It is one of the doctypes that triggers “standards mode”. But on IE, there are several things that may put the browser into “compatibility mode”.
Perhaps at the simplest, try visiting any web page on IE 9, pressing F12, selecting “compatibility mode”, then visiting another page. The browser will remain in “compatibility mode” even though the new page has a standards-conforming doctype. That is, manually setting the mode makes it persistent.
There are other possible causes too, see http://hsivonen.iki.fi/doctype/
Sirko - Not everyone in the world has HTML5 / XHTML5 browser capability. Until it is 100% standardized and is the 'majority' not the 'minority' that use it, XHTML 1.0 (or 2.0) for widespread compatibility is much better.
IE9 is going into compatibility view because IE9 only natively supports XHTML5 and not the older XHTML 1.0 and XHTML 2.0
Check here:
http://blogs.msdn.com/b/ie/archive/2010/11/01/xhtml-in-ie9.aspx
You can validate your website here:
http://validator.w3.org/#validate_by_upload
Hope it helps =)

favicon not showing

I'm trying to add a favicon to my url-bar. But it's not showing up, I'm sure the path is correct because when I use it as a normal image it does show up. Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title </title>
<link href = "styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="../images/favicon.png">
First, try to give the full URL istead. For example "http://localhost/mysite/images/favicon.png" (adapt it to your configuration, actually)
Otherwise, on my site, this works:
<link rel="shortcut icon" href="images/favicon.ico" />
Try to:
convert your png to ico. There are free online tools, for example http://www.convertico.com/
be sure of your folder path. Won't be ./images instead of ../images? Try to give the full URL otherwise. For example "http://localhost/mysite/images/favicon.ico".
after the above steps, try to clear the browser cache and reload the site.
use <link rel="icon" type="image/png" href="../images/favicon.png">
See W3C howto.
However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors.
Your rel attribute needs to be icon and not shortcut icon.
There are several ways to set a Favicon, but this is what I use:
<link rel="icon" type="image/png" href="<?= base_url('assets/images/logos/favicon.png'); ?>" />

link rel not working without http:// protocol

i'm trying to implement various semantic links on the website I'm working on.
For that, i try to put
<link rel="start" href="index.html" />
In my head section.
Although the data is present in the web page, Opera does not seems to see it to show the navigation bar that should however be present.
Here is my full head section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<title>Amnistie et compagnie</title>
<link rel="start" href="index.html" />
<link rel="previous" title="aaaa" href="365-gestes-pour-sauver-la-planxc3xa8te-2.html" />
<link rel="next" title="aaa" href="5-best-data-visualization-proj.html" />
</head>
Furthermore, when replacing urls with absolute ones, it seems to work correctly. is there something I did wrong ?
I even tried using code samples like this one, but my navigation bar (which is set to show automatically) never appears, except when a href is an absolute url, what I radically don't want.
So, how can i specify link elements with relative urls ?
what happens if you try the following doctype?
<!DOCTYPE html>