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

by

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="https://stackoverflow.com/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?

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. How to add a browser tab icon (favicon) for a website?
  3. Adding a favicon to a static HTML page
  4. Favicon not showing up in Google Chrome [duplicate]
  5. What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]
  6. Creating a favicon [closed]
  7. How to animate a favicon?
  8. What is the best practice for creating a favicon on a web site? [closed]
  9. Do you have to include ?
  10. local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
  11. HTML Favicon.ico won’t show on Google Chrome
  12. HTML 5 Favicon – Support?
  13. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  14. VueJS/browser caching production builds
  15. Favicon: .ico or .png / correct tags? [duplicate]
  16. HTML Title Image
  17. Which versions of IE support PNG favicons?
  18. How to bind img src to data in Vue
  19. How to correctly use “scoped” styles in VueJS single file components?
  20. How to remove the arrow from a select element in Firefox
  21. Alternative to iFrames with HTML5
  22. How to disable Google translate from HTML in Chrome
  23. HTML5 drag and drop file upload to Java Servlet
  24. Audio capturing with HTML5 [closed]
  25. How to show multiline text in a table cell
  26. How to make type=”number” to positive numbers only
  27. Line height issue with inline-block elements
  28. Avoiding repeated constants in CSS
  29. HTML5: camera access
  30. How to get the text from the HTML5 input field error message in Selenium?

Leave a Comment