A favicon is the small icon that appears in browser tabs, bookmark lists, and search engine results next to your website's name. Despite its tiny size, a favicon plays a significant role in brand recognition, user experience, and professional credibility. If your website does not have a favicon, most browsers will display a generic globe or blank document icon — an immediate signal that the site may be unfinished or unprofessional.
In this guide, you will learn exactly what a favicon is, what sizes you need, how to create one from any image, and how to add it to your website on any platform.
What Exactly Is a Favicon?
The word "favicon" is short for "favourite icon." It was originally introduced by Microsoft in Internet Explorer 5 in 1999 as a way to mark bookmarked pages with a small custom icon. Today, favicons appear in multiple places across every major browser and operating system:
- Browser tabs — the small icon to the left of the page title in each tab
- Bookmarks bar — the icon next to saved bookmark entries
- Browser history — helps visually identify previously visited sites
- Mobile home screen — when users add your site to their phone's home screen
- Search results — Google displays favicons next to website URLs in search results
- Progressive Web Apps (PWAs) — the app icon on mobile devices
What Sizes Do You Need?
Different browsers and devices expect different favicon sizes. Here are the most important ones:
- 16x16 px — Classic browser tab favicon (legacy support)
- 32x32 px — Standard browser tab favicon (most common, recommended minimum)
- 48x48 px — Windows taskbar and desktop shortcuts
- 180x180 px — Apple Touch Icon (iPhone and iPad home screen)
- 192x192 px — Android Chrome and PWA icon
- 512x512 px — PWA splash screen and Google requirements
At minimum, you should have a 32x32 PNG favicon. For full cross-platform coverage, generate all six sizes listed above.
How to Create a Favicon from Any Image
You do not need Photoshop or any design software. The simplest approach is to use a browser-based favicon generator like Rekreay's free Favicon Generator. Here is the process:
- Start with a square image — your logo, icon, or brand mark. Ideally 512x512 pixels or larger.
- Upload it to the generator tool.
- Select all the sizes you need (16, 32, 48, 180, 192, 512).
- Click Generate and download each PNG file.
- Upload the files to your web server or blog platform.
Tips for a Good Favicon
- Keep it simple. Favicons are displayed at very small sizes. Complex images with fine details will look like blobs at 16x16 pixels. Use bold shapes, single letters, or simple icons.
- Use a transparent background. Save your source image as PNG with transparency so the favicon blends naturally with different browser themes (light and dark mode).
- Test at small sizes. Before committing, zoom out and look at your favicon at actual 16x16 size. If you cannot identify what it represents, simplify the design.
- Match your brand. Use your primary brand colour and a recognizable element from your logo. Consistency across your website and favicon builds trust.
How to Add a Favicon to Your Website
Blogger
In Blogger, go to Settings, scroll to the Basic section, and find Favicon. Click "Choose File" and upload your 32x32 PNG. Blogger will automatically serve this favicon on all pages. For more complete coverage, you can also edit your theme HTML and add link tags in the <head> section.
WordPress
In WordPress, go to Appearance > Customize > Site Identity. You will see a "Site Icon" field. Upload your square image (WordPress recommends at least 512x512). WordPress will automatically generate all required sizes from your upload.
Custom HTML Sites
Add these link tags inside the <head> section 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="/favicon-180x180.png">Common Favicon Mistakes to Avoid
- Using a full photograph — Photos are too detailed for 16x16 pixels. Crop to a single recognizable element.
- Forgetting the Apple Touch Icon — Without a 180x180 icon, iOS devices will show a generic screenshot when users add your site to their home screen.
- Using JPG instead of PNG — JPG does not support transparency and may have compression artefacts. Always use PNG for favicons.
- Not testing across browsers — Test your favicon in Chrome, Firefox, Safari, and Edge to ensure it displays correctly everywhere.
Why Favicons Matter for SEO
Google has been displaying favicons in mobile search results since 2019 and in desktop search results since 2023. A clear, professional favicon next to your search listing increases click-through rates by making your result look more credible and recognizable. Sites without favicons may display a default grey globe icon, which looks less trustworthy to searchers.
Additionally, a well-designed favicon contributes to overall brand consistency, which indirectly supports SEO by improving user engagement metrics — time on site, return visits, and bookmark usage.
Final Thoughts
Creating a favicon takes less than five minutes but the impact on your website's professional appearance is significant. Start with a clean, simple icon, generate all required sizes using a free favicon generator, and add it to your site. Your brand will look polished in browser tabs, bookmarks, and Google search results.