Menu
I am new to nuxt and trying to change default favicon in my project.
I changed the favicon.png and favicon.ico in my static folder. => didn't work.
changed the favicon.png and favicon.ico in my dist folder. => didn't work.
replaced the proper files generated by favicon generator websites in my dist/_nuxt/icons folder. => didn't work.
and this is my nuxt.config.js
head: {
title: "my first nuxt proj - main page",
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
},
am I missing something?
829
Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.
The Nuxt. js PWA module registers a service worker for you to deal with offline caching. It automatically generates a manifest.json file. It automatically adds SEO friendly meta data with manifest integration. It automatically generates app icons with different sizes.
nuxt generate - Build the application (if needed), generate every route as a HTML file and statically export to dist/ directory (used for static hosting). nuxt start - serve the dist/ directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying.
I found the solution, but it's kind of tricky and it's a little far from logic.
the size of the favicon should be 32*32 pixels or nuxt will load the default favicon itself.
and about my tries, it's enough to have a file in your static folder and give the path to nuxt.config.js.
but I'm still confused with the solution.
68
Have you tried replace type: 'image/x-icon' with type: 'image/png'?
The infos about this attribute and tag generally can be read here
nuxt will convert object like { head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] }} to
<head>
<link rel='icon' type='image/png' href='/favicon.png'>
</head>
So you can use any attributes listed in the article above.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
