Favicon editor: preview icons in tabs and Google

6 min read

A favicon is rarely judged at the size you designed it. Visitors see it at about 16 pixels in a browser tab, squeezed next to your site name in Google, on a light tab bar one moment and a dark one the next. An icon that looks sharp in a 512-pixel design file can still turn into an unreadable smudge in all four places — which is why the desktop section of a favicon editor should show you those places while you work, not after you have installed the files.

That is what the Classic and SVG favicons section of EasyFaviconGenerator does. As soon as your picture is loaded, it builds four live previews — a light browser tab, a dark browser tab, and a light and a dark Google result — and rebuilds them every time you adjust a setting. The example page title and address in the mock-ups are deliberately generic: the icon is the only thing being judged. Everything happens in your browser, so you can experiment with an unreleased logo without uploading it anywhere.

The four previews, and what each one catches

  • Light browser tab. Your regular icon as most desktop visitors will first see it. This is the 16-pixel legibility test: one recognisable silhouette and no fine detail that disappears when shrunk.
  • Dark browser tab. The same tab on a dark tab bar. This is where dark logos, thin strokes and transparent icons quietly vanish. Until you define a dark icon (below), this preview honestly shows your regular icon — exactly what users would get without one.
  • Google result, light and dark. Your icon beside a site name in a search result, in both themes. Search shows the icon even smaller relative to the text around it, and Google may use the 96x96 PNG fallback rather than the SVG, so this preview favours simple, high-contrast artwork over detail.

The four views update together, which is the point: a change that fixes one often breaks another. Adding a white background makes a dark logo readable in a dark tab, but check the light Google result afterwards — the icon may now look like a small white box with a timid mark inside it. Read all four at a glance before moving on.

Tuning the regular icon

The regular icon is the default everywhere: it feeds the SVG favicon, the 96x96 PNG and the 16, 32 and 48 pixel images inside favicon.ico. It has three tools:

  • Use the icon as is. The right choice when the artwork was designed for small sizes — a bold, self-contained mark with enough contrast against both light and dark surroundings.
  • Add a plain background and margins. Put the artwork on a solid background of your own instead of leaving it floating on a tab colour you do not control. Choose the colour with the picker or hex field — the palette is extracted from your own picture, so brand colours are one click away — then set the image size to give the mark breathing room and round the corners if the mark wants a tile. This is the standard fix for transparent logos that disappear on one theme or the other.
  • Change brightness. Darken the artwork in steps when it is too pale for light tabs. Brightness cannot rescue a low-contrast silhouette, but it is a quick cure for a washed-out one.

If a bitmap logo looks soft in the previews, the generator options further down the page also let you change the scaling algorithm — smooth, Lanczos (sharper) or nearest neighbour for pixel art — and the previews reflect that choice too. Judge the result in the tab mock-up, not in the large source image.

Defining a dark icon

When the regular icon cannot serve both themes, define a dedicated dark icon. The Dark icon panel offers two ways in:

  • Start from the regular icon and give it its own adjustments: a different background and margins, brighter steps instead of darker ones, or inverted colours. Same silhouette, retuned for a dark tab bar — usually all a dark-mode variant needs.
  • Use another icon to supply separate artwork made specifically for dark themes, as an SVG, PNG, JPEG or WebP file. Use this when the dark version is a genuinely different drawing, not just a brighter one.

Either way, the dark browser and dark Google previews switch to the dark variant immediately, so you can compare it against the light pair side by side. You can switch back to the regular icon at any time. When you generate the package, both variants are embedded in favicon.svg and selected with a prefers-color-scheme media query inside the file — the browser or operating system theme makes the choice, not your website's own dark-mode toggle. Our guide to SVG favicons and dark mode explains that mechanism and its limits.

One warning the previews make obvious: only the SVG can switch. The PNG and ICO fallbacks are fixed pictures, so design the regular icon to survive both themes reasonably well — a deliberate background of its own beats transparency — and treat the dark variant as the refinement modern desktop browsers add on top. Safari will keep showing the regular design: Safari 18 and earlier use the PNG or ICO, and Safari 26 uses the SVG but does not yet apply the prefers-color-scheme switch inside it. Check that the regular icon still works there.

A five-minute desktop workflow

  1. Start with the light tab. If the mark is not recognisable there at a glance, simplify the artwork first; no background or brightness setting fixes a crowded logo.
  2. Fix transparency deliberately. If either theme swallows the icon, add a plain background, shrink the artwork inside it with the image-size slider, and re-check all four previews.
  3. Add the dark variant only if you need one. Derive it from the regular icon, brighten it, and compare the dark pair against the light pair. Keep the same shape — visitors should never wonder whether the site changed.
  4. Read the Google previews last. They are the least forgiving: small icon, unfamiliar surroundings, no page context. If it works there, it works in a tab.
  5. Glance at the other platforms before downloading. The same editor previews the iOS home screen and the Android home, splash and app-switcher screens further down the page, each with its own icon settings — a desktop fix does not automatically carry over, and Android's shape masking and iOS's black fill for transparency are easier to catch now than after release.

What a preview cannot promise

The mock-ups are faithful renderings of your generated files at real sizes, but they are still mock-ups. Browsers cache favicons aggressively, so after installing a new icon your own tab may keep showing the old one for days — versioning the icon URLs (an option in the generator) and testing in a private window separate a caching problem from a design problem. Rendering also differs slightly between browsers, and Google refreshes the icon in its results on its own schedule.

So treat the live previews as the design tool and verify the deployed result afterwards: run the live site through the favicon checker, which fetches the installed files, validates them and shows them in tabs, search results and on phones, and cross-check anything surprising against the compatibility matrix. If you are still deciding which files to ship, the favicon sizes and formats cheat sheet covers the full package.

The habit worth keeping is the five-minute one: light tab, dark tab, light Google result, dark Google result, all before you download. Favicons fail quietly and at small sizes; previewing them where they will actually live is how you notice before your visitors do. Try it with your own logo — drop the picture in and watch all four previews at once.

All favicon articles