Будем использовать рекомендации из этой статьи по добавлению favicon в современных форматах.
За основу возьмем HelloWorld проект. Полная версия примера размещена в этом репозитории.
При генерации сайта VuePress берет файлы из каталога docs\.vuepress\public. Там мы и будем размещать файлы иконок. Нам нужно 4 файла, разместим их следующим образом:
- Прямо в каталоге
publicпоместимfavicon.icoразмером32x32. - В каталоге
public\assets\faviconsразместимfavicon.svgmask-icon.svg(Монохромное изображение)apple-touch-icon.pngразмером180x180google-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"}] ] } |
Проверяем работу на сайте:
