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
Related
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 am working on a site using the one of the twitter bootstrap templates and my JavaScript console is complaining that it is missing:
favicon.ico
ie-emulation-modes-warning.js
I downloaded all of the Bootstrap files from the Bootstrap website. What are these files and do I need them?
If so, where can I get them?
Edit: Thanks guys! Looked into Favicons and didn't realize that is what they are! So simple! lol
By default, browsers look for favicons in your site's root directory. You can use favicon generators online, which (by standard) create 16x16 pixel png-like objects that are used as your site's icon on a browser tab, etc. Just make one of those and drop it in your root directory.
If that doesn't work, you may want to use your inspector (assuming you're using chrome), right click > inspect element > console (or network), and look there to see where your template is looking for the favicon. Just drop the generated .ico file in that folder.
For the JS file, you may be able to find it online, download it, use the inspector again, and drop it wherever your browser is looking for it. This is good for performance—missing files slow roundtrip requests down.
It's something browsers look for by default. Nothing to do with Bootstrap
http://en.wikipedia.org/wiki/Favicon
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.
I have noticed that HTML5 Boilerplate and dev websites like css-tricks.com use only apple-touch-icon as any reference to favicon, and that image is indeed displayed in a browser. I was not following this topic for a while and am confused to how this works. Is it safe to now only include a touch-icon and will it be displayed in various browsers?
A favicon.ico file is used by the browser automatically if it's in the root directly of your page/app.
If you want to add a favicon in a different format (e.g. png), of you want to add it from another source (e.g. a subdirectory like /img) or if you want to make the browser load a new version of the file (e.g. favicon.ico?v=2) you use the link tag.
More info here:
Necessary to add link tag for favicon.ico?
I created favicon.ico file and declared it in my HTML head tag:
<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
IE 8 and Opera handle it great but FireFox does not even try to load it (as I see from my Fiddler debug proxy). I've tried many different type (image/ico etc.) and href params but no luck.
What did I miss?
Like most things in the browser, favicons (or lack thereof) are common candidates for caching.
Try clearing your browser cache.
In Mozilla Firefox, the keyboard shortcut to "Reload (override cache)" is
Ctrl + F5 OR
Ctrl + Shift + R
Firefox has separate cache for favicon and this does not work properly. The favicon is not updated easily in firefox. This is a small issue but troubles many of us for long time.
The solution is to clear the favicon cache so that the favicon is update. There are many solutions you can find if you go through the internet or stackoverflow. Most of the solution imvolves deleteing the favicon cache manually or using some plugins. Some saying deleting the file from temp internet files. But there is one really simple and easy way to fix the problem.
Type in www.yoursite.com/favicon.ico (or www.yoursite.com/apple-touch-icon.png, etc.)
CTRL + F5 or CTRL + R
This will immediately update the favicon.
This solution was originally posted by 'alex' at this link:
How do I force a favicon refresh
That's strange, because I just copy/pasted your code to a blank document, opened with firefox and some random image I renamed to favicon.ico loaded up as the favicon.
Maybe try this?
http://help.godaddy.com/article/4145
My problem was that I had another favicon.ico in a web root directory.
If You have a favicon in template directory "/template/favicon.ico" and another one in "/favicon.ico" firefox will use the favicon from root direcory even though you've used a link for favicon in template folder. Solution is delete the favicon in root directory.
My current version of firefox is 58.0b6 (Quantum).
So just had an issue with favicons not showing in Firefox v70.0.1.
Now this will probably only be an issue for a very few people and most likely only if you have modified the about:config settings in FF
This issue for me was the setting privacy.resistfingerprinting was set to true on some sites this will block favicons.
The other issue I noticed and what lead me to find out what was causing the issue was using dropzone.js on a site I was creating the uploaded images had a blank preview. The previews are base64 encoded and were being blocked by this.
Like I said most likely wont be an issue for most but wanted to post this somewhere so it may help others that may be facing a similar issue as I did.
See more here: https://wiki.mozilla.org/Security/Fingerprinting
And Here: https://bugzilla.mozilla.org/show_bug.cgi?id=1452391
I am not much of a programmer but I had a similar problem and here is the simple thing that finally worked for me...
I admin several simple websites but Firefox refused to load the favicon of one in particular site. I looked online, tried everything I was able to understand. Nothing worked. The code was exactly the same (copied in fact) from the other websites whose icons worked well.
Eventually it dawned on me that maybe Firefox did not like the path I used to get there. This site was a forwarded URL being hosted on my own domain. (i.e. personal domain is myplace.ca and the favicon that would not load was part of registered URL something.com which was actually located at myplace.ca/PutItHere/) If I used the registered URL (something.com) no favicon. If I use the real path in the browser, suddenly favicon! All I had to do was bookmark the absolute path rather than the registered domain!
I also found, that if you reference the full URL path, you may need to reference the URL WITH www. in it, otherwise it may not load.
Here it's in 2017. Firefox didn't pick up my favicon called "favicon-32x32.png", while Chrome was showing. I changed the file name to "favicon.png", AND refreshed as folks showed above, it worked great. I'm using:
Firefox version 55.0
Chrome version 60.0