How to set favicon in NuxtJS

Category:
Author: zemna
Date: April 18, 2021
Share this:

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:

Favicon resources in static folder

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' }
    ],
    ...
  }
}
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram