google-chrome 2 years ago

Thinking on ways to solve SVG Favicon

In today's GUI Challenge, Adam Argyle shares thinking on a way to build an adaptive favicon with SVG. SVG not only delivers an infinitely scalable icon, it also allows inlining styles that can hook into CSS media queries like the light and dark preference queries.

0:00 - Introduction

0:36 - Overview

1:59 - Light and Dark

2:48 - Loading

3:22 - Markup

4:45 - SVG preparation

5:31 - Outro


Read along

https://web.dev/building-an-adaptive-favicon


Try a demo

https://gui-challenges.web.app/svg-favicon/dist


Get the source

https://github.com/argyleink/gui-challenges/tree/main/svg-favicon

Google
2008 - present