How to Create a Favicon for Your Website
A professional favicon in 2026 takes four files and six lines of HTML. This guide walks through the exact recipe, sizes and tools included.
What is a Favicon?
Your visitors have 30 tabs open. The favicon (short for "favorite icon") is how they find yours again. It's the tiny icon in browser tabs, bookmarks, history, and mobile home screens, and it does more branding work per pixel than anything else on your site.
Where Favicons Appear:
A site without a favicon reads as unfinished, like a store without signage, and some users flag it as suspicious. It's the cheapest credibility upgrade you can ship today.
Favicon Sizes in 2026
Favicon sizes range from 16×16 to 512×512, but you only need four files. Here's what each size actually does:
Classic Browser Tab Icon
The original favicon size. Still used in browser tabs on desktop. At this tiny size, your design must be extremely simple, usually a single symbol or initial.
Essential: Yes
Taskbar & Bookmark Icon
Used in Windows taskbar, Mac dock (sometimes), and bookmark bars. Slightly more detail visible at this size, but still needs to be simple.
Essential: Yes
iPhone/iPad Home Screen (Apple Touch Icon)
When users save your site to their iPhone or iPad home screen, iOS uses this size. Apple adds rounded corners automatically, so design for a square canvas.
Essential: Yes (for mobile)
512×512
Android Home Screen & PWA
Android uses these for home screen icons and Progressive Web Apps (PWAs). The 512×512 is also used in splash screens for PWAs.
Essential: Yes (for PWAs/Android)
64×64
96×96
Optional Legacy Sizes
These were used by older systems but are largely obsolete now. You can skip these unless you specifically need to support very old devices.
Essential: No
2026 Recommendation: Minimum Required Set
- • favicon.ico (16×16, 32×32 multi-size)
- • apple-touch-icon.png (180×180)
- • icon-192.png (192×192 for Android)
- • icon-512.png (512×512 for PWAs)
This covers 99% of use cases across all modern devices and browsers.
How to Create Your Favicon: Step-by-Step
Design Your Icon
Start with a square canvas at 512×512 pixels or larger, because you'll scale down from this one source. At 16×16 you get about 256 pixels total, so simplicity wins:
Design Tips:
- Use a single letter, symbol, or very simple logo
- High contrast colors, because thin lines disappear at small sizes
- Avoid fine details, since they blur when scaled to 16×16
- Use your brand colors for recognition
- Test at 16×16 to see if it's still recognizable
Export Your Design
Save your 512×512 design as a PNG with transparency, or JPG if it's solid. Name it something like logo-512.png. If your logo sits on a white background, remove the background first; the full transparent PNG walkthrough covers how.
If you only have an SVG logo, rasterize it with the free SVG to PNG converter. Figma, Canva, GIMP, even PowerPoint all work for the design itself.
Convert to Required Formats
Two free tools turn your one source file into everything a browser asks for:
Conversion Checklist:
Convert to favicon.ico (multi-size: 16×16, 32×32)
Create 180×180, 192×192, and keep 512×512 as PNG files
Your final files should be:
- • favicon.ico
- • apple-touch-icon.png (180×180)
- • icon-192.png
- • icon-512.png
Upload to Your Website
Drop the four files in your site's root directory or /public folder:
your-website/ ├── favicon.ico ├── apple-touch-icon.png ├── icon-192.png └── icon-512.png
Add HTML Code
Six lines in your <head> and every device is covered:
<!-- Traditional favicon --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <!-- Apple Touch Icon --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Android/PWA Icons --> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png"> <!-- Web App Manifest (optional but recommended for PWAs) --> <link rel="manifest" href="/site.webmanifest">
Test Your Favicon
Browsers cache favicons aggressively, so clear the cache first, then run this checklist:
Testing Checklist:
- Open your site and check the browser tab
- Bookmark your site and check that the icon appears
- Test on mobile (iOS and Android if possible)
- Try saving to home screen on mobile
- Use online favicon checkers to verify
Common Favicon Mistakes to Avoid
❌ Too Much Detail
Your elaborate logo won't work at 16×16 pixels. Simplify to just a letter, symbol, or simplified icon.
❌ Wrong Aspect Ratio
Favicons must be square. Rectangular logos will be squashed or cropped. Create a square variant.
❌ Low Contrast
Subtle color differences disappear at tiny sizes. Use high-contrast colors that stand out.
❌ Forgetting Mobile Sizes
Many developers only create favicon.ico and forget the 180×180 Apple touch icon and Android sizes.
❌ Not Testing on Actual Devices
What looks good on your design tool might be unclear at actual display sizes. Always test on real browsers and devices.
Pro Tips for Great Favicons
Use Your Brand Color
A distinctive color helps users spot your tabs instantly among dozens of open tabs.
Test in Dark Mode
Make sure your favicon is visible in both light and dark browser themes.
Keep File Sizes Small
Stay under 50KB total. Run your PNGs through the PNG compressor, or hit an exact budget with compress to 50KB.
Version Your Files
Add a version query string when updating: ?v=2 to bust browser cache.
Consider Animation (Advanced)
Some browsers support animated favicons (.GIF or SVG). Use sparingly for notifications.
Create an SVG Favicon
Modern browsers support SVG favicons, which scale perfectly at all sizes.
Ready to Create Your Favicon?
Go from logo to finished favicon in under a minute, free and in your browser with no sign-up.