Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to add favicon

See original GitHub issue

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:

Issue Analytics

State:
Created 4 years ago
Comments:8

Top GitHub Comments

25reactions

Sandstedtcommented, Jun 15, 2019

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"}],
  ],
  ...
}

7reactions

xgqfrmscommented, Feb 3, 2021

official way

according to the official docs, you can create a public folder, and put your favicon.ico in it, that all.

demo

refs

https://vuepress.vuejs.org/guide/assets.html#public-files

Top Results From Across the Web

How To Add a Favicon in HTML - W3Schools

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder...

How To Add a Favicon to Your Website with HTML

To add a favicon to your site, create a folder in your project directory called images (if you don't already have one) and...

How to Add a Favicon to Your Website - Hostinger

Once you've got a square dimensioned image as your logo, head over to File Manager -> Go To File Manager -> public_html. ·...

How to Add a Favicon to your Site - QA @ W3C

To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to...

How to set-up a favicon? - Stack Overflow

You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get ...