Back to Tutorials

How to Add Favicons

Learn how to add favicons to your project using different frameworks and methods. Step-by-step installation guide with code examples for HTML, Next.js, Nuxt.js, React, Vue.js, and SvelteKit.

Before You Start

First, design your favicon on the homepage and download the complete ZIP package. The ZIP file contains all the favicon sizes you need.

After downloading, extract the ZIP file. You'll find all favicon files inside. Then, place these files in your project's public directory (use static directory for SvelteKit, or root directory for pure HTML).

Once the files are in place, follow the instructions below to add HTML links according to the framework you're using.

Framework Installation Guides

Pure HTML

Place all favicon files in your website's root directory (or public directory if using a static site generator), then add the following links in the <head> section of your HTML file: 

<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Next.js

Place all favicon files in the public directory, then add metadata in your app/layout.tsx or pages/_document.tsx: 

// app/layout.tsx (App Router)
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '16x16 32x32 48x48' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
      { url: '/favicon-192x192.png', sizes: '192x192', type: 'image/png' },
      { url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

Or use the next/head component in Pages Router: 

// pages/_document.tsx (Pages Router)
import Head from 'next/head'

export default function Document() {
  return (
    <Head>
      <link rel="icon" type="image/x-icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
      <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
      <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
      <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    </Head>
  )
}

Nuxt.js

Place all favicon files in the public directory, then configure in nuxt.config.ts or app.vue: 

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
        { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
        { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      ],
    },
  },
})

Or use useHead in app.vue: 

// app.vue
<script setup>
useHead({
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
    { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
    { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
    { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
    { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  ],
})
</script>

React (Create React App / Vite)

Place all favicon files in the public directory, then update public/index.html: 

<!-- public/index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
</head>

Vue.js (Vite)

Place all favicon files in the public directory, then update index.html: 

<!-- index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>

SvelteKit

Place all favicon files in the static directory, then update src/app.html: 

<!-- src/app.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%sveltekit.assets%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%sveltekit.assets%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%sveltekit.assets%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%sveltekit.assets%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%sveltekit.assets%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
</head>