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

Question

I have created a vue webpack project using vue-cli.

vue init webpack myproject

And then ran the project under

Answer 1

For some reason, the above solutions did not work for me before converting the default favicon.ico file to favicon.png and renaming it to favicon-xyz.png e.g. (I have put this file in /public folder) and edited the index.html file as follows:

    
    
    
    .
    .
    .

Might be useful for someone.