When you have dozens of browser tabs open, those tiny icons help you instantly find the right website. This small 16×16 pixel image plays a huge role in your brand recognition — it appears in bookmarks, browser history, Google search results and on mobile devices.
A website without a favicon looks incomplete and unprofessional. Users subconsciously trust sites with favicons more — it signals that the owner cares about details. Moreover, favicons directly impact click-through rates in search results and brand recognition on social media.
This guide shows how to create the perfect favicon, which sizes to use for all devices, which formats to save in and how to install it on any CMS — from WordPress to pure HTML. No fluff, only practice.
What is a Favicon and Where Does It Appear
A favicon (short for "favorites icon") is a small icon representing your website in browser interfaces and other places where site links are displayed.
Where users see your favicon:
Browser tabs are the most obvious place. When 20+ tabs are open, the icon becomes the only way to quickly find the right one. Users don't read tab titles — they look for familiar brand icons.
Bookmarks and favorites bars save favicons next to site names. Without an icon, browsers show an empty square or generic document icon — reducing likelihood of repeat visits.
Google search results since 2019 display favicons next to URLs. Familiar icons attract attention among competitors and increase CTR (click-through rate) by 5-15% according to various A/B tests.
Browser history helps users quickly find previously visited sites among hundreds of entries. A unique favicon dramatically simplifies this task.
Mobile devices use favicons as app icons when users add sites to home screens. iOS requires a separate Apple Touch Icon sized 180×180px.
Reading lists and offline modes in modern browsers also use favicons for visual identification of saved pages.
Why Your Website Needs a Favicon: Business Impact
Brand Recognition
Favicons work as mini-logos that users see dozens of times daily. Even a simple letter on a colored background creates visual brand associations. Famous sites have instantly recognizable icons: Facebook's blue circle, YouTube's red triangle, SoundCloud's orange wave.
Trust and Professionalism
According to Nielsen Norman Group research, users form first impressions of websites in 0.05 seconds. Missing favicons signal unprofessional approach — like grammatical errors or outdated design. This is especially critical for ecommerce and financial services.
Increased CTR in Search Results
Internal tests by major online stores showed 7-12% click increases after adding bright recognizable favicons. Users tend to click familiar brands even when they're not in top-3 results.
Improved User Experience
When users have 30+ tabs open (standard situation for office workers), title text isn't visible at all. Only icons remain. Without favicons your site gets lost among dozens of gray squares.
Real Case Study: One THE.Hosting client — an online English school — added a favicon with letter "E" on blue background. After a month they measured 18% growth in direct traffic and 23% in repeat visits. Users found the site more easily in bookmarks and browser history thanks to recognizable icon.
Correct Favicon Sizes and Formats
One of the most common mistakes is creating only one 16×16px favicon version. Modern devices require multiple sizes for optimal display.
Required Sizes:
- 16×16px — standard browser tabs, address bar
- 32×32px — Windows taskbar, high-resolution bookmarks
- 48×48px — Windows site icons
- 180×180px — Apple Touch Icon for iPhone and iPad
- 192×192px — Android Chrome home screen icon
- 512×512px — Android Chrome splash screen when adding site
Recommended Additional Sizes:
- 96×96px — Google TV
- 144×144px — Microsoft Windows tiles
- 256×256px — backup size for future devices
File Formats:
.ICO — classic favicon format, supported by all browsers including IE. Can contain multiple sizes in one file. Required for compatibility with older browsers.
.PNG — modern format with transparency, recommended for all sizes except basic 16×16. Best quality with small file size.
.SVG — vector format that scales without quality loss. Supported by most modern browsers but not recommended as sole option due to Safari and old Chrome issues.
What NOT to use:
- .GIF — outdated format, animated favicons annoy users
- .JPG — doesn't support transparency, creates artifacts at small sizes
- .BMP — file size too large
Optimal File Weights: Basic favicon.ico should weigh maximum 15-20 KB. If larger — optimize the image. Every extra kilobyte slows down site loading.
How to Create a Favicon: Step-by-Step Guide
Step 1: Determine Design
Favicons must be maximally simple — details aren't distinguishable at 16×16 pixels. Best options:
- First letter of company name on contrasting background
- Simplified logo version (symbol only, no text)
- Recognizable product or service icon
- Geometric shape in brand colors
Bad Examples: Full logo with text, detailed illustrations, photos, gradients (blur at small sizes).
Good Examples: Twitter — bird only, GitHub — Octocat only, Spotify — three arcs only, Reddit — smiling face only.
Step 2: Create Image
Work in vector editor (Adobe Illustrator, Figma, Inkscape) to export to any size without quality loss later. Canvas size — minimum 512×512px for work convenience.
Important Design Rules:
- Use maximum 2-3 colors
- Avoid thin lines (less than 2px)
- Leave edge margins minimum 10%
- Test on black AND white backgrounds
- Check how it looks in grayscale
Step 3: Export in Required Sizes
Use online generators that automatically create all necessary sizes:
RealFaviconGenerator.net — best tool, generates all formats with preview on different devices. Shows how it looks on iOS, Android, Windows. Creates ready HTML code for insertion.
Favicon.io — simple generator from text, image or emoji. Ideal for quick creation of letter favicons. Free, no registration required.
Canva — has Favicon template, allows creating design and exporting to PNG. Then convert to ICO via Favicon.io or RealFaviconGenerator.
If doing manually in Photoshop/Figma — export each size separately with names: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png etc.
Step 4: Optimize File Sizes
Use TinyPNG or Squoosh to compress PNG files without quality loss. Goal — each file under 5 KB.
For ICO file use ConvertICO or built-in export in RealFaviconGenerator.
How to Install Favicon on Website
Method 1: WordPress
Easiest way without code:
- Log into WordPress admin panel
- Go to Appearance → Customize
- Open Site Identity
- Find Site Icon section
- Upload PNG file sized minimum 512×512px
- Click Publish
WordPress automatically creates all needed sizes and inserts correct code. Icon appears everywhere including mobile devices.
Important: If using caching plugin (WP Rocket, W3 Total Cache), clear cache after uploading favicon.
Method 2: HTML Code (for any site)
Insert following code in your site's <head> section:
<!-- Basic favicon for all browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG versions for modern browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple Touch Icon for iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android Chrome -->
<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">
<!-- Optional: SVG favicon for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Upload all files to site root directory via FTP or hosting file manager.
Method 3: Joomla, OpenCart, Bitrix
Joomla: Admin → System → Global Configuration → "Metadata" tab → "Favicon" field
OpenCart: System → Settings → Store → "Image" tab → "Icon" field
1C-Bitrix: Settings → Product Settings → Sites → select site → "Additional" tab → "Favicon" field
Common Favicon Creation Mistakes
Mistake #1: Too Complex Design
At 16×16 pixels details turn into mush. Logos with small text or gradients become unreadable gray blobs. Simplify to minimum.
Mistake #2: Using Only One Size
Uploaded only favicon.ico 16×16px and forgot the rest. Looks blurry on Retina displays, doesn't show on phones at all. Create all sizes.
Mistake #3: Wrong Format
Saved in JPG — no transparency, compression artifacts. Or used only SVG — doesn't work in Safari. Always include ICO + PNG versions.
Mistake #4: Forgot About Caching
Updated favicon but browser shows old one. Browsers aggressively cache favicons. Solution: add version to URL <link rel="icon" href="/favicon.ico?v=2"> or clear browser cache (Ctrl+F5).
Mistake #5: No Contrast
White icon on white background disappears in browser. Always test on dark AND light browser theme. Add thin outline or use contrasting background.
Mistake #6: Huge File Size
Favicon weighs 500 KB because saved PNG without compression. This slows down loading of ALL site pages. Optimize through TinyPNG, target size — up to 20 KB for all files combined.
How to Check Favicon Works
Quick Check:
- Open site in private browser window (Ctrl+Shift+N)
- Look at tab — icon should appear
- Add site to bookmarks — icon should save
- Check on phone in Chrome and Safari
Detailed Check of All Formats:
Use RealFaviconGenerator Checker — insert site URL, tool shows which sizes found, which missing, how they look on different devices.
Google Search Console — few days after adding check "Enhancements" section → see if there are favicon errors in mobile results.
Check on Real Devices:
- iPhone — add site to home screen, check 180×180 icon
- Android — same, should be 192×192 icon
- Windows — pin site to taskbar, needs 32×32
- Mac — add to Dock via Safari, uses 256×256
If Favicon Doesn't Display:
- Clear browser cache (Ctrl+Shift+Delete)
- Verify files actually uploaded to server
- Check path in HTML code (case sensitive on Linux servers)
- Open file directly in browser:
https://your-site.com/favicon.ico - Check file permissions (should be 644)
Favicon Impact on SEO and Conversion
SEO Factors:
Google officially stated favicons don't directly affect rankings. BUT they influence behavioral factors:
- Increase CTR in search results
- Increase repeat visits (users find in bookmarks)
- Reduce bounce rate (people less confused with tabs)
Impact on Conversion:
Tab icon creates brand presence feeling even when users switch between tabs. Online stores note that having favicon:
- Increases purchase completion by 3-5% (less chance user loses cart tab)
- Increases return to product comparison (easier to find open product cards)
- Improves brand reliability perception
Data from THE.Hosting Practice:
Analyzed 200+ clients who added favicons during 2025. Average metric improvements:
- Direct visits: +14%
- Repeat visits: +19%
- Time on site: +8%
- Bookmark additions: +31%
Especially significant effect for B2B companies where deal cycle is long and clients return to site multiple times.
Best Practices for Favicons in 2026
1. Dark Theme Support
More users use browser dark mode. If your favicon is light on transparent background, it disappears on dark tab bar. Solutions:
- Add dark outline to light favicon
- Use media query for switching icons:
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">
2. Progressive Web App (PWA)
If planning PWA version of site, add manifest.json:
{
"name": "Site Name",
"short_name": "Short",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
And connect it:
<link rel="manifest" href="/manifest.json">
3. Use SVG for Brand Colors
SVG favicons allow embedding brand colors directly in code:
<link rel="icon" type="image/svg+xml" href="dаta:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E💎%3C/text%3E%3C/svg%3E">
Works for emoji or simple vector shapes. Plus — zero HTTP requests.
4. A/B Testing Icons
Large companies test different favicon variants:
- Full-color vs monochrome
- Letter vs symbol
- With background vs transparent
Success metric — repeat visits and direct traffic quantity 30 days after change.
Frequently Asked Questions
Is favicon required for website?
Technically no, site will work. But missing favicon is sign of unprofessionalism. Users subconsciously trust sites with icons more.
What's minimum favicon size?
Minimum — 16×16px for old browsers. But recommended to create set from 16×16 to 512×512 for all devices.
Can you use animated favicon?
Technically yes (GIF or SVG with animation), but this distracts users and considered bad practice. Use only for temporary notifications (e.g., new chat message).
Why doesn't favicon update after replacement?
Browsers cache favicons very aggressively. Clear cache (Ctrl+F5) or add version: favicon.ico?v=2
Need separate favicon for each page?
No, one favicon for entire site. Exception — multi-brand platforms or white labels where each section has separate brand.
Does favicon affect loading speed?
Yes, if files too large. Optimized favicon set (all sizes totaling up to 50 KB) practically doesn't affect speed.
Can you use emoji as favicon?
Yes, via SVG. But emoji support varies between platforms — may look different on iPhone and Android.
Conclusion
Favicons aren't just decoration, but important branding and usability element. Properly created icons increase site recognition, boost repeat visits and improve user experience.
Main rules: create simple design with contrasting colors, generate all necessary sizes from 16×16 to 512×512 pixels, use ICO and PNG formats, install via correct HTML code and always test on all devices.
On THE.Hosting you get fast NVMe servers that instantly deliver even multiple favicon versions, 24/7 tech support for installation help and cache optimization for maximum loading speed.
Create favicon for your site today — takes 15 minutes, but effect lasts for years.