How to Create a Favicon: A Complete Guide for Beginners
Utilko Team 5 min read Developer Tools
What Is a Favicon?
A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmarks, history, and address bars. It's typically 16×16 or 32×32 pixels, though modern requirements include multiple sizes. A well-designed favicon helps users identify your site instantly among multiple open tabs and makes your site look polished and professional.
Favicon Sizes You Need in 2026
| Size | File Name | Purpose |
|---|---|---|
| 16×16 px | favicon-16x16.png | Browser tab (small) |
| 32×32 px | favicon-32x32.png | Browser tab (high DPI), taskbar |
| 180×180 px | apple-touch-icon.png | iOS home screen icon |
| 192×192 px | android-chrome-192x192.png | Android home screen |
| 512×512 px | android-chrome-512x512.png | Android splash screen |
| Any size | favicon.ico | Backward compatibility (ICO format) |
Design Tips for Favicons
- Keep it simple: At 16×16 pixels, complex logos become unrecognizable blobs. Use a single letter, an abstract symbol, or a simplified version of your logo.
- Use clear contrast: The icon needs to stand out against both light and dark browser chrome. Test on both light and dark browser themes.
- Round corners: iOS and Android display app icons with rounded corners. Design with this in mind or ensure your favicon generator applies rounded corners automatically.
- Avoid thin lines: At tiny sizes, fine details disappear. Use bold, thick shapes.
- Use your brand colors: The favicon should be recognizable as your brand at a glance.
How to Create a Favicon Free (Step by Step)
- Start with your logo or design — ideally a vector SVG or a PNG at 512×512 pixels or larger.
- Open a free favicon generator tool.
- Upload your image.
- Preview how it looks at 16×16 and 32×32 pixels. Adjust if needed.
- Download the generated favicon package (should include multiple sizes plus an .ico file).
- Upload the files to your website's root directory.
- Add the HTML link tags to your <head> section.
HTML Code for Favicons
Add these tags inside your HTML <head> section:
<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">The site.webmanifest File
Progressive Web Apps (PWAs) also need a web app manifest file that references the larger icons. A typical manifest looks like:
{"name":"My Site","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}Try It Free
Upload your logo and generate all favicon sizes at once — free, instant download, all formats included.
Favicon Generator →