Vuepress 1.x: Add Favicon (Head)

May 21, 2019

Edit docs/.vuepress/config.js.

  head: [    ['link', { rel: 'icon', href: '/favicon.ico' }]  ],

NOTE: head.

A more complete example based on Generate Favicon for Website (manifest.json, browserconfig.xml, apple-touch-icon, etc.).

module.exports = {  head: [    ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }],    ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }],    ['link', { rel: 'mask-icon', color: '#5bbad5', href: '/safari-pinned-tab.svg' }],    ['link', { rel: 'manifest', href: '/manifest.json' }]  ],

Store the files at docs/.vuepress/public.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.