Choose the approved mark
A favicon is the small site icon you may see beside a page title. It has less room than a header logo. Gather the approved symbol, wordmark and any approved icon version before making a choice.
| Available artwork | What to try |
|---|---|
| Approved symbol by itself | Place that symbol in the square. |
| Only a wordmark | Check it whole before asking for an icon variation. |
| An intact badge or emblem | Keep its intended structure together. |
Do not crop the first letter from a name and assume you have made an approved new mark. If the full logo fails, name the need for a small icon version.
Check a small square preview
- Make square previews at several small display sizes.
- Try 16, 32 and 48 pixels as comparison views.
- Look at the silhouette first, then the small inside gaps.
- Check edge room so no intended part touches or leaves the square.
- Compare on light and dark tab surfaces.
Those sizes are inspection examples. They do not say that every icon must pass the same visual test. Write down which details disappear. If the name becomes a row of tiny marks, adding more source pixels may not solve the crowded layout.
Keep icons separate from transparent logos
LogoTidy lists icon files in its sample kit.
Sources for this point: LogoTidy sample file kit.
Its standard icons use a white tile and padding. They use the approved symbol when available, otherwise the whole mark. These are different files from the transparent logo overlays. Pick the icon for the site icon field and the overlay for a page placement.
A tile can look different on a dark tab. Check that result instead of treating a white background as an error. Keep both types clearly named.
Give the website the correct icon file
Google Search asks for a square favicon at a crawlable stable URL and a crawlable homepage. It recommends more than 48 by 48 pixels. Search display is not guaranteed.
Sources for this point: Google favicon guide.
- Check which icon types your site accepts.
- Upload the intended icon through the site icon setting.
- Ask your site support for its exact setup steps if that control is missing.
- Open the finished site and check the actual tab icon.
A supplied file still needs to be installed on the website. A search result can take time to change, and a correctly installed icon does not promise that Google will show it.
If the full logo fails at small sizes
Use your notes to request an approved simpler icon. Say which small detail is lost and where the icon appears. Keep the full name in the header where it has room. Do not silently remove a tagline or alter a badge.
Choose a layout for a larger placement
Finish after you have checked the chosen icon on the actual site. Save the approved source and the installed filename so a later update uses the same choice.
Sources
These sources support the points linked above. Each date shows when we checked that source.
- LogoTidy sample file kit
LogoTidy displays example logo files and layouts Checked . - Google favicon guide
Google gives square icon and crawl access rules for Search Checked .