favicon generator · 100% client-side

Favicon Generator

Create a favicon from text or emoji. Render it in the browser. Download the package. Nothing leaves your device.

Text

Characters (1–3)

Font

Family

Weight

Size90%

Colors

Font Color

Background Color

Shape

Background Shape

Corner Radius20%

Browser Tab

My Awesome App

All Sizes

16×16

32×32

180×180

192×192

512×512

Add to your project

Copy all files from the zip into /public, then paste this:

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

export const metadata: Metadata = {
  title: 'Your App',
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  manifest: '/site.webmanifest',
}