Playing: 373: Hasty Treat - The Surprisingly Exciting World of Favicons
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Jul 26th, 2021
Hasty Treat - The Surprisingly Exciting World of Favicons
π Download ShowβοΈ Edit Show NotesIn 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
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
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
<meta name="theme-color" content="#ffffff">
- 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