A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question β†’
Wes Bos

Wes Bos

XL5G3 Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, NX2V1, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 373: Hasty Treat - The Surprisingly Exciting World of Favicons

0:00

LOUDNESS

Jul 26th, 2021

Hasty Treat - The Surprisingly Exciting World of Favicons

πŸ‘‡ Download Show✏️ Edit Show Notes

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
    <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?

Tweet us your tasty treats!