How to Create a Favicon for Your Website — A Complete Guide
A favicon is one of the smallest yet most impactful elements of your website's branding. This guide covers everything you need to know about creating, sizing, and implementing favicons for any website — whether you are building an e-commerce store in India or a personal blog for international audiences.
What Is a Favicon and Why Does It Matter?
A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmark lists, browser history, and mobile home screens next to your website's name. It was first introduced by Internet Explorer 5 in 1999 and has since become a universal web standard.
Despite its tiny size — typically 16×16 or 32×32 pixels — a favicon plays a crucial role in user experience and brand recognition. When a user has multiple tabs open, the favicon is often the only visual identifier for your site. Without one, your website displays a generic browser icon that looks unprofessional.
For businesses in India, where mobile internet usage accounts for over 75% of web traffic, having proper favicons including the Apple Touch Icon (180×180) ensures your brand appears correctly when users save your site to their phone's home screen. A missing or broken favicon can signal to visitors that a website is incomplete or untrustworthy.
Standard Favicon Sizes You Need
Modern websites require multiple favicon sizes to display correctly across different devices, browsers, and platforms. Here is a breakdown of all the standard sizes and where each one is used:
| Size | Use Case | Priority |
|---|---|---|
| 16×16 | Browser tabs, address bar | Essential |
| 32×32 | Taskbar, newer browser tabs | Essential |
| 48×48 | Windows desktop shortcuts | Recommended |
| 64×64 | High-DPI browser tabs | Optional |
| 96×96 | Google TV, some platforms | Optional |
| 128×128 | Chrome Web Store | Optional |
| 180×180 | Apple Touch Icon (iOS) | Essential |
| 192×192 | Android Chrome, PWA | Recommended |
| 512×512 | PWA splash screen, Google | Recommended |
At minimum, every website should have 16×16, 32×32, and 180×180 favicons. If you are building a Progressive Web App (PWA), you also need 192×192 and 512×512 sizes.
Best Image Formats for Favicons
The two primary formats used for favicons are ICO and PNG. Understanding when to use each format helps ensure maximum compatibility.
ICO Format
The ICO format is the traditional favicon format that can contain multiple image sizes in a single file. It is supported by all browsers, including very old versions of Internet Explorer. However, ICO files tend to be larger because they bundle multiple sizes together.
PNG Format
PNG is the modern standard for favicons. All current browsers support PNG favicons, and they offer excellent quality with transparency support. PNG files are also smaller than ICO files for individual sizes.
SVG Format
SVG favicons are gaining support in modern browsers like Chrome, Firefox, and Edge. They scale perfectly to any size and have the smallest file size. However, Safari and some older browsers do not fully support SVG favicons yet.
For most websites, using PNG favicons is the best approach. They offer the right balance of quality, compatibility, and file size. Our Favicon Generator creates PNG favicons in all standard sizes.
How to Design a Good Favicon
Designing a favicon that works well at tiny sizes requires a different approach than designing a full-sized logo. Here are proven tips for creating effective favicons:
- Keep it simple: At 16×16 pixels, detailed designs become unrecognizable. Use simple shapes, single letters, or minimalist icons.
- Use bold colours: High-contrast colours ensure your favicon is visible against both light and dark browser themes.
- Start with a square canvas: Favicons are always square. Design your icon on a square canvas from the beginning.
- Test at small sizes: Always preview your design at 16×16 and 32×32 to confirm it remains clear and identifiable.
- Use transparent backgrounds: PNG favicons with transparent backgrounds look clean in all browser environments.
- Match your brand: Your favicon should be instantly associated with your brand. Use your logo mark, brand initial, or primary brand colour.
Example: Indian E-commerce Brand
A Jaipur-based jewellery store called "Ratna Gems" uses a simple gold diamond shape as their favicon. The design is clear even at 16×16 pixels because it uses a single bold shape with a contrasting gold-on-purple colour scheme.
Example: Tech Startup in Hyderabad
A SaaS company uses the first letter "C" of their brand name in their signature blue colour. The bold letterform is instantly recognizable in browser tabs even with 20+ tabs open.
Step-by-Step Favicon Implementation
Once you have generated your favicon files, implementing them on your website involves adding specific HTML tags to the head section of your pages. Here is the recommended implementation:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
Place these tags inside the <head> section of your HTML. Upload the favicon files to your website's root directory (the same folder as your index.html or homepage).
WordPress Implementation
If you use WordPress, the easiest method is to go to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 PNG and WordPress will automatically generate all needed sizes. This works with most themes including Starter Templates, Astra, and GeneratePress.
PWA Manifest
For Progressive Web Apps, add the 192×192 and 512×512 icons to your manifest.json file:
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Common Favicon Mistakes to Avoid
Many website owners make avoidable mistakes with their favicons. Here are the most common issues and how to fix them:
- Using a full logo: Detailed logos with text become blurry and unreadable at 16×16. Use only the logo mark or brand initial instead.
- Wrong file format: Using a renamed JPEG as an ICO file causes browsers to display a broken icon. Always use proper PNG or ICO files.
- Missing Apple Touch Icon: Without a 180×180 apple-touch-icon, iOS devices show an ugly screenshot of your page when users add it to their home screen.
- Not testing across browsers: Always verify your favicon displays correctly in Chrome, Firefox, Safari, and Edge. Each browser handles favicons slightly differently.
- Caching issues: Browsers aggressively cache favicons. If you update your favicon, users may see the old one for days. Append a version query string (e.g.,
?v=2) to force a refresh.
Favicon Best Practices for Indian Websites
Indian websites have specific considerations when it comes to favicons due to the dominance of mobile browsing and varying internet speeds across the country.
Mobile-First Approach
With over 700 million smartphone users in India, ensure your 180×180 Apple Touch Icon and 192×192 Android icon are always included. Many users in cities like Mumbai, Delhi, and Bengaluru save favourite websites to their home screens.
File Size Optimization
In areas with slower 3G/4G connections, every kilobyte matters. Keep your favicon PNG files as small as possible. A well-optimized 32×32 favicon should be under 2KB. Use tools like the Image Compressor to reduce file sizes.
International Portfolio
A London-based freelancer working with Indian clients uses a simple geometric "A" lettermark as their favicon. The clean design works equally well on retina MacBooks, Windows laptops, and budget Android phones used by clients in tier-2 Indian cities.
Google Search also displays favicons next to search results on mobile. A clear, professional favicon can increase your click-through rate from search results, making it a small but meaningful SEO advantage.
Testing Your Favicon
After implementing your favicon, test it thoroughly to ensure it works correctly:
- Open your website in Chrome, Firefox, Safari, and Edge on desktop.
- Check the browser tab icon at different tab widths (few tabs vs. many tabs).
- Bookmark your website and verify the favicon appears in the bookmarks bar.
- On an iPhone, add your website to the home screen and check the Apple Touch Icon.
- On an Android phone, add your website to the home screen via Chrome and verify the icon.
- Clear your browser cache if you are updating an existing favicon.
If your favicon is not appearing, check that the file paths in your HTML link tags are correct and that the files are actually uploaded to your server.
Favicon and SEO Impact
While favicons are not a direct ranking factor, they indirectly affect SEO in several ways. Google displays favicons in mobile search results, and a recognizable favicon can improve click-through rates. Sites without favicons may appear less trustworthy to users scanning search results.
Additionally, Google has specific guidelines for favicons in search results. Your favicon must be a multiple of 48×48 pixels, should visually represent your brand, and must not be misleading or contain inappropriate content. Pages that violate these guidelines may have their favicon removed from search results.
For the best SEO outcome, ensure you have at least a 48×48 favicon (which is a multiple of 48) and that your favicon is consistently used across all pages of your website.
🎨 Create Your Favicon Now
Use our Favicon Generator to create perfectly sized favicons from any image in seconds — all processing happens in your browser.
Open Favicon Generator →Recommended Hosting
Hostinger
If you are building a website for your tools, blog, or store, reliable hosting matters for speed and uptime. Hostinger is a popular option used worldwide.
Visit Hostinger →Disclosure: This is a sponsored link.