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.