Creating Favicons with Nuxt

There is a neat little website called Real Favicon Generator. You can upload a square image and this tool will create all the favicons and app icons for all the different devices and sizes.

That is the manual way of doing it though. I am happy to tell you that there is a community module for nuxt that can automate this. Check it out!

I have used it on Web Developer's Journal too and it's awesome.

Installation

npm i nuxt-rfg-icon

The instructions are not clear whether you need @nuxtjs/manifest so I have installed that one too.

npm i @nuxtjs/manifest

Prepare an Image

I prepared an svg file as my icon since that is lossless. I have placed it in the /static/ folder because I don't want webpack to optimize it. And that would happen if I placed it in /assets/.

Edit the Nuxt Config

I then edited the nuxt.config.js:

// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
  // https://go.nuxtjs.dev/axios
  "@nuxtjs/axios",
  // https://go.nuxtjs.dev/content
  "@nuxt/content",
  ["nuxt-rfg-icon", { masterPicture: "static/wdj-icon.svg" }],
  "@nuxtjs/manifest",

Run generate

During generate, the module will reach out to RFG, get all the icons and places it in /dist/icons/ along with a browserconfig.xml and manifest.json file. It will also add it to every page.