Vue / Nuxt Tutorial
# Emoji Favicon for Vue
Wire an emoji favicon into Vue 3 (Vite), Vue 2, or Nuxt 3 in one minute.
``
## How to add an emoji favicon to Vue
1
### Vue 3 + Vite: edit index.html
Open the `index.html` in the project root and replace the ``.
```
```
2
### 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' },
],
},
},
});
```
3
### 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.
[rocket](/rocket-favicon)
[fire](/fire-favicon)
[beating heart](/beating-heart-favicon)
[sparkles](/sparkles-favicon)
[crown](/crown-favicon)
[party popper](/party-popper-favicon)
[hundred points symbol](/hundred-points-symbol-favicon)
[glowing star](/glowing-star-favicon)
## 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 `` — they are outside Vue’s reactivity. Not a Vue plugin problem.
**Nuxt Image module remapping the URL**
Nuxt Image only rewrites ``. `` 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.
## Try another framework
[WordPress](/emoji-favicon-for-wordpress)
[Next.js](/emoji-favicon-for-nextjs)
[React](/emoji-favicon-for-react)
[Shopify](/emoji-favicon-for-shopify)
[Astro](/emoji-favicon-for-astro)
[Svelte](/emoji-favicon-for-svelte)
[Browse all 3,773 emoji favicons →](/emojis)
---
*Source: [emojifavicons.com](https://emojifavicons.com)*