vue.jsfavicon

Favicon not showing up in VueJS


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.


Solution

  • 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!!