How to set favicon in NuxtJS

A favicon is a small icon or collection of icons associated with a website, web page, or web application. It’s displayed within the browser tabs and bookmarks bar.

Let's setup favicon more perfectly.

Make your favicon resources

You don't have your favicon yet? Don't warry. You can generate your favicon using favicon generator service.

I like favicon.io web service to generate my favicon too.

You can generate using image, text, or emoji. After that download your zipped favicon file to your computer.

Add favicon resources to your project folder

Extract all files and add to /static folder. NuxtJS provides favicon.ico file by default, so it will be overwritten.

Your favicon resources will be positioned like bellow:

Set your favicon resources in nuxt.config.js

Add more favicon resources information to your head.

export default {
  head: {
    ...
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'icon', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'manifest', href: '/site.webmanifest' }
    ],
    ...
  }
}