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

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

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

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

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

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

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

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

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

favicon в VuePress

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *