I currently don't have a favicon for my Vue app and want to remove the default one. I commented out the relevant line in the public/index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
<title>My Vue app</title>
</head>
<!-- ... body code ... -->
</html>
and run npm run serve. The page still renders the initial favicon. How can I remove it?
Generally when this happens it's one of two things
Most browsers will check for a file called favicon.ico in the root folder and use it even if you don't include it in your head tag.
If the file has been deleted but you had previously opened the website then it's likely just cached in your browser. You can easily check by opening the site in incognito/private browsing mode. Clearing your browser cache for the website will remove it.
Actually, after trying to change my favicon and failed, I added this line after inspecting vuejs <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.png">, whereby, this time, favicon.png was targeting my own image.
Related
I'm having a big trouble with this proyect generated with the latest version of Vue CLI up to this date. The favicon does not show up, I've deleted previously the /img folder in the public folder, and added my own favicon.png to the index.html file.
When i run the proyect the icon does not show up and checking the client side code, it automatically gets commented as shown in the image.
If I modify the commented line, my custom icon appears correctly, so I want to know how to fix this.
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.png">
<title> myApp </title>
</head>
<body>
<noscript>
<strong>We're sorry but myApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Also as you can see in the code, I've erased the <%= htmlWebpackPlugin.options.title %> that generates initially because it's useless for me.
Big thanks for anyone who can help me!
I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!
I have a Vuejs app that I'm trying to serve via a Golang backend that will also serve the app's API.
When I build and run the Vuejs via "npm run build" and "serve -s dist" and go to the static server's location, everything loads up fine. But when I try to load it through the Golang backend, even though the index.html loads (as verified by checking the source in the browser), I just get a blank white page.
Is this approach not possible? Am I going about this all wrong?
Here is how I am serving the "dist" folder via Golang.
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(htmlFolder+"/dist/"))))
My index.html file:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>TestApp</title>
<link href=/css/app.52c62e82.css rel=preload as=style>
<link href=/css/chunk-vendors.7724753e.css rel=preload as=style>
<link href=/js/app.9a3ab992.js rel=preload as=script>
<link href=/js/chunk-vendors.6808fe3a.js rel=preload as=script>
<link href=/css/chunk-vendors.7724753e.css rel=stylesheet>
<link href=/css/app.52c62e82.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but TestApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6808fe3a.js></script>
<script src=/js/app.9a3ab992.js></script>
</body>
</html>
Edit:
I also tried using gorilla/mux example here:
https://blog.questionable.services/article/vue-react-ember-server-golang/
And here is my "dist"'s folder structure.
press F12 on your browser and go to console tab to view the error
Turns out I just needed to empty my caches. I was using FN5 when refreshing assuming that that would reload it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This is the code of my index.html file in the public folder.
There is also an icon file named favicon.ico.
But when I run my dev server, the favicon is not showed.
Please help me.
I have tried to change
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
to
<link rel="icon" href="/favicon.ico">
but it's not working either.
and when i type localhost:8080/favicon.ico, it is showing my favicon.
Also, there are correct HTML tags when I debug on chrome dev tool.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
Expected result: favicon should be shown.
I have a same problem.. but I success to fix this, when I switch the double quote to simple quote in the attribute rel, but I don't know why..
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
replace with:
<link rel='icon' href="<%= BASE_URL %>favicon.ico">
If you're using PWA, check your public/img/icons folder too. And make sure that your favicon-16x16.png and favicon-32x32.png files are not the default ones.
And also best way to force cache is to hit the favicon address directly
http://yourwebsite.com/favicon.ico
and press control+f5 for windows/linux or shift+command+R for Mac. You will see it changes. Then navigate back to your webpage and it will be refreshed.
I had this issue and it seemed that Chrome was caching the favicon (was working on multiple projects at once).
So a clear of the cache and closing the browser tab and restart is what worked for me
In my case, I had also created the project as a PWA, hence I also needed to change all the relevant icons
I also had this issue on a PWA project but clearing my cache fixed it.
I am using Safari Version 12.0.2 (13606.3.4.1.4) and I have very simple page like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
</head>
<body>
Hello There
</body>
</html>
This shows when I reload the page the asset is loading from the cache which is expected.
Changing the Script tag to a URL which redirects to this asset because there are different variations of this script and based on the context right script will be loaded. So when I change script tag from
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
To this
<script src="https://pvpsx9qpxa.execute-api.us-west-1.amazonaws.com/PROD/getAsset?marketplace=US&assetName=bundle.js"></script>
Which points to the same asset, now when I reload the page every time, the whole asset is getting loaded and it's not hitting the cache at all, Mobile Safari has the exact same issue.
In chrome and FF it works the right way and shows the redirect as well, what to do for Safari as it's a big asset and can't be freshly loaded every time.
Chrome results,