Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - The Surprisingly Exciting World of Favicons

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">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.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> 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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:48 - What are favicons?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Requesting favicons by default /favicon.ico</li> </ul> <pre data-initialized="true" data-gclp-id="1"> <code class="has-line-data" data-line-start="19" data-line-end= "37"><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"> </code> </pre> <p class="has-line-data" data-line-start="38" data-line-end="39"> 07:38 - Sizing favicons</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> 16x16 is OG - don’t do that now</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> You can specify multiple sizes</li> </ul> <p class="has-line-data" data-line-start="42" data-line-end="43"> 09:41 - File formats</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> .ico files</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> .png favicons</li> </ul> <p class="has-line-data" data-line-start="46" data-line-end="47"> 13:40 - Animated favicons</p> <ul> <li class="has-line-data" data-line-start="47" data-line-end="49"> Canvas Base64</li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 11:36 - SVG favicons</p> <p class="has-line-data" data-line-start="51" data-line-end="52"> 17:19 - Dark mode favicons</p> <p class="has-line-data" data-line-start="53" data-line-end="54"> 18:55 - App Coloring</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <code><meta name="theme-color" content="#ffffff"></code></li> <li class="has-line-data" data-line-start="55" data-line-end="57"> Isn’t there a new Safari version?</li> </ul> <h2 class="code-line" data-line-start="57" data-line-end="58"> <a id="Links_57" name="Links_57"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://en.wikipedia.org/wiki/Favicon">https://en.wikipedia.org/wiki/Favicon</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://caniuse.com/">https://caniuse.com/</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://keycode.info/">https://keycode.info/</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons"> https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://fav.farm/">https://fav.farm/</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://deno.land/">https://deno.land/</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://uses.tech/">https://uses.tech/</a></li> <li class="has-line-data" data-line-start="65" data-line-end="67"> <a href="https://missiveapp.com/">Missive</a></li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Hasty Treat - The Surprisingly Exciting World of Favicons

Poslechněte si podcast