Html favicon not showing up - html

My localhost web page hadn't show favicon, and also not found in Network request:
The webpack-dev-server host the web page including index.html, favicon and other files:
The favicon.ico can be accessed from http://localhost:8080/favicon.ico in browser.

It's cache problem. I configured other port in webpack devServer and works.
Thanks #Hardik's

check webpack setting for icon
{
test: /\.(ico)$/,
use: 'file-loader?name=assets/[name].[ext]'
}

Related

bundle.js not loaded successfully in static html files but refer to

I have a static index.html in wwwroot of an asp.net core web project which useStaticFiles:
<html>
...
<body>
...
<script src="~/scripts/bundle.js"></script>
</body>
</html>
After web application published. the bundle.js could not load successfully, after F12 in Chrome and found browser trying to load js by url:
https://127.0.0.1:5001/~/scripts/bundle.js
Please help a clue. thanks!
By the way, the web application run fluently without such errors locally.
It's actually an Nginx configuration issue. https://www.***.com/subpath1/test.html.
nginx proxied subpath1 to local port 5588 where test.html hosted in.
In test.html <script src="bundle.js"> didn't refer to
https://www.***.com/subpath1/bundle.js as expected but https://www.***.com/bundle.js
So update test.html src attribute src="subpath1/bundle.js" solved the problem.
Thanks all~

Chrome does not find manifest.json file in the root of public pwa folder built with Quasar

I have built a pwa application using the Quasar framework. It puts all the necessary files in the dist/pwa folder including a manifest.json file.
However, Chrome's dev tools does not list this file in the sources tab. The actual web page shows up correctly in the browser. It just doesn't detect the manifest file for some reason.
I have this in the head tag of index.html
<link rel="manifest" href="/manifest.json">
This is the screenshot of the sources tab:
I expect the manifest.json file to show up under the sources of Chrome's dev tools and under Application it says "No Manifest Detected".
Any help would be much appreciated.
This was because of an error in the HTML file. I had some mismatching tags that. Just make sure your HTML file is valid and rule out the obvious first!
I don't see the manifest in the root directory from the first picture, You sure it's getting loaded? is your webapp is (https://example.xyz), the manifest should be at (https://example.xyz/manifest.json)
and for caution use <link rel="manifest" href="./manifest.json">

Local css file loads, direct address fails

Here is the HTML I am having problems with:
<link rel="stylesheet" href="http://resources.8thdaystudio.com/neonlights.css" type="text/css" />
I have a copy of the css file in my page's local folder, and when I put neonlights.css in the href, it works. I have a copy in my resources server to use from any of my pages, but it's not applying the css when I do the direct link. Using inspect in Chrome it's not showing me an error loading the file but still not applying the css.
it is observed that the url:
http://71.57.185.233:82/neonlights.css loads as text/css
but http://resources.8thdaystudio.com/neonlights.css loads as text/html.
It's due to your server's configuration as you indicated. I have verified this in Fiddler.
Through some reading about MIME types I figured out that the likely problem is my server. I'm running Servers Ultimate Pro on an Android device and I believe it's sending the file with the incorrect type.

Favicon showing when testing file but not when hosted

I am having issues trying to get the favicon to show for my site http://www.internhacks.io/.
When testing the file in Chrome, I am able to see it, and have the following in my <head> tag
<link rel="icon" href="assets/img/favicon-#2x.png">
The project can be found here on Github.
The file structure is:
-README.md
-favicon.ico
-index.html
-assets
I am currently hosting the site with Namecheap and see no way to serve a favicon from there.
If anyone has experienced this before when hosting with Namecheap, or sees the issue, please let me know!
I just visited http://www.internhacks.io/assets/img/favicon-#2x.png and I get the whole index.html page back. You may want to check your .htaccess rules for rewrites, to make sure that when requesting files, they can be received.

Bootstrap glyphicons with virtual host

I am trying to make glyphicons work with my local project!
i have created a virtual host called backend.mvc
now when ever i try to use glyphicons i get the following error:
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.woff"
glyphi...ar.woff
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.ttf"
however the path exists execpt from the http:// so my question is how can avoid this and make the glyphicons work?
edit
Ive added the following to my head:
<link type="application/font-woff">
<link type="application/vnd.ms-fontobject">
<link type="application/x-font-ttf">
<link type="font/opentype">
However this did nothing :(
Update
Using apache
Also please note that this is for web and NOT mobile!
If you're absolutely sure that they're not in the incorrect place, then the most common cause I come across for problems like this when it comes to serving web-fonts is that the server isn't configured to serve the correct mime-type for the files.
According to HTML5 boilerplate these are the mime-types that you should be using when serving web fonts:
woff: application/font-woff
eot: application/vnd.ms-fontobject
ttf & ttc: application/x-font-ttf
otf: font/opentype
The fonts directory should be in the same dir as the css directory by default, not in the css subdirectory
Also check your paths in the bootstrap.css