37 Mentions
“`prefers-color-scheme` in SVG favicons for dark mode icons” by @tomayac 👉 blog.tomayac.com/2019/09/21/pre…
`prefers-color-scheme` in SVG favicons for dark mode icons blog.tomayac.com/2019/09/21/pre…
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="http://css-tricks.com/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode! <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: yellow; stroke: black; stroke-width: 3px; } @media (prefers-color-scheme: dark) { circle { fill: black; stroke: yellow; } } </style> <circle cx="50" cy="50" r="47"/> </svg> Safari also supports SVG, but it’s different… <link rel="mask-icon" href="http://css-tricks.com/favicon.svg" color="#990000"> You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what. The post Dark Mode Favicons appeared first on CSS-Tricks. Source link
Dark Mode Favicons Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a Safari also supports SVG, but it's different... You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what. The post Dark Mode Favicons appeared first on CSS-Tricks. Share this: Facebook LinkedIn Reddit Twitter Tumblr Pinterest Related
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a Safari also supports SVG, but it's different... You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what.
Chrome soon to support #SVG favicons with dark mode styles 🌗 blog.tomayac.com/2019/09/21/pre…
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode! <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: yellow; stroke: black; stroke-width: 3px; } @media (prefers-color-scheme: dark) { circle { fill: black; stroke: yellow; } } </style> <circle cx="50" cy="50" r="47"/> </svg> Safari also supports SVG, but it’s different… <link rel="mask-icon" href="/favicon.svg" color="#990000"> You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what.
Applying prefers-color-scheme to SVG favicons: blog.tomayac.com/2019/09/21/pre… #webdev #svg #a11y
Noice blog.tomayac.com/2019/09/21/pre…
`prefers-color-scheme` in SVG Favicons for Dark Mode Icons: blog.tomayac.com/2019/09/21/pre…
なるほど / `prefers-color-scheme` in SVG favicons for dark mode icons blog.tomayac.com/2019/09/21/pre…
`prefers-color-scheme` in #SVG favicons for dark mode icons ~ blog.tomayac.com/2019/09/21/pre…
Since Chrome will soon be supporting SVG favicons, and a lot of people like dark mode, you can soon provide a dark mode favicon in Chrome, thanks to @tomayac - blog.tomayac.com/2019/09/21/pre…
GitHub needs a dark-mode favicon blog.tomayac.com/2019/09/21/pre…
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way. Here’s the code for how to add favicons to your site: <link rel="icon" type="image/svg+xml" href="http://css-tricks.com/favicon.svg"> <link rel="alternate icon" href="http://css-tricks.com/favicon.ico"> <link rel="mask-icon" href="http://css-tricks.com/safari-pinned-tab.svg" color="#ff8a01"> If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation. Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. Here’s more detail on the current level of SVG favicon support: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 80 No No 13.4 Why SVG? You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you. Ease of authoring It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. Future-proofing Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. Performance SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts! Tricks Another cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #272019; } </style> <!-- etc. --> </svg> Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries. Emoji Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept. Dark Mode support Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries. <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg> For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat! Other media queries Dark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider: Use light-level to desaturate favicon colors in a low-light environment. Use inverted-colors to “flip” inverted colors to preserve branding, or to ensure a photorealistic favicon looks as intended. Use prefers-reduced-motion to remove favicon animation. Ideally, we’d avoid animating favicons in the first place, as they can be a trigger for ADHD and other related disabilities. Use forced-colors and/or a Windows High Contrast Mode media query to make sure the favicon holds up visually in a high contrast color context. Remember to use color keywords to keep the favicon’s colors dynamic! A mockup of how these media query-based adjustments could work.Keep it crisp Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape: When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect: A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position. Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget. Go the extra mile In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers. If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net. It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999. ¹ I haven’t been able to determine if Safari is going to implement SVG favicon support, but I hope they do. Has anyone heard anything? The post SVG, Favicons, and All the Fun Things We Can Do With Them appeared first on CSS-Tricks. Source link
FacebookTweetPinShareLinkedIn Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks.One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way.Here’s the code for how to add favicons to your site:<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="alternate icon" href="/favicon.ico"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01">If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation.Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit.Here’s more detail on the current level of SVG favicon support: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 80 No No 13.4 Why SVG?You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you.Ease of authoringIt’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in.Future-proofingRetina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. PerformanceSVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts!TricksAnother cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element.<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #272019; } </style> <!-- etc. --> </svg>Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries.EmojiLea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept.Dark Mode supportBoth Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries.<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg>For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat!Other media queriesDark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider:Use light-level to desaturate favicon colors in a low-light environment. Use inverted-colors to “flip” inverted colors to preserve branding, or to ensure a photorealistic favicon looks as intended. Use prefers-reduced-motion to remove favicon animation. Ideally, we’d avoid animating favicons in the first place, as they can be a trigger for ADHD and other related disabilities. Use forced-colors and/or a Windows High Contrast Mode media query to make sure the favicon holds up visually in a high contrast color context. Remember to use color keywords to keep the favicon’s colors dynamic! A mockup of how these media query-based adjustments could work.Keep it crispAnother important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape:When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect:A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position.Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget.Go the extra mileIn addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers.If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net.It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999. ¹ I haven’t been able to determine if Safari is going to implement SVG favicon support, but I hope they do. Has anyone heard anything?The post SVG, Favicons, and All the Fun Things We Can Do With Them appeared first on CSS-Tricks.source https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/ FacebookTweetPinShareLinkedIn
Les favicons sont les petites icônes que vous voyez dans l’onglet de votre navigateur. Ils vous aident à comprendre de quel site il s’agit lorsque vous parcourez les signets et les onglets ouverts de votre navigateur. Ils font partie intégrante de l’histoire d’Internet et sont capables d’effectuer quelques trucs sympas. Une toute nouvelle astuce est la possibilité d’utiliser SVG comme favicon. C’est quelque chose qui la plupart des navigateurs modernes prennent en charge, avec plus de soutien en cours de route. Voici le code pour ajouter des favicons à votre site: Si un navigateur ne prend pas en charge un favicon SVG, il ignorera la première déclaration d’élément de lien et passera à la seconde. Cela garantit que tous les navigateurs qui prennent en charge les favicons peuvent profiter de l’expérience. Vous pouvez également remarquer la valeur d’attribut alternative pour notre rel déclaration dans la deuxième ligne. Cela communique par programme au navigateur que le favicon avec un format de fichier qui utilise .ico est spécifiquement utilisé comme une présentation alternative. Après les favicons se trouve une ligne de code qui charge une autre image SVG, une appelée safari-pinned-tab.svg. C’est pour soutenir Fonctionnalité d’onglet épinglé de Safari, qui existait avant que les autres navigateurs ne prennent en charge les favicon SVG. Il y a des fichiers supplémentaires que vous pouvez ajouter ici pour améliorer votre site pour différentes applications et services, mais plus à ce sujet dans un instant. Voici plus de détails sur le niveau actuel de prise en charge des favicon SVG: Bureau Chrome Firefox C’EST À DIRE Bord Safari 80 41 Non 80 TP Mobile / Tablette Android Chrome Android Firefox Android iOS Safari 80 Non Non 13,4 Pourquoi SVG? Vous vous demandez peut-être pourquoi cela est nécessaire. le .ico Le format de fichier existe depuis toujours et peut prendre en charge des images jusqu’à 256 × 256 pixels. Voici trois réponses pour vous. Facilité de création C’est pénible à faire .ico des dossiers. Le fichier est un format propriétaire utilisé par Microsoft, ce qui signifie que vous aurez besoin outils spécialisés pour les faire. SVG est un standard ouvert, ce qui signifie que vous pouvez les utiliser sans aucun autre outil ni verrouillage de la plate-forme. La pérennité Rétine? 5k? 6k? Lorsque nous utilisons un fichier SVG indépendant de la résolution pour un favicon, nous garantissons que nos favicons sont nets sur les futurs appareils, indépendamment de la taille de leurs écrans. Performance Les SVG sont généralement de très petits fichiers, en particulier par rapport à leurs homologues d’images raster – encore plus si vous les optimisez au préalable. En utilisant uniquement un favicon de 16 × 16 pixels comme solution de rechange pour les navigateurs qui ne prennent pas en charge SVG, nous fournissons une combinaison qui bénéficie d’un haut niveau de prise en charge avec une taille de fichier plus petite pour démarrer. Cela peut sembler un peu extrême, mais en ce qui concerne les performances Web, chaque octet compte! Des trucs Une autre chose intéressante à propos de SVG est que nous pouvons y intégrer directement du CSS. Cela signifie que nous pouvons faire des choses amusantes comme les ajuster dynamiquement avec JavaScript, à condition que le SVG soit déclaré en ligne et non intégré à l’aide d’un img élément. Étant donné que les favicons SVG sont intégrés à l’aide du link élément, ils ne peuvent pas vraiment être modifiés à l’aide de JavaScript. Nous pouvons cependant utiliser des choses comme les emoji et les requêtes multimédias. Emoji Léa Verou eu une idée géniale sur l’utilisation d’emoji à l’intérieur de SVG text élément pour faire un favicon rapide avec un fond transparent qui résiste aux petites tailles. Maintenant que tous les navigateurs modernes prennent en charge les favicons SVG, voici comment transformer n’importe quel emoji en favicon.svg: https://t.co/TJalgdayix« viewBox = » 0 0 100 100 « > 💩 Utile pour les applications rapides lorsque vous ne pouvez pas vous soucier de concevoir un favicon! pic.twitter.com/S2F8IQXaZU – Léa Verou (@LeaVerou) 22 mars 2020 En réponse, Chris Coyier a concocté une petite démo soignée qui vous permet de jouer avec le concept. Prise en charge du mode sombre Tous les deux Thomas Steiner et Mathias Bynens indépendamment tombé sur l’idée que vous pouvez utiliser le prefers-color-scheme requête multimédia pour fournir un support pour le mode sombre. Ce travail est construit à partir de Exploration par Jake Archibald des SVG et des requêtes médiatiques. Pour les navigateurs compatibles, ce code signifie que notre favicon SVG en forme d’étoile changera sa couleur de remplissage du noir au blanc lorsque mode sombre est activé. Très soigné! Autres requêtes médiatiques La prise en charge du mode sombre m’a fait réfléchir: si les SVG peuvent prendre en charge prefers-color-scheme, que pouvons-nous faire d’autre avec eux? Bien que le soutien à Requêtes médias de niveau 5 peut-être pas encore là, voici quelques idées à considérer: Une maquette de la façon dont ces ajustements basés sur les requêtes multimédias pourraient fonctionner.Gardez-le net Un autre aspect important d’une bonne conception de favicon est de s’assurer qu’ils sont beaux dans la petite zone d’onglet du navigateur. Le secret est de créer les chemins de l’image vectorielle aligner sur la grille de pixels, le guide utilisé par un ordinateur pour transformer les mathématiques SVG en bitmap que nous voyons sur un écran. Voici un exemple simplifié utilisant une forme carrée: Lorsque les points vectoriels du carré s’alignent sur la grille de pixels du plan de travail, l’effet d’anticrénelage qu’un ordinateur utilise pour lisser les formes n’est pas nécessaire. Lorsque les points vectoriels ne sont pas alignés, nous obtenons un effet de « maculage »: La position d’un point vectoriel peut être ajustée sur la grille de pixels à l’aide d’un programme d’édition vectorielle tel que Figma, Esquisser, Inkscape, ou Illustrateur. Ces programmes exportent également des SVG. Pour ajuster l’emplacement d’un point vectoriel, sélectionnez chaque nœud avec un outil de sélection de précision et faites-le glisser en position. Certaines icônes plus compliquées devront peut-être être simplifiées, afin de bien paraître à une si petite taille. Si vous cherchez une bonne introduction à cela, Jeremy Frank a écrit un très bon article en deux parties sur Vidget. Allez plus loin En plus des favicons, il existe un tas de façons différentes (et malheureusement propriétaires) d’utiliser des icônes pour améliorer son expérience. Cela inclut des éléments tels que l’icône de l’onglet épinglé susmentionnée pour Safari¹, l’application de chat se déroule, une vignette du menu Démarrer de Windows épinglée, aperçus des médias sociaux et lanceurs d’écran d’accueil. Si vous cherchez un bon endroit pour commencer avec ce genre d’améliorations, j’aime vraiment realfavicongenerator.net. C’est beaucoup, mais cela garantit un support robuste.Une chose amusante sur l’histoire du favicon: Internet Explorer a été le premier navigateur à les prendre en charge et ils se sont faufilés à la 11e heure par un développeur nommé Bharat Shyam: Comme le raconte l’histoire, tard un soir, Shyam travaillait sur sa nouvelle fonctionnalité de favicon. Il a appelé le chef de projet junior Ray Sun pour jeter un coup d’œil. Shyam a commenté: «C’est bien, non? Check it in? », Demandant l’autorisation de vérifier le code dans la base de code d’Internet Explorer afin qu’il puisse être publié dans la prochaine version. Sun n’y a pas trop pensé, la fonctionnalité était cool et donnerait clairement un avantage à IE. Il a donc dit à Shyam d’aller de l’avant et de l’ajouter. Et juste comme ça, le favicon a fait son chemin dans Internet Explorer 5, qui allait devenir l’une des plus grandes versions de navigateur que le Web ait jamais vues. Le lendemain, Sun a été réprimandé par son manager pour avoir laissé la fonctionnalité passer si vite. Il s’avère que Shyam avait spécifiquement attendu plus tard dans la journée, sachant qu’un gestionnaire de programme moins expérimenté lui donnerait un laissez-passer. Mais à ce moment-là, le code avait été fusionné. Soit dit en passant, vous seriez surpris du nombre de fonctionnalités de navigateur relativement importantes qui se sont glissées dans des versions comme celle-ci. De Comment nous avons obtenu le Favicon par Jay Hoffmann Je suis heureux de voir la plate-forme jeter un peu d’amour aux favicons. Ils sont depuis longtemps l’un de mes petits détails de conception préférés, et je suis ravi qu’ils deviennent plus réactifs aux besoins des utilisateurs. Si vous avez un moment, pourquoi ne pas insérer un favicon SVG dans votre projet de la même manière que Bharat Shyam l’a fait en 1999.
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way. Here’s the code for how to add favicons to your site: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="alternate icon" href="/favicon.ico"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01"> If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation. Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. Here’s more detail on the current level of SVG favicon support: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 80 No No 13.4 Why SVG? You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you. Ease of authoring It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. Future-proofing Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. Performance SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts! Tricks Another cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #272019; } </style> <!-- etc. --> </svg> Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries. Emoji Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. https://twitter.com/LeaVerou/status/1241619866475474946 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept. Dark Mode support Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries. <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg> For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat! Other media queries Dark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider: A mockup of how these media query-based adjustments could work.Keep it crisp Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape: When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect: A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position. Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget. Go the extra mile In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers. If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net. It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999.
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way. Here’s the code for how to add favicons to your site: If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation. Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. Here’s more detail on the current level of SVG favicon support: Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 80 No No 13.4 Why SVG? You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you. Ease of authoring It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. Future-proofing Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. Performance SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts! Tricks Another cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element. Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries. Emoji Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept. Dark Mode support Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries. For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat! Other media queries Dark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider: A mockup of how these media query-based adjustments could work.Keep it crisp Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape: When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect: A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position. Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget. Go the extra mile In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers. If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net. It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999. Source link Share this: Click to share on Twitter (Opens in new window) Click to share on Facebook (Opens in new window) Click to share on Reddit (Opens in new window) Click to share on LinkedIn (Opens in new window) Click to share on Pinterest (Opens in new window) Click to share on Tumblr (Opens in new window) Click to share on Skype (Opens in new window) Click to share on WhatsApp (Opens in new window) Click to share on Telegram (Opens in new window) Click to share on Pocket (Opens in new window) Related Continue Reading Previous How to Make a CSS-Only Carousel
CSS | Programming SVG, Favicons, and All the Fun Things We Can Do With Them Shantun ParmarApril 25, 2020 Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way. Here’s the code for how to add favicons to your site: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="alternate icon" href="/favicon.ico"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01"> If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation. Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. Here’s more detail on the current level of SVG favicon support: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 80 No No 13.4 Why SVG? You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you. Ease of authoring It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. Future-proofing Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. Performance SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts! Tricks Another cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #272019; } </style> <!-- etc. --> </svg> Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries. Emoji Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept. Dark Mode support Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries. <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg> For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat! Other media queries Dark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider: A mockup of how these media query-based adjustments could work.Keep it crisp Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape: When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect: A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position. Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget. Go the extra mile In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers. If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net. It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999.
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way. Here’s the code for how to add favicons to your site: <link rel="icon" type="image/svg+xml" href="http://css-tricks.com/favicon.svg"> <link rel="alternate icon" href="http://css-tricks.com/favicon.ico"> <link rel="mask-icon" href="http://css-tricks.com/safari-pinned-tab.svg" color="#ff8a01"> If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation. Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. Here’s more detail on the current level of SVG favicon support: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 80 41 No 80 TP Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 81 No No 13.4 Why SVG? You may be questioning why this is needed. The .ico file format has been around forever and can support images up to 256×256 pixels in size. Here are three answers for you. Ease of authoring It’s a pain to make .ico files. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. Future-proofing Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get. Performance SVGs are usually very small files, especially when compared to their raster image counterparts — even more-so if you optimize them beforehand. By only using a 16×16 pixel favicon as a fallback for browsers that don’t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. This might seem a bit extreme, but when it comes to web performance, every byte counts! Tricks Another cool thing about SVG is we can embed CSS directly in it. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img element. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path fill: #272019; </style> <!-- etc. --> </svg> Since SVG favicons are embedded using the link element, they can’t really be modified using JavaScript. We can, however, use things like emoji and media queries. Emoji Lea Verou had a genius idea about using emoji inside of SVG’s text element to make a quick favicon with a transparent background that holds up at small sizes. Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100"> <text y=".9em" font-size="90">💩</text> </svg> Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU — Lea Verou (@LeaVerou) March 22, 2020 In response, Chris Coyier whipped up a neat little demo that lets you play around with the concept. Dark Mode support Both Thomas Steiner and Mathias Bynens independently stumbled across the idea that you can use the prefers-color-scheme media query to provide support for dark mode. This work is built off of Jake Archibald’s exploration of SVG and media queries. <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path fill: #000000; @media (prefers-color-scheme: dark) path fill: #ffffff; </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg> For supporting browsers, this code means our star-shaped SVG favicon will change its fill color from black to white when dark mode is activated. Pretty neat! Other media queries Dark mode support got me thinking: if SVGs can support prefers-color-scheme, what other things can we do with them? While the support for Level 5 Media Queries may not be there yet, here’s some ideas to consider: Use light-level to desaturate favicon colors in a low-light environment. Use inverted-colors to “flip” inverted colors to preserve branding, or to ensure a photorealistic favicon looks as intended. Use prefers-reduced-motion to remove favicon animation. Ideally, we’d avoid animating favicons in the first place, as they can be a trigger for ADHD and other related disabilities. Use forced-colors and/or a Windows High Contrast Mode media query to make sure the favicon holds up visually in a high contrast color context. Remember to use color keywords to keep the favicon’s colors dynamic! A mockup of how these media query-based adjustments could work.Keep it crisp Another important aspect of good favicon design is making sure they look good in the small browser tab area. The secret to this is making the paths of the vector image line up to the pixel grid, the guide a computer uses to turn SVG math into the bitmap we see on a screen. Here’s a simplified example using a square shape: When the vector points of the square align to the pixel grid of the artboard, the antialiasing effect a computer uses to smooth out the shapes isn’t needed. When the vector points aren’t aligned, we get a “smearing” effect: A vector point’s position can be adjusted on the pixel grid by using a vector editing program such as Figma, Sketch, Inkscape, or Illustrator. These programs export SVGs as well. To adjust a vector point’s location, select each node with a precision selection tool and drag it into position. Some more complicated icons may need to be simplified, in order to look good at such a small size. If you’re looking for a good primer on this, Jeremy Frank wrote a really good two-part article over at Vidget. Go the extra mile In addition to favicons, there are a bunch of different (and unfortunately proprietary) ways to use icons to enhance its experience. These include things like the aforementioned pinned tab icon for Safari¹, chat app unfurls, a pinned Windows start menu tile, social media previews, and homescreen launchers. If you’re looking for a great place to get started with these kinds of enhancements, I really like realfavicongenerator.net. It’s a lot, but it guarantees robust support.A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam: As the story goes, late one night, Shyam was working on his new favicon feature. He called over junior project manager Ray Sun to take a look. Shyam commented, “This is good, right? Check it in?”, requesting permission to check the code into the Internet Explorer codebase so it could be released in the next version. Sun didn’t think too much of it, the feature was cool and would clearly give IE an edge. So he told Shyam to go ahead and add it. And just like that, the favicon made its way into Internet Explorer 5, which would go on to become one of the largest browser releases the web has ever seen. The next day, Sun was reprimanded by his manager for letting the feature get by so quickly. As it turns out, Shyam had specifically waited until later in the day, knowing that a less experienced Program Manager would give him a pass. But by then, the code had been merged in. Incidentally, you’d be surprised just how many relatively major browser features have snuck their way into releases like this. From How We Got the Favicon by Jay Hoffmann I’m happy to see the platform throw a little love at favicons. They’ve long been one of my favorite little design details, and I’m excited that they’re becoming more reactive to user’s needs. If you have a moment, why not sneak a SVG favicon into your project the same way Bharat Shyam did way back in 1999. ¹ I haven’t been able to determine if Safari is going to implement SVG favicon support, but I hope they do. Has anyone heard anything? The post SVG, Favicons, and All the Fun Things We Can Do With Them appeared first on CSS-Tricks. Post Views: 1
