Emoji Favicon for Vue
Wire an emoji favicon into Vue 3 (Vite), Vue 2, or Nuxt 3 in one minute.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Vue
Vue 3 + Vite: edit index.html
Open the index.html in the project root and replace the <link rel="icon">.
<!-- index.html --> <link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" /> <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" />
Nuxt 3: configure via app.head
In nuxt.config.ts, add the link to app.head.link.
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'icon', type: 'image/svg+xml', href: 'https://emojifavicons.com/rocket' },
{ rel: 'apple-touch-icon', href: 'https://emojifavicons.com/apple-touch-icon/rocket' },
],
},
},
});Nuxt 2: use head() in nuxt.config
In Nuxt 2, populate head.link the same way. Delete static/favicon.ico if present.
Popular emoji favicons for Vue
Click any emoji to see the Vue-specific install snippet.
Troubleshooting
Vite not picking up index.html changes
Restart vite dev. Vite caches the HTML template aggressively.
Nuxt static generation missing favicon
Confirm app.head.link is set in nuxt.config.ts, not just a page-level useHead().
SSG vs SSR hydration mismatch
Use an absolute URL (emojifavicons.com) rather than a computed value that differs between server and client.
VueUse / Pinia interfering
Favicons live in <head> — they are outside Vue’s reactivity. Not a Vue plugin problem.
Nuxt Image module remapping the URL
Nuxt Image only rewrites <NuxtImg>. <link> tags pass through untouched.
Frequently asked questions
Does it work with Vue Router?
Yes. The favicon lives in the HTML shell, not inside the router tree.
Can I set it per-route?
Yes — in Nuxt 3 use useHead({ link: [...] }) inside a page component.
Does it work with Vuepress / Vitepress?
Yes — add to head in the site config.
Do I need vue-meta?
Not in Vue 3 / Nuxt 3 — use useHead(). For Vue 2 / Nuxt 2, vue-meta is built in.
Does it work with Quasar / PrimeVue?
Yes — they both render to the same HTML shell.