Why preview a favicon
A favicon that looks fine in a design tool can turn into a smudge at 16 pixels, or vanish on a dark tab. Looking at it in context before you publish saves a round of fixes later.
What the preview shows
- Browser tabs: a light tab and a dark tab, drawn with a sharp-screen version of the icon.
- Bookmarks bar: the icon at its small size next to your site name.
- Google search result: an approximate mock of a result with your icon, title and description. Type your own site name, domain and text to see it with your words.
- iPhone and Android: the 180 pixel Apple touch icon with iOS rounded corners, and the 192 pixel icon in a round Android mask.
- Real size and zoom: the icon at 16, 32 and 48 pixels, and 16 pixels enlarged eight times so you can see what really remains.
What to look for
- Can you still tell what the icon is at 16 pixels?
- Does it stand out on the dark tab, and on the light one?
- Does a transparent background look right, or does it need a color?
- Does the iPhone icon have enough padding, so the rounded corners do not cut the mark?
About the Google preview
Google decides what to show in search results, and it may crop the icon into a circle or choose a different image. The mock is a guide to how a result can look, not a promise. To meet the basic rule, your favicon should be square and a multiple of 48 pixels, which the favicon size tool can check.
Related tools
Make an icon with the favicon generator or favicon from image, make the iPhone file with the Apple touch icon generator, and read the favicon size guide. Your image is not uploaded, because the preview is drawn in your browser.