There's an indentation indicating that my favicon was loaded, but instead of seeing the favicon, I see a completely blank region where the favicon should be. The image is 38x48, but I also tried 32x32. It's about 10kb for the 48x48, 5kb for the 32x32. It's certainly not a blank/transparent image.
This is what I see when I load the favicon:
This is what I see when I load no favicon:
Can you see the difference? I should be seeing a picture of a leaf swaddling a baby's cheek with bird saliva that's been transformed into honey.
*I put this under compliance because I thought it might be an issue of the image size, dimensions, or something else very nitche.
Here's the head. I wonder if it's because I'm in China and W3C may not be accessible.... I'm going to try quirks mode, next.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>...</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="icon" type="image/x-icon" href="/index.ico" />
<!-- Style link START -->
<link rel=stylesheet media="screen" type="text/css" size="48x48" href="screen.css">
<!-- Style link END -->
</head>
Favicons have to be of various sizes for different types of browsers.
It's important that the sizes are correct for each browser.
You seem to be using mozilla, so use an image which is either:
16 x 16
32 x 32
48 x 48
62 x 62
All in pixels.
Here's the code:
<!-- For IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->
Hope this worked.
I tested this myself to see if I could get it to work. It did not work with an ico file named "index.ico" However, it did work when I renamed the ico file to "favicon.ico". if that does not work you can also try with other file formats. PNG and JPG always work for me no matter the name.
Also make sure that your ico file is converted correctly and that you have not just renamed it to an ico file. There are many converters out there where you can convert other images files to ico files.
Edit: Afterwards I tried with several different random names and they all worked, all except from index.ico
I believe it's some cache issue because the problem resolves itself over time. I've tried changing the favicon, and it doesn't change until a significant amount of time elapses. I'd like to learn more about this behavior and understand why it occurs.
Related
I have a ASP.Net application, and in my Layout.cshtm based on a condition I'm trying to change Favicon so different users have different Favicons based on that condition. Here's the snippet:
<!DOCTYPE html>
#{
bool someCondition = UserInfo.IsCondition;
}
<html lang="#ISO.Substring(0, 2)" data-full-culture="#ISO">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#if (someCondition == true) {
<title ng-bind="'title 1'"></title>
<link rel="shortcut icon" href="/custom-favicon.ico" type="image/x-icon">
<link rel="icon" href="/custom-favicon.ico" type="image/x-icon">
}
else {
<title ng-bind="'title 2'"></title>
// Chrome sets favicon.ico as default, so no need to set it here
}
</head>
</html>
Both favicon.ico and custom-favicon.ico are in my root directory of my project.
Although my title gets changed based on the condition, but the Favicon is set to favicon.ico and won't get updated even though I'm forcing it to change.
I would appreciate any help on this issue.
Browsers are quite lazy regarding favicon. In your particular case it should be a good thing to gently push them :) Be explicit:
#if (someCondition == true) {
<title ng-bind="'title 1'"></title>
<link rel="shortcut icon" href="/custom-favicon.ico">
}
else {
<title ng-bind="'title 2'"></title>
<link rel="shortcut icon" href="/favicon.ico">
}
If that still don't work, you can:
Add a timestamp at the end of the icon URLs, to make browsers consider them as new files every time (eg. /favicon.ico?v=#timestamp).
Use JS to set favicon explicitly, yet this is a bit overkill. For example, see faviconjs.
PS: You probably don't need the duplicated shortcut icon / icon declarations. But forcing the browser to regularly switch icons might change this. Please let me know.
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
the head of my site starts with this but the favicon still won't show up inside of the title bar on any of my pages.
if you want to check for yourself the site is http://viewwit.com/ (I know it's bad, I'm making it just for fun).
I can't figure out why it isn't working. Any help would be awesome.
Try these
<meta charset="utf-8">
<link rel="shortcut icon" href="http://viewwit.com/image/favicon.ico" />
Take a look at the meta charset
As an easy fix, you can place your favicon within the root directory (same place as index.html). This is the default location which a browser will look for when searching for a favicon.
I have an asp.net web form with a head section like this:
<head runat="server">
<title>Web application</title>
<link rel="Stylesheet" href="resources/material.min.css" />
<link rel="Stylesheet" href="resources/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico" />
<script type="text/javascript" src="resources/material.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
</head>
The application won't work in Internet Explorer compatibility mode, which unfortunately our firm enables in IE by default. Normally I fix this by adding the meta tag above, but for some reason this isn't working on this page. If I move the meta tag to the top of the <head> section, before the style sheets, it does work. So my question is this: is there a reason the order matters? I'm baffled.
Yes, order matters. The browser procedurally processes HTML. If the meta tag is first, Internet Explorer knows to use Compatibility Mode almost as soon as it starts parsing the document. Otherwise, it's already started parsing and processed everything else - your CSS, JavaScript, not in Compatibility Mode.
I've spend evenings on tuning my backend code to be served faster, yet there's a gap in page loading time that am not familiar with.
Attached an image - please tell me what is happening in highlighted time (between recieving HTML and DOM ready).
What I think it is - maybe it's DOM intself generating? But why so long? Theres like 10 HTML tags in this testing page.
That's my markup:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#</title>
<meta name="keywords" content="a, b">
<meta name="description" content="cde">
<meta name="geo.region" content="PL">
<meta name="geo.placename" content="Warszawa">
<meta name="geo.position" content="52;21">
<meta name="ICBM" content="52, 21">
<link rel="stylesheet" href="/Css/_global/Style.css">
<!--link rel="shortcut icon" href="/Gfx/_global/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/Gfx/_global/favicon.gif" type="image/x-icon"-->
</head>
<body>
<ul id="bredcrumbs"><li>domain.com</li><li>Home Page</li></ul>
Content
</body>
</html>
The browser is parsing the dom (as warlock notes) but some javascript may run during this process as well. (See JavaScript: DOM load events, execution sequence, and $(document).ready())
As you have seen some browser plugins can essentially inject some scripts which run pre-dom load which may show up in your load times.
The Browser is parsing HTML and creating DOM
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'); ?>" />