A favicon is the small icon that appears in your browser tab, bookmarks bar, and search results. Getting it right makes your site look polished and professional — but generating the right sizes and wiring them up in HTML trips up a lot of developers. Here's everything you need to know.
What Is a Favicon?#
The word "favicon" comes from "favorites icon" — it dates back to Internet Explorer 5. Today, browsers and operating systems use favicons in many contexts:
- Browser tabs — the 16×16 or 32×32 icon next to your page title
- Bookmarks — shown in bookmark lists and the bookmarks bar
- PWA home screen icons — when users "add to home screen" on mobile
- Google Search results — shown next to your URL in the search listing
A single .ico file used to be enough. Today, best practice is to provide multiple sizes and formats.
What Sizes Do You Need?#
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 (multi-size) | Legacy browsers, most browser tabs |
| favicon-16x16.png | 16×16 | Modern browsers |
| favicon-32x32.png | 32×32 | Modern browsers, Retina tabs |
| favicon-48x48.png | 48×48 | Windows site icons |
For full PWA support you also want a 192×192 and 512×512 PNG (used as web app icons), but those aren't strictly favicons.
Getting Your Favicon Files from IconKraft#
When you generate an icon with IconKraft and download the ZIP, the favicon/ folder contains everything you need:
icon-kraft-[name]/
favicon/
favicon.ico ← multi-size ICO (16, 32, 48px)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
No manual resizing needed. Generate once, download, done.
Adding the Favicon to Your HTML#
Place your favicon files in your project's public/ folder (or web root), then add these tags inside the <head> of your HTML:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
In Next.js (App Router)#
Next.js 13+ has built-in favicon support. Drop favicon.ico directly into your app/ directory:
app/
favicon.ico
layout.tsx
page.tsx
Next.js will serve it automatically at /favicon.ico and add the right <link> tag. For additional PNG sizes, use the metadata export in layout.tsx:
import type { Metadata } from 'next'
export const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
],
},
}
In a Plain HTML Site#
Add the tags directly to every page's <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<title>My Site</title>
</head>
In Vite / React (SPA)#
Copy the favicon files into your public/ folder, then update index.html:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
Verifying It Works#
- Hard-refresh your browser (
Ctrl+Shift+R/Cmd+Shift+R) after deploying — browsers aggressively cache favicons. - Open DevTools → Network tab, filter by "favicon" — check the files return 200.
- Check your favicon in a real Google search result using Google's Rich Results Test or simply search for your site.
Common Mistakes#
Favicon not updating after deploy — Your browser cached the old one. Hard-refresh, or open an incognito window.
File served as wrong MIME type — Make sure .ico files are served as image/x-icon and .png as image/png. Most web servers handle this automatically.
Only providing .ico — Modern Retina screens show blurry icons from a 16×16 source. Always include the 32×32 PNG.
Forgetting mobile — If you want a proper PWA or "add to home screen" icon, you'll also need the Android and iOS sizes. IconKraft generates all of them in the same ZIP.
Ready to Generate Your Favicon?#
IconKraft generates a complete, production-ready favicon set — plus Android and iOS app icons — from a single AI-powered prompt. No design skills needed.