Websites · Glossary
What is a favicon?
A favicon is the small icon that represents a website in browser tabs, bookmarks, history lists and, on mobile, some search results. It is usually a simplified logo or a single letter in the brand colour, supplied as a square image, and it helps people find your tab among many and recognise your site at a glance.
The name comes from favourites, the old word for bookmarks. Today the same small square also feeds home screen icons and app style shortcuts.
Nuwan Madhusanka · Co-founder
3 min read · Published
Where a favicon appears
In the browser tab beside the page title, in bookmarks and history, in the address bar on some browsers, in Google results on mobile beside the site name, and, when a site can be installed, as the basis for its home screen icon. Each place shows it small, often 16 or 32 pixels across.
What makes a good one
A simple, bold shape that still reads at 16 pixels: a single letter, a monogram or the most recognisable part of a logo, on a solid background. Detailed logos with thin lines and words turn into a smudge at tab size, so most brands use a simplified mark.
Sizes and formats
Start from a square image of at least 512 by 512 pixels and let the platform make smaller sizes. Browsers accept PNG, ICO and SVG favicons. Installed web apps need larger icons, commonly 192 and 512 pixels, and a maskable version with padding so phone shapes do not crop it.
Common mistakes
Uploading a wide rectangular logo that gets squashed, a transparent icon that disappears on dark tabs, an icon with tiny text, and forgetting it entirely, which leaves a generic globe that makes the tab look unfinished.
Where it shows up in OneCraft
The Search and sharing card in site settings has a Favicon picker. Without one, the published site uses the first letter of the site title in your brand colour as an SVG icon. For sites set up to install as an app, the favicon also becomes the home screen icons, including a maskable one, centred on your background colour.
Questions people ask
What size should a favicon be?
Upload a square image of at least 512 by 512 pixels so every size can be made from it. Browsers display it at 16 or 32 pixels, and installed web apps use larger versions such as 192 and 512 pixels. A clean square original avoids blurry or stretched icons.
Does a favicon help SEO?
Not as a ranking factor. Google shows favicons beside results on mobile, so a clear icon helps your listing stand out and look trustworthy, which can lift clicks. Google asks that the favicon represent your brand and be a multiple of 48 pixels square.
Can I use my logo as a favicon?
Yes, if it reads at a tiny size. Most logos need simplifying: use the symbol without words, or the first letter of the name in your brand colour. Test it by shrinking it to 16 pixels and checking it is still recognisable.
Why is my favicon not showing?
Browsers cache favicons stubbornly, so an old one or none can linger. Check that the site was published after setting it, open the site in a private window, and give search engines time, since they refresh favicons on their own schedule.
Should a favicon have a transparent background?
A solid background is safer. Transparent icons can vanish against dark browser tabs or clash with home screen backgrounds. A filled square or circle in your brand colour with a light mark on top works on every background, in light and dark browser themes alike.
Make one with websites
The button opens the generator with this use case already described. Change the wording to match your own.
Create a website with OneCraftRelated questions
- What is an OG image?What is an OG image? The picture shown when a link to your site is shared on social media or in messages, set by an Open Graph tag. Size, content and fixes.
- What is a meta description?What is a meta description? The short summary of a page in its HTML that search engines may show under the title. How long to make it and how to write one.
- What is a PWA?What is a PWA? A website that can be installed to a phone home screen and opened full screen like an app, with an icon and an offline page. How it works.
Written and checked by the OneCraft team. Last checked .