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

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

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

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

  • Прямо в каталоге public поместим favicon.ico размером 32x32.
  • В каталоге public\assets\favicons разместим

Затем добавим файл с манифестом 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"
}
1
2
3
4
5
6
7
8
9
10
11

Обратите внимание на путь к изображению в 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"}]
  ]  
}
1
2
3
4
5
6
7
8
9
10

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

favicon в VuePress

Последниее изменение: 03.04.2022, 12:50:42