Будем использовать рекомендации из этой статьи по добавлению 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
:
1 2 3 4 5 6 7 8 9 10 11 |
{ "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
:
1 2 3 4 5 6 7 8 9 10 |
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"}] ] } |
Проверяем работу на сайте: