Posts Learn Components Snippets Categories Tags About
/

How to add Favicon in Nuxt Js

Make your Nuxt Js application looks good by adding a favicon that shows your branding.

8 months ago

5 mins read

264 views

Favicon serves as branding for a website and it's certainly important to have it display on every site. In this post, you'll learn how to add/update the existing Nuxt Js that's been shipped by default.

Favicon type


A favicon can be in any image format but it's recommended that the file would be in a ".ico" or ".png". There are several ways to generate it and the recommended file size would be 16 x 16 or 32 x 32. The bigger the dimension the sharper it will get.

Nuxt Config


To add/change the favicon on a Nuxt Js application, we have to define it on the configuration file which is on config.nuxt.js. The full configuration can be found below and the important part is that it should be under the head property.
const config = {}

config.head = {
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon.png' }
  ],
}
The code above is to define a new link tag that will reference the favicon file which is located in the "static" directory.

If the favicon is in ".ico" format then the type should be as following. 
const config = {}

config.head = {
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ],
}

View in Browser


Once it's defined run "yarn dev" and view the browser tab

Other Reads

Load comments for How to add Favicon in Nuxt Js

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components