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!!
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 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.
<!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 want to build vue-cli 3 to my computer. I've created my first folder with vue-cli control panel than I faced with a blank page. In my index.html, I've discovered <strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> error. How to fix that and create a working properly folder instead?
<!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-test</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-test 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>
I have a source code use manifest. When i run code in chorme it work. But when i run in ie 10 AppCache Fatal Error.
Code html:
<html manifest="demo.manifest">
<head>
<meta charset="utf-8" />
<meta http-equiv="EXPIRES" content="0" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
</head>
<body>
<script src="js/jquery.min.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="imgs/img_logo.gif" width="336" height="69"></p>
<p>Try opening this page, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
And code manifest file:
CACHE MANIFEST
js/demo_time.js
imgs/img_logo.gif
Some body help me. Thank you for support.