I put favicon.ico in my app's root. I do not have any <link> tags in my html regarding favicon. My understanding is that by default, browsers (I'm using Chrome) will load and show favicon.ico if it is in the default folder. No luck.
I have also tried <link> tags in my html. I tried generating several files for multiple browser/device support, with <link> tags, as instructed here: https://realfavicongenerator.net/ (I put the <link> tags in my layout view.) No luck.
What am I missing?
Things you might want to check:
Browse your site with Chrome or Firefox and check the dev console: do you see 404 errors? (eg. your images are not in the right directory).
Browse your site with a browser you normally don't use. Favicon caching issue is a classic: your regular browser might not reload your new favicon immediately.
Run the checker. It might give you additional information (note : I'm the author of RealFaviconGenerator).
Related
I have used VSC with LiveServer for some years with only 1 problem, back a few years ago when either LiveServer or Windows10 had an update installed, next time I opened my HTML file in LiveServer, the HTML was rendered in a "basic" layout, and did not include my CSS Styles.
On an Internet search I found a solution for either this site or similar where I needed to add a line of code to either LS or Windows, sorry but I cant remember which. And all was well again until, now. The very same problem has returned, and no matter how much I search, I cant fine the solution.
There are plenty where there were errors in HTML or CSS, but this is occurring on files which haven't changed, and on new ones from the same master I use for my new pages. The screenshot included shows the HTML, LS as basic HTML and how the page loads on the browser directly. I am using Chrome, but have tried on Firefox with same results.
How LS displays and how it should be
You need to open your VS Code project from a directory that contains your HTML and CSS.
Your HTML document is in the root directory of your project (hence the URL being /filename) but you are trying to load CSS from ../../css/filename.
The project needs to be two directories higher for the webserver to include that path.
i am using favicon this code.
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
But favicon is automatically downloading in browser.
Please help us how can we resolve this issue..
My advice:
In the HTML declaration, use an absolute path (ie. /images/favicon.ico), to avoid any relative path issue.
Download the file manually (eg. download http://yourwebsite.com/images/favicon.ico) and open it with an image editor. This is to make sure that your web server really returns your favicon.ico file and not something else. When a file does not exist, some web servers are configured to return some content, such as a "Oops!" web page, instead of a plain 404 error. This can trick the browser.
When opening your page, enable your favorite web debuging tool (Firefox+Firebug, Chrome console...), select the Network tab to look at the HTTP exchanges and spot the access to favicon.ico. Check the Mime type: it should be image/x-icon (or maybe something similar). If you see something really suspicious, such as application/octet-stream, there must be something wrong on the server side.
I need to put favicon.ico outside the root of the web site.
Can i place it in another path or it may penalize some old browser?
If you put favicon.ico in another directory and declare it in the HTML (eg. <link rel="shortcut icon" href="/icon/favicon.ico">), the favicon will work, including on IE5, the first browser to support favicons. However, you will encounter the following (minor) drawbacks:
IE (and maybe some others) will look for /favicon.ico no matter what. Expect some 404 errors in your HTTP server logs.
Some browsers, like Chrome, will use favicon.ico even if you also declare high resolution PNG favicon pictures. Of course, if you only use favicon.ico as the favicon picture, this is not a concern.
In general, this is a good practice to put all favicon-related file in the root directory of the web site. See http://realfavicongenerator.net/faq#why_icons_in_root for more information (full disclosure: I am the author of this page).
Some browsers will always check for favicon.ico in the root folder. Won't break anything if absent, though.
I've got a repository on github with a .css file in it. Is there any way to have github serve this file in a way that I can consume it in a web page?
In other words, I'd like to be able to reference this source file at github directly, from an HTML file on my local computer or a live domain. Something like:
<link rel="stylesheet"
type="text/css"
href="http://github.com/foouser/barproject/master/xenu-is-my-lover.css"
/>
I've tried including a<link> to the "raw" source file (http://raw.github.com...), but github serves its Content-Type as text/plain, and consequently, Chrome and FF are not adding its content as CSS styles to the page—the file's data is being discarded and a warning is shown in the debugger consoles of the browsers.
Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/
Found something really cool. You get the raw link as: http://raw.github.com/...
Simply fetch the files from rawgit.com (or cdn.rawgit.com) instead of raw.github.com and DONE!
UPDATE:
You can also use raw.githack.com if you want to serves raw files directly from Bitbucket or GitLab
GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.
Check out https://gitcdn.link/ . Seems to work well.
Rawgit.com has shut down.
First Visit RawGit as suggested earlier
Next copy your file path from github into the RawGit box
RawGit will automatically produce two refrences to your web page
The Development and Production refrence
refrence the development link in your webpage if you are still developing
save/upload then reload your webpage
if there was no change it means your browser has saved your former refrence
clear your browser data then reload
Hope that helps?
You have to use RawGit which, is a part of MaxCDN, serve files directly from the GitHub repository with the correct content type header.
Full tutorial, click here
I keep seeing favicon warnings in my apache log. How do I get rid of those? Do I have to have a favicon for my site?
/favicon.ico is one of the artifacts of the Browser Dark Ages (cca 2000). While there is no way to prevent the browser requests, creating a 0-byte file named favicon.ico ends the flow of 404 errors (as the file exists), but no favicon will be shown by the browsers for your site.
Johan Petersson provides a good answer to preventing file not found errors without using a favicon at http://www.trilithium.com/johan/2005/02/no-favicon/
Placing the following code in the Virtual Host section of httpd.conf (or wherever you define your site environment), should stop the errors appearing in the Apache error log:
# Don't bother looking for favicon.ico
Redirect 404 /favicon.ico
# Don't bother sending the custom error page for favicon.ico
<Location /favicon.ico>
ErrorDocument 404 "No favicon
</Location>
Alternatively, you can create a blank file and name it favicon.ico, placing it in the root directory of the site.
You don't need to, no, but some browsers will request /favicon.ico automatically, so the errors are pretty much unavoidable.
You don't really need it, but as others have said, some browsers will ask for it even if it's not specified in <link rel="shortcut icon" />.
I'm not an expert, but I played with mod_rewrite a bit, and here's what you can do:
# turn on the mod_rewrite module
RewriteEngine On
# if requested file is not an existing file
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
# and it's name is favicon.ico, send an empty 410 GONE response to the browser
RewriteRule .*favicon\.ico$ - [G]
I only tried this on my localhost: first request resulted in 410, but for all following ones, browser does not ask for that file, because it remembers it's gone.
I'm not sure this is how you're supposed to use 410 GONE status, nor that it will work 100%.
Webbrowsers use this to display the image you see in your favorites as well as the icon of your tab. e.g. when you go to stackoverflow the cool icon you see in the tab as shown : is automatically fetched by my browser (chrome) using the url : https://stackoverflow.com/favicon.ico . Its pretty standard so in case you don't want it in your log you should put some icon and rename it as favicon.ico in the httpdocs.
Looking at your logs, you will probably see such 404 errors:
favicon.ico: Internet Explorer, Chrome...
apple-touch-icon.png: iOS devices, Android, maybe some other devices
apple-touch-icon-precomposed.png: iOS devices, Android, maybe some other devices
apple-touch-icon-76x76.png: iOS, maybe some other devices
apple-touch-icon-120x120.png: iOS, maybe some other devices
apple-touch-icon-152x152.png: iOS, maybe some other devices
If you absolutely don't want to add a favicon to your site, you can apply one the the solution described in the other answers:
mod_rewrite
Force 404
Empty picture
However, favicon are so common nowadays that you probably want to add one to your site. This favicon generator creates all these files at once. Full disclosure: I am the creator of this site.
Not really need it.
However it is used on your site (the warnings).
Check the source of your website to see if it contains:
<link rel="shortcut icon" href="favicon.ico">
In the head section of the page.
Remove that line or add the favicon to prevent erros in your log.