You have probably noticed tiny icons that appear next to website names in your browser tabs. Those small images are called favicons, and despite being just 16 or 32 pixels wide, they have a surprisingly large impact on how professional and trustworthy your website appears. If your website is missing a favicon, every visitor sees a generic grey globe or blank document icon — a clear signal that something is unfinished.
In this article you will learn exactly what a favicon is, why it matters for your brand and your SEO, what sizes you need, and how to create one in minutes using a free browser-based tool.
What Does Favicon Mean?
The word favicon is a portmanteau of "favourite icon." It was introduced by Microsoft with Internet Explorer 5 in 1999, originally designed to mark bookmarked websites with a small custom icon. The name stuck even as favicons spread far beyond bookmarks to become a standard element of every website.
Today a favicon appears in multiple places across all major browsers and operating systems:
- Browser tabs — the icon sits to the left of the page title, helping users identify your site among a dozen open tabs
- Bookmarks bar and bookmark menus — favicons appear next to saved website names in every browser
- Browser history — when users scroll through their history, favicons help them visually identify previously visited pages
- Google search results — since 2019 on mobile and 2023 on desktop, Google shows favicons next to website URLs in organic search results
- Mobile home screen — when users save your website to their phone home screen, the Apple Touch Icon or Android icon is used as the app-style icon
- Progressive Web Apps (PWAs) — if your website is installable as a PWA, the favicon becomes the app icon on the user's device
Why Every Website Needs a Favicon
Brand Recognition and Professionalism
A favicon is one of the smallest but most visible elements of your brand identity. When a user has twenty browser tabs open, a distinctive favicon is often the fastest way they identify your website. Websites without a favicon appear unfinished or amateurish compared to those with a clean, recognizable icon. Investing five minutes to add a favicon immediately makes your site look more professional.
SEO and Click-Through Rate
Google's inclusion of favicons in search results is not purely decorative. Research on search result click-through rates consistently shows that listings with clear, recognizable branding receive more clicks than those with the generic grey globe placeholder. A strong favicon reinforces brand trust at the moment of the search decision — before the user has even visited your site.
Google's official guidance requires favicons to follow specific rules: the image must be accessible by Google's crawlers, it should ideally be a multiple of 48x48 pixels, and it must be hosted on the same domain as your website. Violations can result in your favicon being replaced with the grey globe in search results.
User Experience
Many users keep dozens of tabs open simultaneously. A favicon dramatically reduces the time it takes to find a specific tab. This is especially true on mobile browsers, where tab previews are small and only the favicon and a truncated title are visible. A well-designed favicon improves your site's usability even for users who visit regularly.
What Sizes Do You Need?
Different browsers, operating systems, and platforms expect different favicon sizes. Here is a complete breakdown:
- 16×16 px — the classic browser tab size, required for legacy browser support
- 32×32 px — the standard browser tab favicon used by Chrome, Firefox, and Edge on desktop
- 48×48 px — Windows taskbar and desktop shortcuts
- 64×64 px — Windows site icons and some browser address bars
- 180×180 px — Apple Touch Icon for iPhone and iPad home screens (the "Add to Home Screen" icon)
- 192×192 px — Android Chrome and Progressive Web App icon
- 512×512 px — PWA splash screens and Google's recommended icon size for web apps
At a minimum, create a 32×32 PNG favicon. For full cross-platform coverage, generate all sizes listed above. You can do this in seconds using Rekreay's free Favicon Generator — upload your image, select the sizes you need, and download each file instantly.
How to Create a Favicon
Creating a favicon from any image is straightforward:
- Prepare a square source image — ideally your logo or brand icon at 512×512 pixels or larger, saved as a PNG with a transparent background.
- Upload it to a free favicon generator.
- Select the sizes you need (at minimum 32×32; all sizes for full coverage).
- Click Generate and download the PNG files.
- Upload the files to your web hosting and add the appropriate link tags to your HTML head section, or follow your platform's built-in favicon upload process.
Design Tips for a Good Favicon
- Keep it simple. At 16×16 pixels, complex images become unrecognisable. Use a single letter, a simple geometric shape, or a bold icon element from your logo.
- Test at actual size. Before finalising, view your favicon at 16×16 pixels. If you cannot identify it, simplify further.
- Use a transparent background. PNG transparency allows your favicon to blend seamlessly in both light and dark browser themes.
- Match your brand colours. Your favicon should use the same primary colour as your logo and overall brand identity.
How to Add a Favicon to Your Website
Blogger
In Blogger, go to Settings → Basic → Favicon. Click "Choose File," upload your 32×32 PNG, and save. Blogger automatically serves the favicon across all your pages.
WordPress
Go to Appearance → Customize → Site Identity → Site Icon. Upload a square image (WordPress recommends at least 512×512) and WordPress generates all required sizes automatically.
Custom HTML
Add these link tags inside the <head> element of every page:
<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 have too much detail to be recognisable at small sizes. Extract a single element or initial instead.
- Forgetting the Apple Touch Icon — without a 180×180 icon, iOS creates a screenshot-based icon when users add your site to their home screen, which looks terrible.
- Using JPG instead of PNG — JPG does not support transparency and may have visible compression artefacts. Always use PNG for favicons.
- Not testing in Google Search — use Google's Rich Results Test to verify your favicon appears correctly in search listings.
Final Thoughts
A favicon takes minutes to create but delivers lasting benefits: stronger brand recognition, improved search result appearance, and a more professional overall presentation. If your website is currently showing the grey globe placeholder in browser tabs and Google results, fixing that today is one of the highest-return five-minute tasks you can do for your site.
Use Rekreay's free Favicon Generator to create your favicon in seconds — no design software, no registration, no cost.