How to Create a Favicon for Your Website
The complete 2026 guide to creating professional favicons. Covers sizes, formats, implementation, and includes free conversion tools.
What is a Favicon?
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, history, and mobile home screens next to your website's name. It's a crucial part of your brand identity and helps users quickly identify your site among dozens of open tabs.
Where Favicons Appear:
A professional favicon makes your site look legitimate and established. Missing or poor-quality favicons make sites appear unprofessional or even suspicious — similar to a store without signage.
Favicon Sizes in 2026
Different devices and contexts require different favicon sizes. Here's what you need to know:
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 just a 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. This gives you a high-resolution source to scale down from. Keep your design simple:
Design Tips:
- Use a single letter, symbol, or very simple logo
- High contrast colors — thin lines disappear at small sizes
- Avoid fine details — 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 file with transparency if your design needs it, or JPG if it's a solid design. Name it something like logo-512.png.
Tools: Figma, Canva, Photoshop, GIMP, or even PowerPoint work fine for simple designs.
Convert to Required Formats
Use free online tools to convert your source image to the required sizes and formats:
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
Place your favicon files in your website's root directory or in a /public folder:
your-website/ ├── favicon.ico ├── apple-touch-icon.png ├── icon-192.png └── icon-512.png
Add HTML Code
Add these lines to your HTML <head> section:
<!-- 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
Clear your browser cache and test:
Testing Checklist:
- Open your site and check the browser tab
- Bookmark your site — does the icon appear?
- 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
Favicons should be under 50KB total. Use PNG with optimized compression.
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?
Use our free tools to convert your logo to all required favicon formats