A Proper Browser Tab Icon, Without Designing One
Every site now has a favicon: the small icon in a browser tab, a bookmark and a phone home screen. It is generated from your initials in your accent color, and you can replace it with your own image.
Why bother with a 32 pixel square
Because of where it appears. Somebody with eleven tabs open sees your icon and not your title. Somebody who bookmarked your site sees it in a list. Somebody who saved it to their phone home screen sees it every time they unlock the phone.
The default is a generic gray shape, and it reads exactly like a site nobody finished. It is a small thing that is disproportionately visible.
What is generated
Your initials, set in your site's heading typeface, in your accent color from the color scheme picker, on a plain background. Rendered at every size a browser or device might ask for, including the larger ones used for home screen icons.
It is not exciting. It is correct, consistent with your site, and considerably better than the alternative.
If you want to upload your own
Three rules, learned the hard way.
- It must work at 16 pixels. Not a shrunken logo. A cropped headshot becomes a beige smudge. A single letter or a simple shape survives.
- High contrast. It appears against light and dark browser chrome depending on the person's settings.
- Square, and generous with margin. Some platforms round the corners off and will take a bite out of anything near the edge.
Test it properly
Open your site, then open ten other tabs, then look at the row. That is the actual viewing condition and it is the only test that means anything. Most favicons that fail, fail here rather than in isolation.
Related
Part of the same set of small finishing touches as social cards and page thumbnails. The wider point is in brand identity.
Create your free actor website and it gets one automatically.
