A favicon (short for "favorites icon") is the small icon displayed in browser tabs, bookmarks, and browser history next to your site name. It's typically 16×16 or 32×32 pixels, though modern browsers also use larger versions for Apple Touch icons and PWA icons.

What format should I use — ICO, PNG, or SVG?

Use all three for maximum compatibility. The .ico file covers legacy browsers and includes 16, 32, and 48px variants. SVG favicons are used by modern browsers (Firefox, Chrome) and scale perfectly. The 180×180 PNG is required for Apple Touch (iOS home screen). Our HTML snippet includes all three.

Where do I put the favicon files?

Place favicon.ico, favicon.svg, and apple-touch-icon.png in your site's root directory (e.g., /public/ in Next.js or React). Then add the provided HTML snippet to the of your HTML or layout file.

Will this work for Next.js or React apps?

Yes. For Next.js 13+, place the files in /app/ or /public/ and they are automatically picked up. For React/Vite, put them in /public/ and add the HTML snippet to index.html. For static sites, add them to your root folder.

🖼️

Free Favicon Generator

Create favicons from text or icons. Preview at 16x16 to 512x512. Download as .ico, SVG, or PNG with HTML snippet. Free online.

About this tool

Design a custom favicon for your website using text, initials, or icon shapes — no design skills needed. Customize background color, icon color, and corner radius. Preview at every standard size from 16×16 to 512×512, then download as .ico (multi-size), SVG, or PNG. Copy the HTML snippet and you're done.

Design Mode

Text / Initials (up to 3 chars)

Font Family

Font Weight

Colors

Background Color

#0d1f1b

Icon / Text Color

#14b8a6

Corner Radius

22%

Live Preview

32px

16px

Dark BG

All Sizes

128

180

Download

Add to your HTML <head>

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

💡 Place the downloaded files in your site root. Name them favicon.ico, favicon.svg, and apple-touch-icon.png.