How to Make a Favicon for Your Website in 2026 (All Sizes, All Platforms)
How to Make a Favicon for Your Website in 2026 (All Sizes, All Platforms)
That tiny icon in the browser tab? It is called a favicon, and it is one of the most overlooked elements of web design. A good favicon makes your site look professional. A missing favicon makes it look unfinished.
Here is everything you need to know about favicons in 2026 -- what sizes you need, how to generate them, and the exact HTML code to use.
What Is a Favicon?
Browser tab bar showing multiple website favicons next to page titles, demonstrating how favicons help users identify tabs
A favicon (short for "favorites icon") is the small icon that appears in:
- •Browser tabs
- •Bookmark lists
- •History pages
- •Progressive Web App (PWA) home screens
- •Search engine results (Google shows favicons next to URLs)
- •Social media link previews
It is your website's visual identity at the smallest scale.
What Sizes Do You Need?
This is where most people get confused. Different platforms need different sizes:
| Size | Format | What It Is For |
|---|---|---|
| 16x16 | PNG or ICO | Browser tab (standard) |
| 32x32 | PNG or ICO | Browser tab (high-DPI) |
| 48x48 | PNG | Windows site icons |
| 64x64 | PNG | Windows site icons |
| 96x96 | PNG | Google TV, some Android |
| 128x128 | PNG | Chrome Web Store |
| 180x180 | PNG | Apple Touch Icon (iOS home screen) |
| 192x192 | PNG | Android home screen (PWA) |
| 512x512 | PNG | PWA splash screen, Google |
The short version: You need at minimum 16x16, 32x32, 180x180, and 192x192. Ideally, generate all of them.
How to Make a Favicon
Option 1: From an Existing Image
If you already have a logo or icon:
- 1Go to our Favicon Generator
- 2Upload your image (PNG, JPG, SVG, or WebP)
- 3All sizes generate automatically
- 4Download each size or download all at once
- 5Copy the HTML code and paste into your site
Option 2: Create a Text Favicon
If you do not have a logo yet, a text-based favicon works great:
- 1Go to our Favicon Generator
- 2Switch to "From Text" mode
- 3Enter 1-2 characters (your brand initials)
- 4Customize background color, text color, font, and corner radius
- 5Download and use
Design Tips for Favicons
- •Keep it simple. At 16x16 pixels, detail is lost. Use bold shapes and colors.
- •Use your brand color. The favicon should be instantly recognizable as "your brand."
- •Test at small sizes. Design at 512x512 but constantly preview at 16x16 and 32x32.
- •Avoid text unless it is 1-2 bold characters. Anything more is unreadable at small sizes.
- •Use transparency (PNG format) if your icon does not need a background.
- •Use a solid background for the Apple Touch Icon (180x180) -- iOS does not support transparency for home screen icons.
The HTML Code
Once you have your favicon files, add this to the head of your HTML:
<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="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
Our Favicon Generator gives you this code automatically. Just copy and paste.
For Next.js / React Projects
Place your favicon files in the /public folder and add the link tags to your layout or head component.
For WordPress
Upload via Appearance > Customize > Site Identity > Site Icon. WordPress handles the sizes automatically.
Common Favicon Mistakes
| Mistake | Why It Is Bad | Fix |
|---|---|---|
| No favicon at all | Site looks unprofessional | Generate one today |
| Only ICO format | Missing Apple and Android support | Generate PNG versions for all sizes |
| Too detailed design | Unreadable at 16x16 | Simplify to basic shapes |
| Wrong aspect ratio | Icon appears distorted | Use a perfect square image |
| Not testing on mobile | Broken home screen icons | Test on iOS and Android |
Favicon SEO Impact
Google shows favicons in search results next to your URL. A missing or broken favicon means:
- •Your listing looks less trustworthy than competitors with icons
- •Lower click-through rate from search results
- •Missed branding opportunity
A proper favicon takes 2 minutes to set up and lasts forever. There is no excuse not to have one.
Generate Your Favicon Now
Open our free Favicon Generator -- upload an image or create a text favicon. Get all sizes instantly with the HTML code to copy-paste. No sign-up, no watermark, no limits.
Building a website? Also check out our JSON Formatter for clean API responses, and our free developer tools for more.