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 https://en.wikipedia.org/wiki/Favicon https://caniuse.com/ https://keycode.info/ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons https://fav.farm/ https://deno.land/ https://uses.tech/ Missive Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets.
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 - SponsorSanity.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 - SponsorLogRocket 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 Notes03: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?
- https://en.wikipedia.org/wiki/Favicon
- https://caniuse.com/
- https://keycode.info/
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons
- https://fav.farm/
- https://deno.land/
- https://uses.tech/
- Missive
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets