Create Your Favicon

Generate a multi-resolution favicon.ico file for your website in seconds.

Drag and drop your image here

or click to browse

Need inspiration? Try one of these samples:

Code

Rocket

Mountain

Star

Leaf

Camera

Framework-Specific Instructions

Next.js Instructions

How to add a favicon to your Next.js project

App Router (Next.js 13+)

In the App Router, simply place your favicon.ico file in the app/ directory:

my-nextjs-app/
├── app/
│   ├── favicon.ico    <-- Place here
│   ├── layout.tsx
│   └── page.tsx
└── ...

Next.js will automatically serve this file at the root of your site. You can also use the Metadata API for more control:

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Website',
  description: 'My website description',
  icons: {
    icon: '/favicon.ico',
    // You can also specify additional icons:
    // apple: '/apple-icon.png',
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Pages Router (Next.js 12 and earlier)

In the Pages Router, place your favicon.ico file in the public/ directory:

my-nextjs-app/
├── public/
│   ├── favicon.ico    <-- Place here
│   └── ...
├── pages/
│   ├── _app.js
│   └── index.js
└── ...

You can also use the Head component from next/head to add the favicon link:

// pages/_app.js
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Next.js automatically serves static files from the public directory (Pages Router) or the app directory (App Router) at the root of your application.