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 dev mode:

npm run dev

I got this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

So inside webpack, how to import the favicon.ico correctly?

Have you tried just dropping it into the root of the site? :) Or in the public build folder? — Benjamin, Oct 22 '16 at 10:32

score 180 · Accepted Answer · edited May 23 '17 at 12:02

180

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?

edited May 23 '17 at 12:02

Community

1
1

answered Oct 22 '16 at 11:33

Mani

23,635
6
67
54

1

what if I want to keep my favicon in src/assets? is it best to leave it in static folder along with .gitkeep? – Akin Hwan Mar 17 '18 at 17:03
4

@AkinHwan I haven't attempted this yet, but if you keep any image in src/assets, it will be treated as a module dependency and will go into the final build file as an inline image (base64 format). This will unnecessarily increase the build size. Nothing to worry, it will not affect the performance in any way. It is my preference to keep images as "real static assets" as explained in [the docs](https://vuejs-templates.github.io/webpack/static.html). Your preferences may vary. You need to try both methods and choose the one that works for you. – Mani Mar 20 '18 at 03:35
21

This answer seems a bit out of date. In the current vue webpack template, there's a **public** directory, not a **static** directory. – JakeParis Jul 26 '19 at 19:29
@JakeParis also, using "shortcut" in the link rel is only used for internet explorer. – Caine Nielsen Nov 10 '20 at 22:39
This is working for routing but for direct link it is not worked – Nazmul81 Jan 15 '23 at 04:56

score 23 · Answer 2 · answered Apr 10 '20 at 17:14

23

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:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Might be useful for someone.

answered Apr 10 '20 at 17:14

tjurkan

477
5
11

It works for me nicely. Just needed to put my custom "favicon" icon into the "/public" folder after removing original one. – Sabbir Sobhani Jan 29 '21 at 14:49
This works oddly well – MK. Jan 18 '22 at 18:59

eightball · Answer 3 · 2022-04-12T12:31:20.540

13

Little update for Laravel 5/6/7/8/9, place your favicon.ico or favicon.png into the /public folder and refer to it in your index.html like this:

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

Hope it helps !

edited Apr 12 '22 at 12:31

answered Sep 03 '19 at 12:58

eightball

970
8
17

score 7 · Answer 4 · answered Apr 12 '22 at 02:14

As of 2022, @Mani answer is a little outdated as static assets are now served in public folder other than static.

Just generate a .ico favicon file (this site provides free online favicon generation), rename it to favicon.ico and place it in public folder, no need to change index.html, reload and new favicon will be displayed.

score 1 · Answer 5 · answered Oct 04 '22 at 13:49

1

You may use vue-pwa-asset-generator in order to generate a full set of favicons foreach platform.

answered Oct 04 '22 at 13:49

Ata Iravani

2,146
7
29
40

Geister · Answer 6 · 2022-12-13T12:25:03.587

1

Just add shortcut in rel tag like that :

<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">

edited Dec 13 '22 at 12:25

answered Dec 13 '22 at 12:22

Geister

46
4

score 0 · Answer 7 · edited Aug 23 '22 at 06:14

0

Thanks. This did the trick as per eightballs comments. I needed to move the file to the /public folder and rename it :D

<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="<%= BASE_URL %>gear.png">
    <title>Prodigy</title>
</head>

edited Aug 23 '22 at 06:14

Aurore

696
4
16

answered Aug 17 '22 at 08:42

Jesse Hughes

1
2

Please don't add "thank you" as an answer. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](https://stackoverflow.com/help/privileges/vote-up) that you found helpful. - [From Review](/review/late-answers/32504707) – treckstar Aug 23 '22 at 00:06

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

7 Answers7

Linked