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

2
votes

I have created my project with vue-cli, running 'vue init webpack project-name'. I cannot figure out how to change the page title and the favicon displayed.

Somehow the page title is always 'Vue App' and favicon is the Vue logo. How do I change these? They seems to be generated from somewhere in the webpack config, but I cannot figure out where.

2
vue.jswebpack
Look into public/index.html – ljubadr
Ah, per Project Structure, index.html should be in the root folder – ljubadr
I've tried to change the title inside index.html to <title>My App Name</title>, but this is not being used. Somewhere in the configs 'Vue App' title is generated. – Oskar Gusgård
Change title and restart dev server – ljubadr
I changed the title in index.html and ran 'npm run build' to locally run the server. Still shows the 'Vue App' title – Oskar Gusgård

2 Answers

3
votes

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" />
0
votes

If you're using vue-cli, this is the only way I could find to get the page title to not unprofessionaly flash "Vue App" on load. If someone finds an easier solution, please share!

Create custom-index.html with your own title, then in vue.config.js:

const HTMLWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
  new HTMLWebpackPlugin({
      showErrors: true,
      cache: true,
      template: path.resolve(__dirname, 'src/custom-index.html'),
  })
],