Добавляем favicon в VuePress

Будем использовать рекомендации из этой статьи по добавлению favicon в современных форматах.

За основу возьмем HelloWorld проект. Полная версия примера размещена в этом репозитории.

При генерации сайта VuePress берет файлы из каталога docs\.vuepress\public. Там мы и будем размещать файлы иконок. Нам нужно 4 файла, разместим их следующим образом:

Прямо в каталоге public поместим favicon.ico размером 32x32.
В каталоге public\assets\favicons разместим
- favicon.svg
- mask-icon.svg (Монохромное изображение)
- apple-touch-icon.png размером 180x180
- google-touch-icon.png размером 512x512

Затем добавим файл с манифестом public\manifest.json:

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "/VuePress/assets/favicons/google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

Обратите внимание на путь к изображению в src, если используется настройка VuePress base то её необходимо прописать здесь вручную.

Теперь пропишем теги в head, через config.js:

module.exports = {
  base: "/VuePress/",
  head: [
    ['meta', { name: "theme-color", content: "#ffffff"}],
    ['link', { rel: "icon", href: "/assets/favicons/favicon.svg"}],
    ['link', { rel: "mask-icon", href: "/assets/favicons/mask-icon.svg", color: "red"}],
    ['link', { rel: "apple-touch-icon", href: "/assets/favicons/apple-touch-icon.png"}],
    ['link', { rel: "manifest", href: "manifest.json"}]
  ]  
}

Проверяем работу на сайте:

favicon в VuePress