about uscontact

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.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu