A favicon is the small icon that appears in browser tabs, bookmarks, and on the home screen when users save your site. It takes less than three minutes to create a complete, professional favicon package — no design software required.

Step 1 – Choose your icon source

You have three options:

Icon library — pick from 250+ icons (Lucide, Font Awesome, Material Design, Bootstrap, Remix). Great for apps, dashboards, and developer tools.
Upload your own image — use your logo, illustration, or any square PNG/JPG. Works for brands that already have a visual identity.
Emoji — fast and memorable. Many successful sites use a single emoji as their favicon (e.g. 🚀 for a SaaS, ☕ for a café).

Use our free favicon generator — no sign-up, no limits.

Step 2 – Customize your favicon

Even a simple icon can look polished with the right treatment:

Background color — pick a color that matches your brand. At 16×16 px the background fills most of the visible area.
Shape — square, rounded corners, or circle. Rounded and circle shapes are popular on mobile home screens.
Padding — leave some breathing room around the icon (15–25% is a good starting point). At 16×16 px, padding prevents the icon from feeling cramped.
Icon color — use high contrast against your background (white on dark, dark on light). At 16×16 px detail is lost, so simple, bold shapes work best.

The live preview shows your favicon at 128, 64, 32, and 16 px so you can check it looks good at every size before downloading.

Step 3 – Download and install

Click Download Favicon Package. You get a ZIP containing:

favicon.ico — multi-size ICO (16, 32, 48 px) for all browsers
favicon-16x16.png and favicon-32x32.png — modern PNG favicons
apple-touch-icon.png — 180×180 px for iOS home screen bookmarks
android-chrome-192x192.png and android-chrome-512x512.png
site.webmanifest — required for PWA install prompts
_html-snippet.txt — copy-paste HTML for your <head>

Extract the ZIP, copy all files to your website root (same folder as index.html or the public directory), and paste the HTML snippet into your <head>:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

That's it. Hard-refresh your browser (Ctrl+Shift+R) and your favicon will appear in the tab.

Favicon design tips

Simple beats complex. At 16×16 px you have 256 pixels to work with. A geometric shape, initial letter, or bold symbol reads better than a detailed illustration.
Test on light and dark backgrounds. Many browsers show favicons on both white and dark tab bars. High contrast or a solid background color ensures visibility in both.
Match your brand colors. Your favicon is a micro-branding moment. Using your brand's primary color makes the tab feel connected to the rest of your site.
Check at 16×16 px. The preview in the generator shows exactly what your favicon looks like at browser tab size. If it's unreadable there, simplify the icon or increase the padding.

Frequently asked questions

What size should a favicon be?

The minimum is 16×16 px (browser tab), but modern best practice is to provide multiple sizes. A complete favicon package covers 16, 32, 48 (ICO), 180 (Apple Touch Icon), 192, and 512 px (Android Chrome / PWA).

What format should a favicon be?

Use .ico for the main favicon (broadest compatibility), plus PNG files for modern browsers and devices. SVG favicons are supported by modern browsers but not by IE or older Safari.

Where do I put favicon files?

In the root of your website (same level as index.html). Some frameworks have a public/ folder that maps to the root — put them there.

Do I need a site.webmanifest?

Yes, if you want your site to be installable as a PWA on Android. Chrome uses site.webmanifest for the install prompt and splash screen icon. It only takes a few lines and is included in every package from our generator.

Ready to make yours? Create your favicon free →

How to Create a Favicon in 2025 – Free, 3 Steps