When someone has ten browser tabs open, how do they find your microsite again? A favicon is the answer — that small icon in the browser tab that makes your site instantly recognizable.
Adding a favicon to your microsite is a small detail that makes a big difference in how professional and polished your site appears.
Ready to go digital?
Discover how Zoomforth can help you.
Join 500+ enterprise sales, marketing and HR teams building trackable microsites — no developer needed.
Rated 4.5/5 on G2 · Trusted by Fortune 500 teams
What is a favicon and why does it matter?
A favicon (short for “favorite icon”) is the small image that appears in browser tabs, bookmarks, and history lists. It’s typically 16 by 16 or 32 by 32 pixels — small enough to fit in the tightest corners of the browser interface.
Favicons matter for three reasons:
- Branding. Every time someone looks at their browser tabs, they see your icon. Consistent favicon use reinforces brand recognition.
- Professionalism. A missing favicon signals that the site wasn’t finished. A custom favicon shows attention to detail.
- Usability. When users have multiple tabs open, favicons help them navigate back to your microsite quickly without reading each tab title.
Favicon best practices
Keep it simple
At 16x16 pixels, complex details become invisible. The best favicons are simple: a single letter, a simplified logo, or a distinctive symbol. Think about how Twitter uses a bird, Google uses a G, and Slack uses a hash symbol.
Use brand colors
Your favicon should use your brand colors. A favicon in your brand colors reinforces the connection between the icon and your company, even at small sizes.
Test at actual size
What looks good at 100 pixels may be illegible at 16 pixels. Before finalizing your favicon, view it at actual browser tab size. If you can’t distinguish the key element at that size, simplify the design.
Support multiple formats
For the broadest browser compatibility, provide your favicon in these formats:
| Format | Size | Use case |
|---|---|---|
| ICO | 32x32 | Legacy browser support |
| PNG | 32x32 | Modern browsers |
| PNG | 48x48 or 64x64 | High-DPI displays |
| SVG | Scalable | Latest browsers |
How to create a microsite favicon
You don’t need design software to create a professional favicon. Here are practical options:
- Use a favicon generator. Upload your logo to a favicon generator tool, and it will create all the required sizes and formats automatically.
- Start from a vector. If you have a vector version of your logo, export a simplified version at the required sizes.
- Use a letter mark. A single letter in your brand color creates a clean, recognizable favicon. Use your brand font for consistency.
How to add a favicon to your microsite
In Zoomforth
- Open your site settings in the Zoomforth editor.
- Navigate to the theme or branding section.
- Find the favicon field and upload your icon file.
- Save and publish your site. The favicon will appear in browser tabs immediately.
Zoomforth handles the HTML markup automatically — no coding required. You can also set a default favicon at the theme level so every microsite built with that theme uses the same icon.
In other microsite builders
Most enterprise microsite builders follow a similar pattern. Look for favicon or site icon settings in the theme editor, branding section, or page settings. If your builder supports custom HTML, you can add a favicon by inserting a link tag in the head section of your page.
Testing your favicon across browsers
After adding your favicon, verify it appears correctly in:
- Google Chrome — the favicon appears in the tab and bookmarks bar
- Firefox — appears in tabs, bookmarks, and the address bar
- Safari — appears in tabs and bookmarks
- Microsoft Edge — appears in tabs and bookmarks
If the favicon doesn’t appear immediately, try clearing your browser cache or opening the page in a private window.
Ready to build a professional microsite with custom branding? Request a demo.
Frequently asked questions
What is a favicon?
A favicon (short for favorite icon) is the small icon displayed in browser tabs, bookmarks, and history next to your page title. It's typically 16x16 or 32x32 pixels and helps users identify your microsite at a glance among multiple open tabs.
Why does a microsite need a favicon?
A favicon reinforces your brand every time someone looks at their browser tabs. It makes your microsite look professional and helps users find your page quickly when they have many tabs open. It also appears in bookmarks and browser history, making your site easier to identify when users return to it.
What format should a favicon be?
The traditional format is .ico (16x16 or 32x32 pixels), but modern browsers also support PNG and SVG favicons. For best compatibility, use a 32x32 PNG or ICO file. If you want your favicon to look sharp on high-DPI displays, include a 48x48 or 64x64 version as well. SVG favicons are supported in modern browsers and scale perfectly to any size.
How do I add a favicon in Zoomforth?
In Zoomforth, you can set a custom favicon in the theme editor or in individual site settings. Navigate to your site settings, find the favicon field, and upload your icon file. Zoomforth automatically generates the correct HTML markup. The favicon will appear in browser tabs once the site is published.
What makes a good favicon design?
A good favicon is simple, recognizable at small sizes, and aligned with your brand. Use a single letter, a simplified logo mark, or a distinctive symbol. Avoid text, fine details, and complex gradients that become illegible at 16x16 pixels. Test your favicon at actual size in a browser tab before finalizing.
