jahed.dev

Outline Your Favicon

In the new era of "Dark Mode" and website's rediscovering the value of alternative stylesheets, it's a good time to mention a small 16x16 pixel problem.

GitHub's Favicon using Firefox in Dark Mode. GitHub is just one popular example, a lot of websites have this issue.

If your website has a favicon, please make sure the logo is distinguishable in a variety of background colours. I'm no colour guru but the easiest way to do this is to use a coloured background of any shape with an opposing foreground colour. Be it dark on light or light on dark. By doing this, you'll have a standard canvas to present your logo. Never rely on the system's background.

Thanks for reading.