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
Related
I have added a minifed css to my website for better speed and performance. However, When i look into the browsers developer tools, the css sources for any elements are coming from nomal theme.css file, instead of theme.min.css.
I dont know wheather my minified css files is being used or not? Anyone please guide.
Also, I have theme.min.css.map file. When its being used?
If you see the minified CSS file path in your tags, it's being used. If Chrome developer tools show the original file in italic, it's being referenced by the map. Like this:
Image taken from: Why does Chrome devtools show these folders in orange and in italics?
Did you give the correct file name? it should be theme.min.css instead of theme.css
Double confirm you have given the right file name ,you might have not or
It might be that the content are loaded from cache clear your cache or try with hard refresh pressing Ctrl+f5 if you are in Mozilla firefox browser.
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 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?
Any idea why this isn't working?
<link rel="icon" type="image/png" href="Favicon.png"/>
It's just not showing up. I used the exact same setup on a local practice website, and it worked fine (it was using the same picture as well). Are you supposed to just put the picture onto your website server and reference it like I did? Or is there something I don't know about?
Also, how exactly do you get a favicon to show up on IE? Yes, I've researched this, and all the methods I've found just don't work...
You can just put the icon [favicon.ico] in the root directory of your website. That's what I did.
Oh yeah, to answer the question, it could be because it is a png ;)
There is a PNG to ICO file converter online, so that's what I used to get around the IE issue. www.convertico.com
*If you test this locally, it might not show up. My local pages don't show a favicon.
Yes, you should upload the file to your web server. The reason why this works locally for you is because it is in the same file as your html document. There are two things you do to get your favicon working:
Upload the file to the same folder as in your html document. If you have a web host, such as altervista.org, you could upload your favicon to the website.
Upload your favicon to an image uploading website. You could use google drive for all it's worth, anything website that can publicly display your photos is fine. If you upload this to a server, you can find the link to your image and reference that favicon in your link tag.
Hopefully this helps!
I faced to the same problem.After checking my whole code for hours , finally I figured out the problem.I used base tag , it caused the favicon icon to do not be displayed.When I removed , the problem was solved.So, I recommend you to remove base tag if you have used in your website.
I hope it could help!
I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)