How to Set Favicon.Ico Properly on Vue.Js Webpack Project

How to set favicon.ico properly on vue.js webpack project?

Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html

Note that there is a static folder, along with node_modules, src, etc.

If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png

Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html

For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.

As a side note, here is the reason why I prefer PNG instead of ICO file:

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

How to change favicon.ico and page title (Vue + Webpack)?

I fixed this by creating a public folder to the project root. Then I moved my index.html and favicon into the public folder.

//This is in the index.html head
<link rel="icon" type="image/png" href="/favicon.png" />

Favicon not showing up in VueJS

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

Vue index.html favicon issue

Inside the vue.config.js set the PWA options for the icons to point to whatever icons you want. Specifically, set pwa.iconPaths for example:

module.exports = {
  pwa: {
    iconPaths: {
       favicon32: 'img/icons/myFavicon.png',
    }
  }
}

See

https://cli.vuejs.org/config/#pwa
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

Why is the link to favicon element commented out on build?

Its a fallback when you are visiting the website in Internet Explorer below version 11

Internet Explorer <11 doesn't support .png images to be used as favicons, but only .ico files. Support for .png and .gif files only became supported from version 11 and onwards.

Sample Image

So thats why it has the if statement around it, the corresponding element will only be parsed when the browser is IE <11

Note that the  is only recognized by Internet Explorer 10 and versions below IE 10

https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN

How to Set Favicon.Ico Properly on Vue.Js Webpack Project