The little icon next to your website name.
That tiny image in your browser tab is called a favicon. It takes five minutes to set up, and it quietly shapes how people perceive your brand every single day.
You have probably never thought about this.
Open your browser right now. Look at the tabs along the top. Every single one has a tiny icon next to the page title. Google has a colourful “G.” Facebook has a white “f” on blue. Your bank has its logo mark. These are favicons — short for “favourite icons” — and they are one of the most overlooked details on the web.
Bella runs a coffee shop in Kapitolyo. She spent months getting her website right — great photos, a clear menu, online ordering. But when customers had her site open in a browser tab alongside five others, there was no icon. Just a blank, generic globe or a grey document symbol. It made her polished website look like a hobby project someone threw together over a weekend.
That blank space was costing her something she could not measure directly: trust. And trust is the currency of every small business online, whether customers find you through Google, through ChatGPT, through Perplexity, or through a link someone sent in a group chat.
What exactly is a favicon?
A favicon is a small image — usually 16 by 16 pixels or 32 by 32 pixels — that represents your website. It appears in several places you interact with every day without thinking about it:
- Browser tabs. The icon next to the page title when you have multiple tabs open.
- Bookmarks. When someone saves your site, the favicon appears in their bookmarks bar or folder.
- Browser history. Scrolling through previously visited sites, your favicon helps people spot yours quickly.
- Google search results. On mobile, Google displays your favicon next to your site name in the search results list.
- Mobile home screens. When someone adds your site to their phone’s home screen (like an app), a larger version of your favicon becomes the app icon.
- AI search citations. When Perplexity, ChatGPT, Google AI Overviews, or Bing Copilot cite your website as a source, they often show your favicon next to the link.
Think of a favicon as your website’s passport photo. It is small, but it shows up everywhere, and people use it — consciously or not — to decide whether your site looks legitimate.
Kristoff runs an IT services company in Ortigas. He actually had a favicon, but it was his full company logo crammed into a 16-pixel square. The text was unreadable mush. The colours bled into each other. It looked worse than having no favicon at all because it signalled that nobody at his company paid attention to details — not exactly what you want from an IT provider.
Five reasons a favicon is more important than you think.
1. Brand recognition in a sea of tabs
The average person has eight browser tabs open at any given time. When all those tabs are competing for attention, the favicon is the fastest way for someone to find your site again. Without one, your tab blends into the noise. With a strong one, your brand stays visible even when the tab title gets cut off.
2. Trust at first glance
A missing favicon is like a shop with no sign out front. It does not necessarily mean the business is bad, but it makes people hesitate. Studies on web credibility consistently show that small design details — consistent branding, professional polish, attention to finishing touches — influence whether visitors stay or leave within the first few seconds.
3. Visibility in Google search results
Google displays favicons next to your website name in mobile search results. This means your icon appears right alongside your page title and meta description. A recognisable favicon makes your listing stand out from competitors who either have no icon or use a generic one. More visual distinction means more clicks, and more clicks from search results is the entire point of SEO.
4. AI search surfaces show your favicon
This is the part most business owners do not realise yet. When AI tools generate answers and cite sources, they increasingly show favicons. Perplexity displays source favicons prominently in its citation panels. ChatGPT shows them when linking to web sources. Google AI Overviews include them alongside cited pages. Bing Copilot does the same. Your favicon is now part of your brand presence across AI search — not just traditional Google.
Dante runs an accounting firm. His website had a generic globe icon as its favicon — the default that some website builders use when you do not upload your own. When his firm started appearing in Perplexity results for queries about tax services in Metro Manila, the globe icon made it look like every other unbranded result. He was getting cited by AI but getting zero brand recognition from those citations.
5. Mobile home screen presence
When a customer saves your website to their phone’s home screen, the larger version of your favicon (the apple-touch-icon) becomes the app icon. If you have not set one up, the phone either uses a screenshot of your page (which looks terrible at icon size) or shows a blank placeholder. A proper favicon turns your website into something that looks and feels like a real app on someone’s phone.
The sizes you actually need.
Favicons are used at different sizes in different contexts. Here is what you need to cover all the bases:
- 16×16 pixels. The classic browser tab size. This is the tiniest version and the one people see most often.
- 32×32 pixels. Used for high-resolution browser tabs, Windows taskbar shortcuts, and some desktop bookmarks.
- 180×180 pixels (apple-touch-icon). Used when someone saves your site to their iPhone or iPad home screen. Apple devices look for this specific size.
- 192×192 pixels. The size Android devices use when someone adds your site to their home screen.
- 512×512 pixels. Used by some platforms for splash screens and larger displays. Also the best starting size for your original design because it scales down cleanly.
- SVG (scalable vector graphic). An SVG favicon scales perfectly to any size without losing quality. Modern browsers support SVG favicons, and they are the most future-proof option.
Does this sound like a lot of sizes? It is. But here is the good news: you do not have to create each one manually. You design one version at 512×512 pixels (or as an SVG), and a generator tool creates all the other sizes automatically. More on that in a moment.
How to design a favicon that actually works.
Favicons are not just shrunken logos. They are their own design challenge because of how small they appear. Here are the rules that work:
Keep it dead simple
At 16 pixels wide, there is no room for detail. Text is unreadable. Gradients turn to mush. Fine lines disappear. The best favicons use a single bold shape, a single letter, or a stripped-down version of a logo mark. Think of the biggest, simplest element of your brand and use that.
Use your brand colours
Your favicon should be instantly recognisable as part of your brand. Use your primary brand colour. If your logo has a distinct colour combination, carry that into the favicon. Consistency across your website, your social media profiles, and your favicon reinforces brand recognition.
Test at actual size
Design at 512×512, but constantly preview at 16×16 and 32×32. What looks great large often looks like a blurry smudge when shrunk. If you cannot tell what your favicon is at 16 pixels, simplify further.
Avoid text
Unless your brand is a single letter (like the “G” for Google or “f” for Facebook), do not put text in your favicon. Words become illegible at this scale. Amara runs a skincare brand. Her logo is the word “Amara” in an elegant script font. That script is gorgeous on her packaging, but at favicon size it looked like a squiggly line. She was smart about it: she used just the letter “A” from her brand font, set against her signature blush-pink background. Clean, recognisable, and on-brand.
Consider light and dark backgrounds
Browser tabs can be light or dark depending on the user’s system settings. A white favicon disappears on a light tab. A dark favicon vanishes on a dark tab. The safest approach is to use a coloured background or a contrasting outline so your icon is visible in both modes. SVG favicons can even be set up to automatically switch colours based on the user’s theme, which is a nice touch.
Liza is a florist. She did not try to cram her full flower-bouquet logo into a favicon. Instead, she designed a simple single petal shape — one curved line in her brand’s signature green — and it became one of the most recognisable elements of her brand. Customers told her they could always find her tab because of that little green petal. That is exactly what a good favicon does.
How to create your favicon (for free).
You do not need a designer or expensive software. Here is the simplest workflow:
Step 1: Design your icon in Canva
Open Canva (the free version works fine). Create a custom-sized canvas at 512×512 pixels. Design your favicon using a simple shape, a single letter, or a simplified version of your logo mark. Use your brand colours. Export it as a PNG with a transparent background if possible.
Step 2: Generate all sizes with RealFaviconGenerator
Go to RealFaviconGenerator.net. Upload your 512×512 PNG. The tool shows you a preview of how your favicon will look on every platform — browser tabs, iOS home screen, Android home screen, Windows taskbar. You can adjust the background colour and padding for each platform. When you are satisfied, it generates a downloadable package containing every size you need, plus the HTML code to add to your site.
Alternative free tools
- Favicon.io. Lets you generate a favicon from text (pick a letter, choose a font, select colours), from an image, or from an emoji. Quick and simple if you want a text-based favicon.
- Figma. If you already use Figma for design work, set up a 512×512 frame, design your icon, and export. Pair it with RealFaviconGenerator for the size conversion.
- GIMP. The free open-source image editor. It can export directly to .ico format (the traditional favicon file type), though the generator approach above is easier for most people.
If you have a designer or a brand guideline document, check whether a simplified icon version of your logo already exists. Many brand identity packages include a “logo mark” or “icon” version specifically designed for small spaces. That is your favicon.
How to add a favicon to your website.
WordPress
Go to Appearance → Customize → Site Identity. You will see a “Site Icon” option. Upload your image (WordPress recommends 512×512 pixels). WordPress automatically generates all the sizes it needs. Click “Publish.” Done. It takes about 60 seconds.
Shopify
Go to Online Store → Themes → Customize. Open Theme Settings and look for Favicon. Upload a square image (at least 32×32, but 512×512 is better). Save. Shopify handles the rest.
Wix
Go to Settings → Favicon in your Wix dashboard. Upload a 16×16 PNG or ICO file, or a larger image that Wix will scale down. Save and publish.
Squarespace
Go to Design → Browser Icon (Favicon). Upload your image. Squarespace recommends 300×300 pixels minimum. Save.
Custom HTML site
If you built your site from scratch (or your developer did), you add favicon references in the <head> section of your HTML. After generating your files with RealFaviconGenerator, upload them to your website’s root directory and paste the provided HTML code into your <head> tag. The code typically includes links for the standard favicon, the apple-touch-icon, and a web app manifest file.
The HTML looks something like this:
- A
<link rel="icon">tag pointing to your .ico or .svg file - A
<link rel="apple-touch-icon">tag pointing to your 180×180 PNG - A
<link rel="manifest">tag pointing to a site.webmanifest file that lists the 192×192 and 512×512 sizes
If that sounds technical, do not worry. RealFaviconGenerator gives you copy-paste code. You (or your developer) just paste it in. Five minutes of work for a permanent improvement.
Every place your favicon shows up.
Once you set up a favicon, it quietly works for you across more surfaces than most business owners realise:
Browser tabs
This is the most obvious one. When a customer has your site open alongside their email, social media, and five other tabs, your favicon is how they find you again. Without it, your tab looks like every other unbranded page.
Bookmarks and reading lists
People who bookmark your site see your favicon in their bookmarks bar, bookmarks menu, or reading list. A recognisable icon makes them more likely to return to your site rather than scrolling past it.
Google search results (mobile)
Google shows favicons next to your website name in mobile search results. This is real estate you are either using or wasting. A branded icon makes your listing look more established and trustworthy compared to results that show a generic globe or nothing at all. Google has specific guidelines for favicons in search: they must be at least 48×48 pixels, and Google may choose not to display them if they are misleading or low quality.
Mobile home screen
When a customer taps “Add to Home Screen” on their phone, your apple-touch-icon or Android icon becomes the app tile. This makes your website feel like a native app. If you have not set this up, the phone shows an ugly screenshot or a blank square — and the customer is less likely to use that shortcut.
AI search results and citations
Here is where it gets interesting for the future of search. When AI tools cite your website as a source in their generated answers, they often display your favicon. This happens in:
- Google AI Overviews — source links at the bottom include favicons
- Perplexity — citation panels show favicons prominently alongside source names
- ChatGPT — web browsing citations display favicons when linking to sources
- Bing Copilot — source references include the site’s favicon
- Google Gemini — web-grounded answers show source favicons
As AI search grows, your favicon becomes a brand touchpoint in places that did not exist two years ago. Businesses that have a distinctive, professional favicon stand out in these AI citation panels. Businesses that have a generic globe or no favicon at all look anonymous — even when the AI is recommending them.
Browser history
When someone opens their browser history to find a page they visited earlier, your favicon helps them spot your site quickly in a long list of URLs. It is a small convenience, but convenience is what brings people back.
Social media and messaging previews
Some social platforms and messaging apps show the favicon in link previews. When someone shares your URL in a Viber group, a Facebook message, or a Slack channel, the favicon can appear as part of the link card. It is one more place where your brand gets a tiny but meaningful visual presence.
Five favicon mistakes that make your site look amateur.
1. No favicon at all
This is Bella’s original problem. A missing favicon means the browser shows a generic icon — usually a grey globe or a blank document. It screams “this site is unfinished” or “nobody maintains this.” It takes five minutes to fix, so there is no reason to leave it blank.
2. Using your full logo
This was Kristoff’s mistake. Your logo is designed for business cards, headers, and signs — not for 16-pixel squares. When you shrink a detailed logo to favicon size, it becomes an unrecognisable blob. Use a simplified version: a single letter, an icon element, or a bold shape from your logo.
3. Using a generic icon
Dante used a generic globe icon. Some website builders set this as the default, and many business owners never change it. A generic icon is almost as bad as no icon because it does nothing for your brand. It does not help people recognise your site, and it does not differentiate you from the thousands of other sites using the same default.
4. Wrong file format or size
Uploading a JPEG photo as your favicon, or using an image that is not square, creates distortion and quality issues. Stick to PNG (with transparency if needed), ICO, or SVG. Always work with square dimensions.
5. Forgetting the apple-touch-icon
Many business owners set up the basic browser tab favicon but forget the apple-touch-icon (180×180). This means that when an iPhone user saves your site to their home screen, it looks terrible. Using RealFaviconGenerator solves this because it creates all sizes in one go, including the apple-touch-icon.
Set up your favicon today.
- Check your current favicon. Open your website in a browser tab. Look at the icon next to the page title. Is it your brand? Is it a generic globe? Is it blank? If it is not clearly yours, keep reading.
- Decide on your icon. Pick the simplest, boldest element of your brand. A single letter in your brand font. A shape from your logo. A colour block. Keep it simple enough to read at 16 pixels.
- Design at 512×512. Use Canva (free) to create a square canvas at 512×512 pixels. Design your icon. Export as PNG.
- Generate all sizes. Upload your PNG to RealFaviconGenerator.net. Preview across platforms. Download the package.
- Add it to your site. Upload through your platform’s settings (WordPress, Shopify, Wix, Squarespace) or paste the HTML code into your site’s
<head>section if you have a custom site. - Test it. Open your site in a new tab. Check it on your phone. Bookmark it. Make sure the icon appears correctly at every size.
Total time: fifteen to thirty minutes, once. The result lasts for the entire life of your website.
Frequently asked questions about favicons.
What is a favicon?
A favicon is the small icon that appears next to your website name in browser tabs, bookmarks, browser history, and increasingly in Google search results. It is typically a simplified version of your logo or brand mark. The name comes from “favourite icon” because it originally appeared when people bookmarked (favourited) a website.
What size should a favicon be?
You need multiple sizes to cover all devices and contexts. The essential sizes are 16×16 pixels for browser tabs, 32×32 pixels for high-resolution tabs and taskbars, 180×180 pixels for Apple touch icons (when someone saves your site to their iPhone home screen), and 192×192 pixels for Android devices. An SVG favicon is also recommended because it scales perfectly to any size without losing quality.
How do I create a favicon for free?
You can create a favicon for free using Canva (set a custom canvas to 512×512 pixels and design your icon), then use RealFaviconGenerator.net to convert it into all the sizes you need. RealFaviconGenerator also gives you the HTML code to paste into your site. Other free options include Favicon.io and the built-in icon tools in platforms like WordPress, Wix, and Squarespace.
Does a favicon affect SEO?
A favicon is not a direct ranking factor, but it affects SEO indirectly. Google shows favicons next to your site name in mobile search results, making your listing more recognisable and increasing click-through rates. A professional favicon also builds brand trust, and trust signals influence how both people and AI search tools evaluate your site. Sites without favicons look unfinished and less credible.
Why does my favicon look blurry?
A blurry favicon usually means you are using an image that is too large or too detailed for such a tiny space. Favicons display at 16×16 or 32×32 pixels in browser tabs, so fine details and small text become unreadable mush. The fix is to simplify your design: use a single letter, a bold shape, or a stripped-down version of your logo with no text. Start your design at 512×512 pixels, keep it simple, and it will scale down cleanly.
How do I add a favicon to my website?
On WordPress, go to Appearance, then Customize, then Site Identity, and upload your icon. On Shopify, go to Online Store, then Themes, then Customize, then Theme Settings, then Favicon. On Wix and Squarespace, look in your site settings under Favicon. For custom HTML sites, upload your favicon files to your server and add link tags in the head section of your HTML. Tools like RealFaviconGenerator give you the exact code to paste.
Do favicons show up in AI search results?
Yes, and this is becoming more common. When AI search tools like Google AI Overviews, Perplexity, and Bing Copilot cite sources in their answers, they often display the source site’s favicon alongside the link. A recognisable favicon helps your brand stand out in these AI-generated results. ChatGPT also shows favicons when it cites web sources. Having a professional favicon ensures your brand is visually present wherever your site gets mentioned.
Terms used in this article.
- Favicon
- Short for “favourite icon.” The small image that represents your website in browser tabs, bookmarks, search results, and AI citations.
- Apple-touch-icon
- A 180×180 pixel version of your favicon used by Apple devices when someone saves your website to their iPhone or iPad home screen.
- ICO file
- The traditional favicon file format (.ico) that can contain multiple icon sizes in a single file. Still widely supported but being replaced by PNG and SVG.
- SVG (Scalable Vector Graphic)
- A vector image format that scales perfectly to any size without losing quality. The most modern and flexible format for favicons.
- Web app manifest
- A JSON file (site.webmanifest) that tells browsers about your website and how it should behave when added to a mobile home screen, including which icon sizes to use.
- RealFaviconGenerator
- A free online tool that takes a single image and generates all the favicon sizes and formats you need, plus the HTML code to add them to your site.
- Click-through rate (CTR)
- The percentage of people who see your listing in search results and actually click on it. A recognisable favicon can improve this rate.
Bottom line: A favicon is one of the smallest design elements on your website, but it works harder than almost anything else. It represents your brand in browser tabs, bookmarks, Google search results, mobile home screens, and now in AI search citations from ChatGPT, Perplexity, Gemini, and Copilot. It takes fifteen minutes to set up and lasts forever. If you do not have one — or if yours is blurry, generic, or unrecognisable — fix it today. Your brand deserves to be visible in every place it appears.
Want a favicon that actually represents your brand?
A professional web design includes the finishing touches that build trust — favicons, open graph images, consistent branding across every platform. Let’s get your site looking polished everywhere it appears.