Vuepress: How to add favicon

[ankit20893]

• [ ] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

• [ ] My VuePress version is lower and euqal than 1.0.0-alpha.47:

  • VuePress version:
  • OS:
  • Node.js version:
  • Browser version:
  • Is this a global or local install?
  • Which package manager did you use for the install?
  • Does this issue occur when all plugins are disabled?

• [ ] My VuePress version is higher than 1.0.0-alpha.47, the following is the output of npx vuepress info in my VuePress project:

[florimondmanca]

VuePress serves everything in the .vuepress/public directory at the root (see Public Files). Browsers automatically request /favicon.ico to get the site's favicon, so you can place your favicon.ico file there and it should work as expected (it works for me, at least). :+1:

If you need to generate the favicon file, take a look at Favicon Generator.

[Sandstedt]

you can also add them in the .vuepress/config.js file like so:

module.exports = {
  title: 'Title of the site',
  description: 'Description of the site',
  head: [
    ['link', { rel: "apple-touch-icon", sizes: "180x180", href: "/assets/favicons/apple-touch-icon.png"}],
    ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/favicons/favicon-32x32.png"}],
    ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/favicons/favicon-16x16.png"}],
    ['link', { rel: "manifest", href: "/assets/favicons/site.webmanifest"}],
    ['link', { rel: "mask-icon", href: "/assets/favicons/safari-pinned-tab.svg", color: "#3a0839"}],
    ['link', { rel: "shortcut icon", href: "/assets/favicons/favicon.ico"}],
    ['meta', { name: "msapplication-TileColor", content: "#3a0839"}],
    ['meta', { name: "msapplication-config", content: "/assets/favicons/browserconfig.xml"}],
    ['meta', { name: "theme-color", content: "#ffffff"}],
  ],
  ...
}

[florimondmanca]

^ Oh yes that's actually a required change to include favicons in other formats than favicon.ico. Nice one!

[kaceo]

When I put a "head" configuration inside the project's .vuepress/config.js, that works in the final site build.

But when I do the same configuration changes to a custom theme's index.js, and makes use of that custom theme in a project, the favicon lines are not applied into the build.

Any idea why?

[mesqueeb]

Is this the official method to add favicons to VuePress ?

you can also add them in the .vuepress/config.js file like so:

module.exports = {
  title: 'Title of the site',
  description: 'Description of the site',
  head: [
    ['link', { rel: "apple-touch-icon", sizes: "180x180", href: "/assets/favicons/apple-touch-icon.png"}],
    ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/favicons/favicon-32x32.png"}],
    ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/favicons/favicon-16x16.png"}],
    ['link', { rel: "manifest", href: "/assets/favicons/site.webmanifest"}],
    ['link', { rel: "mask-icon", href: "/assets/favicons/safari-pinned-tab.svg", color: "#3a0839"}],
    ['link', { rel: "shortcut icon", href: "/assets/favicons/favicon.ico"}],
    ['meta', { name: "msapplication-TileColor", content: "#3a0839"}],
    ['meta', { name: "msapplication-config", content: "/assets/favicons/browserconfig.xml"}],
    ['meta', { name: "theme-color", content: "#ffffff"}],
  ],
  ...
}