Favicon generator for Vue.js

Integrate favicons in Vue CLI, Vite, or Nuxt projects through the public directory.

Vue.js / Vite

Generate your favicon package first, then follow the steps below to integrate with Vue.js.

Installation steps

1
Generate your favicon package and extract files into the public/ folder.
2
Vue CLI and Vite both serve public/ assets from the site root.
3
Update index.html in the project root with the link tags below.
4
Remove any default favicon.ico shipped with the template if replacing it.
5
Run npm run dev and confirm the tab icon updates after a hard refresh.

Code & configuration

Copy and adapt for your Vue.js project

<!-- index.html -->
<head>
  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

// Nuxt 3 — nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "icon", type: "image/png", href: "/favicon-96x96.png", sizes: "96x96" },
        { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
        { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" },
        { rel: "manifest", href: "/site.webmanifest" },
      ],
    },
  },
});

Pro tips

For Nuxt 3, place files in public/ and configure app.head in nuxt.config.ts.
Vite does not process public/ files — paths start with /.

Files to deploy

favicon.ico

favicon.svg

favicon-96x96.png

apple-touch-icon.png

android-chrome-192x192.png

android-chrome-512x512.png

site.webmanifest