Thinking on ways to solve SVG FAVICON

Channel:
Chrome for Developers
Subscribers:
792,000
Published on ● Video Link: https://www.youtube.com/watch?v=4pJahmCR8kQ


Duration: 6:14
14,781 views
762

In today's GUI Challenge, @AdamArgyleInk 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.

Chapters:
0:00 - Introduction
0:36 - Overview
1:59 - Light and Dark
2:48 - Loading
3:22 - Markup
4:45 - SVG preparation
5:31 - Outro

Resources:
Read along → https://goo.gle/3uASh1s
Try a demo → https://goo.gle/3GAzzt4
Get the source → https://goo.gle/3ov8x08

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2022-03-29What key was pressed? (You won't believe how keyboard events work) | HTTP 203
2022-03-24Chrome 100 - What’s New in DevTools
2022-03-23Cache your fonts, images & pages - Unpacking the Workbox
2022-03-18FLEDGE demo walkthrough | What is the Privacy Sandbox?
2022-03-16Thinking on ways to solve a LOADING BAR
2022-03-15Building VR and AR experiences using HTML | HTTP 203
2022-03-10CSS Grid debugging tools | DevTools Tips
2022-03-08Chrome 99 - What’s New in DevTools
2022-03-01New in Chrome 99: CSS Cascade Layers, Show Picker, and more!
2022-02-10CSS Flexbox debugging tools | DevTools Tips
2022-02-09Thinking on ways to solve SVG FAVICON
2022-02-01New in Chrome 98: Per-element opt-out for auto-dark, COLRv1, and more!
2022-01-27Chrome 98 - What’s New in DevTools
2022-01-19Thinking on ways to solve a DARK/LIGHT THEME SWITCH
2022-01-13Discover and fix low contrast text with DevTools | DevTools Tips
2022-01-12Workbox TypeScript - Unpacking the Workbox
2022-01-04New in Chrome 97: Web Transport, Script type Detection, and more!
2022-01-04Cross-fading DOM elements | HTTP 203
2022-01-03Chrome 97 - What’s New in DevTools
2021-12-30Record and replay user flow with the Recorder panel | DevTools Tips
2021-12-27Generating your color palette in CSS | HTTP 203


Tags:
purpose: Educate
pr_pr: Chrome
series: GUI Challenges
type: Screencast (0-10min)
GDS: Yes
thinking on ways to solve svg favicon
svg favicon
svg favicon tutorial
intro to svg favicon
solving svg favicon
what is svg favicon
gui challenges
css
css tutorial
how to use css
what is css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle