I cannot for the life of me figure this one out.
I have my favicon showing on the frontpage of: http://www.pokerwomennews.com/
But on specific post pages, the favicon is not showing in chrome. The html for the favicons are exactly the same, and valid. Can anyone tell me what is being parsed incorrectly?
Thank you
This is because the string "UA-54046177-1" is being output between the head tags. If you view the page source, you will find it in this section.
<!-- Google Webmaster Tools plugin for WordPress -->
UA-54046177-1
<script>
This is causing Chrome to error-handle the invalid HTML, and assume that is where the body starts, and pushing the favicon link elements below it into the body. You can see the effect of this in Chrome's Elements panel.
This is because chrome first checks for a favicon.ico file, in the root of your web site, and it's finding one. The problem is that it's a zero-length, empty file. So google is showing what it thinks you want - nothing.
Remove the empty favicon.ico file entirely, and it will fix your issue.
Related
Chrome - source code tab - I see the following in console:
GET http://localhost/favicon.ico 404 (Not Found)
Inside head tag I have the following:
<link href='ico/favicon.ico' rel='icon'>
Click on the above link - opens a new tab with the ico image.
Also tried - without succes:
<link rel="shortcut icon" href="ico/favicon.ico">
Click on the above link says- doesn't exists.
Also I noticed the error message appears only at start and after pressing Ctrl F5, and after pressing F5 only - it dissapears.
Anyway, there is no icon on the browser's tab in any case.
On page tab - console is empty.
Other browsers not tested.
So what is the right way to have an icon and how to avoid the above message?
I've had problems like this with web servers running Linux. Sometimes you need to set the execute bit on the favicon.ico file:
chmod +rx favicon.ico
I've also had to give permissions to the web server service/account to the file:
sudo chown www-data:www-data /var/www/favicon.ico
Make sure your favicon does exist by going to http://localhost/ico/favicon.ico
and then try ctrl + f5, sometimes caching can ruin things up.
TL; DR
Things you should try:
Test with Firefox. If that works, you probably have a body-only markup in your head.
Use an absolute path (ie. /ico/favicon.ico)
Explanations
Browsers try to get favicon.ico in the root directory by convention. So this line in the dev console does not mean your browser doesn't understand ico/favicon.ico. This is more a sign that the favicon markup didn't work for any reason, so your browser is using the "root folder convention" as a fallback.
Using an absolute path (ie. /ico/favicon.ico instead of ico/favicon.ico) might help you pinpoint the issue, especially if your test page is not /.
Chrome has a particular behavior regarding forbidden markups in head (eg. div, p... which are body-only markups). When this happens, it considers the head section to be closed and thus ignores all head-only markups... such as link. Consequence: favicon sometimes works everywhere but fails on Chrome. So this is a good idea to test on another browser. It the favicon works elsewhere, look carefully at your head and try to spot a markup that shouldn't be here. W3C validator might help.
As Philippe said check that you don't have any wrong in your head tag. In my case I was printing a value with an echo function (php code). Removing it resolves this issue.
I was using tailwind and encountered the above error, I simply fixed it by
going back to my public folder and deleted the index.html page and recreated it back then paste
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"rel="stylesheet"/>
in the head section and it was fixed.
I have a page that displays the incorrect favicon when I view its source.
In the following image, you can see in the first tab (which is viewing the page) using the correct favicon - favicon-tenaya.ico.
However, when you go to view the page's source via Ctrl + U, it seems to display the default favicon - favico.ico, which is in the website's root folder:
Is there a way to get around this? We don't want the favicon changing when they view the source. How does the view source page in Chrome decide which favicon to use?
Viewing the source of a page is browser-dependent. There nothing you can do to force it to display a specific icon. For example, Firefox doesn't display any icon at all for a "View source" tab.
However, you can influence browsers to achieve this. For Chrome and your particular web site, replace the existing favicon.ico at the root of your web site with your favicon. This is what Chrome displays and yours is the black and white icon you don't want. Even better: rename favicon-tenaya.ico to favicon.ico (thus replacing the existing favicon.ico) and change the HTML accordingly.
As an aside, you don't need two declarations. Just keep the shortcut icon one, although the other one should do just as well.
Since Chrome does not parse the html it uses default file "/images/favicon.ico" to show as favicon in view-source. If it doesnt find it it look into different other locations too. for example if you use wordpress it uses http://[domain]/wp-content/themes/[theme]/images/favicon.ico
In Website, you can mention the favicon like below
<link rel="shortcut icon" href="/favicon-tenaya.ico"/>
and its working fine.
Where as in view source of chrome, they automattically find the favicon on below path
https://www.tenayalodge.com/favicon.ico
Favicon to be fetched from added favicon.ico after your website.
A very simple way:
put your favicon.ico file on the root of the website.
That should be accessed like: http://www.[domain].com/favicon.ico
I'm developing a Google Chrome extension where bookmarks are displayed on the newtab page. Everything works fine so far except for the favicons.
Entering this URL in Chrome displays the favicon of a page:
chrome://favicon/https://stackoverflow.com/
However, in the newtab, which I properly set up, they don't get displayed.
The HTML is very simple, though:
<img src="chrome://favicon/https://stackoverflow.com/" />
I don't think it's anywhere in the docs, but accessing chrome://favicon/ needs a special permission "chrome://favicon/" in the manifest.
Do note:
This may change in the future.
chrome://favicon is not entirely reliable.
Maybe a stupid question, but for the life of me I can't find a reference to the favicon "ico" file on this website:
http://www.fitnessutah.com/
They obviously have one because it displays in the browser tab/window. I've tried Chrome developer tools, Network tab which shows all images on a page -- but no favicon there either. Where is it hiding?
It does seem to be being pulled in differently, but it is typically always in the default location - which this one is as well.
http://www.fitnessutah.com/favicon.ico
There are two ways to specify the favicon for a website:
1) Give a link to the favicon
<link rel="icon" type="image/png" href="/somepath/favicon.png" />
2) Put it in a prefefined URL, this is relative to the server root. So in this case will be http://www.fitnessutah.com/favicon.ico
This website seems to be using the second method so you will find the favicon in that link.
You do not need to add a link element with your favicon image for it to appear on your website.
Quote:
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root.
Source:
http://www.w3.org/2005/10/howto-favicon
Further to Keir's and Carlos' answers - to spell it out - most browsers are programmed to also look for a favicon here:
http://yourwebsitename.com/favicon.ico
If the favicon image is named/stored as above, there is no need to mention it in the HTML code.
Therefore, if you are looking at a website and you can't find any reference to their favicon in the HTML source, just type the website's base URL in the browser address bar followed by /favicon.ico:
http://example.com/favicon.ico
Real-life example - try to find the favicon in the source code:
http://www.fuelly.com/favicon.ico
Use Chrome Dev Tools Network tab.
Filter by favicon
reload the page with Shift+F5
You will get the icon regardless it was loaded with link or from default location
Ok.
So I know this is probably a stupid question, but I've been traversing SO and Google for the last many hours for an answer and found nothing.
I'm currently creating a HTML5 mobile app using JQM 1.2.0 and Google Maps js V3 - just to set the context.
My problem occurs when I try to test the page in FF 18 desktop version. In every other browser, be it mobile or desktop, I'm not having any problems. Also, I have tried on both localhost as well as the server I'm deploying to, and it's the same result.
In my HTML file I have a relative link to css and js files:
<script src="js/general.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mobile.css"/>
while my links to JQM etc. are absolute as I use a CDN:
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
When I use Firebug, I can see that the files with a absolute path are loaded fine, while the relative path links are ignored - or at least I think so, as nothing shows up in neither the Console or the Net pane.
When I check the Html pane in Firebug, it appears as if it has included a tag pr default (with the correct URL), but not if I try to view page source using the regular FF methods. Even though, I have tried to include a explicit base tag to my header and it changes nothing.
So, to sum up: relative path works fine in all browsers except FF, it it happens on both my server and localhost.
Update:
Tried moving the files to the root dir, but it didn't help.
Also, when trying to view the content of the js or css file in Firebug (pressing the arrow to the left of the tag in index.html), it just says:
Reload the page to get source for: http://localhost/~u040800/app/general.js
which, of course does not change after reload.
Nevermind - stupid mistake on my side!!
Note to self: when developing, do make sure that your add-ons are disabled before asking SO! otherwise, you make a complete ass of yourself!!
Yes, it is correct - I forgot to disable Ad-Blocker...
#robertc: Sorry to have wasted your time.