DEV Community

Syntax - Tasty Web Development Treats

Hasty Treat - The Surprisingly Exciting World of Favicons

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

03:48 - What are favicons?

  • Requesting favicons by default /favicon.ico

07:38 - Sizing favicons

  • 16x16 is OG - don’t do that now
  • You can specify multiple sizes

09:41 - File formats

  • .ico files
  • .png favicons

13:40 - Animated favicons

  • Canvas Base64

11:36 - SVG favicons

17:19 - Dark mode favicons

18:55 - App Coloring

  • Isn’t there a new Safari version?
Links Tweet us your tasty treats!

Episode source