blogccasion

`prefers-color-scheme` in SVG favicons for dark mode icons

🎉 Chrome finally accepts SVG favicons now that crbug.com/294179, where this feature was demanded on September 18, 2013(!), was fixed. This means that you can style your icon with inline prefers-color-scheme and you'll get two icons for the price of one!

<!-- icon.svg -->
<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>
<!-- index.html -->
<link rel="icon" href="/icon.svg">

You can see a demo of this in action at 🌒 dark-mode-favicon.glitch.me ☀️. Until this feature will have landed in Chrome Stable/Beta/Dev/Canary, be sure to test it with the last Chromium build that you can download from François Beaufort's Chromium Downloader.

Demo app running in dark mode, showing the dark mode favicon being used.

Demo app running in light mode, showing the light mode favicon being used.

Full credits to Mathias Bynens, who independently has created almost the same demo as me that I didn't check, but whose link to Jake Archibald's post SVG & media queries I did follow. Mathias has now filed the follow-up bug crbug.com/1026539 that will improve the favicon update behavior (now you still need to reload the page after a color scheme change).

You can edit this page on GitHub.

Webmentions

4 Replies

*Sigh*, yeah, for home screen icons browsers have to rely on what the operating system supports. We’ve been toying the idea of having the browser dynamically create what the OS needs.
Nice. I didn't realize Chrome 80 supported SVG favicons. I think it's probably just yet-another-image at this point, because it doesn't replace homescreen icons afaict
This fallback seems to work in every case I tested: <link href="/favicon.svg"...> <link href="/favicon.png" ...> <!-- favicon.ico in the root --> catalin.red/svg-favicon-li…

47 Mentions

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.
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.
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…
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
Author: Andrey Sitnik, Author of PostCSS and Autoprefixer, Lead Frontend Developer at Evil MartiansIt is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs. The favicons proved to be a more exhaustive topic that anyone could wish for, so I also summarized a whole article in just two code snippets for those who suffered enough and know exactly what to do. Still, I recommend geeking out to the rest of it! Extremely short version Instead of serving dozens of icons, all you need is just five icons and one JSON file. In your HTML, for the browser: <link rel="icon" href="/favicon.ico" /><!-- 48×48 --> <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any" /> <link rel="apple-touch-icon" href="/apple.png" /><!-- 180×180 --> <link rel="manifest" href="/manifest.webmanifest" /> And in your web app manifest: // manifest.webmanifest { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article. Long version, where everything is explained A concept of a favicon, short for “favorite icon”, have been around since the early 2000s. We all see those cute little images in your browser’s tab bar that help tell open websites apart every day. Users expect your website to have a favicon. It’s one of those little things that make other people take you seriously. Even Apple, which always had some aesthetic beef with icons that don’t come from Cupertino and downplayed favicons in Safari for years, had finally given up and now displays them properly across all of its devices. If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon—is actually a lot of them. So it is common to offload the grueling task of generating necessary files for the ever-growing list of screens and devices to favicon generator tools. No human in their right mind would want to spend hours creating them by hand. We are here to build websites, after all, not make browser vendors happy. A set of favicons generated by a popular online generator As a creator of NanoID and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises? So, I set out to create a minimal list of favicons that will work in all cases and in all browsers, barring some edge cases where it will still work, just not 100% perfectly. The Ultimate Favicon Setup Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you are concerned about performance, I am here to set the record straight: browsers download favicons in the background, so a bigger favicon image does not affect website performance; SVG is a great way to reduce image size for images that are not supposed to be bitmaps in the first place; for many logos, the resulting file will be much smaller than a PNG; With just three PNG images in this minimum set, you can use advanced tools to optimize their size. It solves a problem for Internet users that don’t have unlimited data plans. Here comes the minimal set of icons that I came up with in my research and practice. It should work with all popular browsers and devices, old and new. I. favicon.ico for legacy browsers Microsoft recommends having a 48×48 icon to support Internet Explorer. ICO files actually have a directory structure and can pack files with different resolutions. I recommend sticking to a single 48×48 image, unless the one you have doesnt downscale well to 16×16 and 32×32 (becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that is tailored to fit small pixel grids. Don’t get smart with folder static asset folder structure and cache busters. https://example.com website should have a favicon on https://example.com/favicon.ico. Some tools, like RSS readers, just request /favicon.ico from the server and don’t bother looking elsewhere. II. A single SVG icon with light/dark version for modern browsers SVG is a vector format that describes curves instead of pixels. On large sizes, it is more efficient than raster images. 72% of all browsers support SVG icons as of this writing. Your HTML page should have a <link> tag in its <head> with rel="icon", type="image/svg+xml" and href with a link to SVG file as attributes. SVG is an XML format and can contain a <style> tag that describes CSS. As any CSS, it can contain media queries like @media (prefers-color-scheme: dark). This will allow you to toggle the same icon between light and dark system themes. III. 180×180 PNG image for Apple devices Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <link rel="apple-touch-icon" href="icon.png"> tag in a <head>. iPads since iOS 8+ require a 180×180 resolution. Other devices will downscale the image, but if we provide the source with a good-enough quality, the downscaling won’t hurt the end-user (I’ll come back to it later). Small note: an Apple touch icon will look better if you add a 20px padding around the icon and put some background color. You can use any image editor for that. IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices. Web app manifest is a JSON file with all details for a browser to install your website as a system application. The format came from Google for it’s PWA initiative. Your HTML page should have a <link rel="manifest" href="path.webmanifest"> tag with a link to manifest file. Manifest should have an icon field that links to two icons: 192×192 displayed on a home screen and 512×512 that will be used as a splash screen as PWA is loading. { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Did we forget anyone? There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some less successful formats out there. Windows Tile Icon Microsoft Edge used to support a special icon format to pin websites to Start Menu. For recent versions of Windows, this is no longer required. Safari Pinned Icon Safari used to have a separate requirement to display an icon in pinned tabs. However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the mask-icon anymore. rel=”shortcut” A lot of (now outdated) tutorials will include a favicon.ico into HTML like this: <link rel="shortcut icon" href="/favicon.ico"> Be warned that shortcut is not, and never was a valid link relation. Read this amazing article by Mathias Bynens from ten years ago that explains why we never needed shortcuts and rel="icon" is just fine. Yandex Tableau Yandex Browser is a Chromium-based browser from the biggest Russian search engine. In Russia, it has a 20% market share. It has a nice feature that allows website to display live data in widgets on a home screen through a special JSON manifest provided by the yandex-tableau-widget link. However, the feature proved not to be very popular, and now Yandex has removed the technical documentation for it from its website. Regular icon manifests will work just as well. Opera Coast Opera Coast, an experimental browser for iOS, used to require a special 228×228 icon. The browser left the App Store in 2017, and I doubt it has survived multiple iOS updates since then. Now, as we waved good-bye to fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing. How to build our Ultimate Favicon Set Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use. Step 1: Prepare the SVG Be sure that the SVG image is square. Open the source file in your system viewer and check the image’s width and height. It is easy to adjust the SVG size in any SVG editor. In Inkscape, you can change document size in File → Document Properties and center the logo using Object → Align and Distribute. Save your file as icon.svg. Now let’s fiddle with our SVG, so it plays well with modern system themes. Ask your designer how the colors should be inverted in a dark theme (for B&W logos, you just change black to white). Now, open your SVG file in a text editor. Find a <path> with dark or missing fill. Add a CSS media query that triggers on theme changes and change fill to the colors you want: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> - <path fill="#0f0f0f" d="…" /> + <path class="a" fill="#0f0f0f" d="…" /> </svg> Step 2: Create an ICO file Open your icon.svg file in a raster graphics editor. I recommend GIMP; it’s free and multi-platform. Accept rendering SVG to raster. Set width and height to 48 pixels. Export file to favicon.ico using 32 bpp, 8-bit alpha, no palette settings. Scale the image down to 16×16 and check icon visibility. If it became too blurry, it would be better to ask your designer for a custom tiny version of the logo. To include a separate 16×16 version of an icon: Open favicon.ico with 48×48 icon. Create a new layer with 16×16 size. Put a 16×16 version of an icon into this layer. Export the file. GIMP will save each layout as a separate version of an icon. Step 3: Create PNG images Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as icon-512.png. Scale the image to 192×192 and export it to icon-192.png. Now scale the image itself to 140×140 and set the canvas to 180×180, and export as apple-touch-icon.png. Step 4: Optimize PNG and SVG files The best tool to optimize SVGs is SVGO. Run: npx svgo --multipass icon.svg Squoosh is a great web app to optimize raster images. Open your icon-512.png in Squoosh. Change Compress setting to OxiPNG. Enable “Reduce palette”. Set 64 colors. Compare before/after by moving a slider. If you see a difference, increase the number of colors. Save the file. Repeat these steps for icon-192.png and apple-touch-icon.png. Step 5: Add icons to HTML You need to add links to favicon.ico and to apple-touch-icon.png into your HTML. For static HTML: <title>My website</title> + <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> However, we recommend using a bundler to generate cache busters (include file’s hash in a name as a fingerprint). If you are using Webpack with [html-webpack-plugin]: Create index.html template. Add template to plugin options: new HtmlWebpackPlugin({ template: "./view/index.html" }); Define HTML template with links (examples use ERB used to include files, but can be your templating language of choice): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" sizes="any" href="<%= require('./icon.svg').default %>" /> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" /> </head> <body></body> </html> Use copy-webpack-plugin to copy favicon.ico without adding a hash to file name. Free Tip: Separate icon for staging Favicons are a nice way to distinguish your production environment from a staging one. I find using an alternative icon for staging super effective in avoiding expensive confusions. Create a favicon-dev.ico with the same logo, but invert the colors (or do something else that makes sense for you). Same for SVG, create icon-dev.svg. Now, replace icons in your HTML template depending on process.env.NODE_ENV === 'production' condition: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="<%= + process.env.NODE_ENV === 'production' + ? '/favicon.ico' + : require('./favicon-dev.ico').default + %>"> <link rel="icon" type="image/svg+xml" sizes="any" href="<%= - require('./icon.svg').default + process.env.NODE_ENV === 'production' + ? require('./icon.svg').default + : require('./icon-dev.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>"> </head> <body></body> </html> Step 6: Create a web app manifest For static HTML, create a JSON file named manifest.webmanifest: { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Link it in your HTML: <title>My website</title> + <link rel="manifest" href="/manifest.webmanifest"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> With Webpack, you can use webpack-pwa-manifest plugin: plugins: [ …, new WebpackPwaManifest({ name: 'My website', icons: [ { src: resolve('./icon-192.png'), sizes: '192x192' }, { src: resolve('./icon512.png'), sizes: '512x512 } ] }) ] Thank you for reading! As you can see, with modern web standards, the task of creating an ultimate favicon set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will be even more amazing! Feel free to ping me on Twitter if you’re willing to build one; I will be more than happy to help! Source: Evil Martians Share this: Twitter Facebook
Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести на вкладке браузера или на сенсорном экране миниатюрный логотип сайта. В этом материале раскрывается более разумный подход к работе с фавиконами, который направлен на подбор минимального количества файлов, использование которых способно решить большинство «фавиконных» задач, стоящих перед современным веб-разработчиков. Известно, что создание фавиконов — это гораздо сложнее, чем многим хотелось бы. Поэтому я, чтобы не мучить тех, кто уже достаточно от всего этого настрадался, кто точно знает, что делать, собрал всю суть статьи в паре примеров кода. Но я, всё равно, советую читать этот материал целиком. Очень короткая версия статьи Вместо того чтобы готовить для сайта десятки фавиконов — достаточно будет создать пять иконок и один JSON-файл. Вот HTML-код, который попадает в браузер: <link rel="icon" href="/favicon.ico"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 --> <link rel="manifest" href="/manifest.webmanifest"> Вот код, который предназначен для манифеста веб-приложения: // manifest.webmanifest { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Вот и всё. А если вы хотите узнать о том, как я до всего этого дошёл, на какие компромиссы мне пришлось пойти, и о том, как самостоятельно, с нуля, создать подобный набор файлов — читайте дальше. Ниже я всё объясню и приведу пошаговые примеры. Длинная версия статьи, в которой даны все необходимые пояснения Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать. Антуан де Сент-Экзюпери Понятие «фавикон» (favicon, favorite icon, значок для избранного) существует с начала 2000-х годов. Все мы видели фавиконы в списках вкладок браузеров — маленькие симпатичные изображения, которые помогают различать открытые страницы. Пользователи ожидают наличия фавиконов у сайтов. Это — одна из тех мелочей, внимание к которым со стороны разработчика сайта заставляет воспринимать этот сайт как некий серьёзный проект. Даже компания Apple, у которой всегда были претензии эстетического плана, направленные на иконки, созданные не в Купертино, и которая не уделяла особого внимания фавиконам в Safari, наконец сдалась. Теперь фавиконы правильно отображаются на всех устройствах от Apple. Если у вас есть общедоступный веб-сайт — у него должен быть фавикон. К сожалению, то, что пользователи воспринимают в виде одной иконки, на самом деле представлено множеством изображений. Часто тяжёлый труд по созданию графических файлов, необходимых для поддержки постоянно растущего списка экранов и устройств, перекладывают на генераторы фавиконов. Никто, пребывающий в здравом уме, не станет тратить многие часы на ручное создание этих изображений. Мы, в конце концов, занимаемся разработкой сайтов, смысл нашей жизни не в том, чтобы угождать производителям браузеров. Набор фавиконов, созданный популярным онлайн-генератором Я, как создатель NanoID и сторонник минималистичного опенсорса, обычно склонен смотреть в несколько ином направлении. Какой набор графических файлов позволяет наиболее эффективно обеспечить веб-сайт фавиконами? Какие форматы являются устаревшими? Иконки каких типов можно заменить на другие, пойдя на небольшие компромиссы? Размышляя об этом, я решил создать минимальный набор фавиконов, который подойдёт для всех ситуаций и будет работать во всех браузерах. Его единственный недостаток заключается в том, что в некоторых особых случаях он, хотя окажется работоспособным, не позволит добиться на 100% идеального результата. Универсальный набор фавиконов Вместо того чтобы создавать множество изображений разных размеров, я решил положиться на формат SVG и на возможности браузеров по уменьшению масштабов картинок. Если вы беспокоитесь о производительности — сейчас я внесу ясность в этот вопрос: Браузеры загружают фавиконы в фоновом режиме. Поэтому загрузка достаточно большого изображения фавикона не повредит производительности сайта. Применение формата SVG позволяет экономно хранить изображения, не являющиеся растровыми. Так, в случае с большинством логотипов, их хранение в формате SVG даёт гораздо меньший размер файла, чем использование формата PNG. В этом минималистичном наборе фавиконов имеется всего три PNG-изображения. Для оптимизации их размеров можно использовать продвинутые инструменты. Это позволяет решить проблемы тех пользователей, у которых нет безлимитного интернет-подключения. Сейчас я расскажу о минимальном наборе значков, к которому меня привели исследование вопроса подготовки ресурсов для фавиконов и практика. Этот набор ресурсов должен работать во всех популярных браузерах и на всех устройствах, включая старые и новые. I. Файл favicon.ico для устаревших браузеров ICO-файлы, на самом деле, имеют структуру директорий. В них могут быть упакованы графические файлы разных размеров. Я рекомендую остановиться на одном изображении размера 32×32 пикселя. Если же это изображение плохо масштабируется до размера 16×16 (например, оказывается размытым), то вам стоит попросить дизайнера создать его высококачественную уменьшенную версию. Не стоит увлекаться экспериментами со структурой папки для статических ресурсов и со средствами для улучшения кеширования ресурсов сайта. Предположим, у нас имеется сайт https://example.com. Его фавикон должен находиться по адресу https://example.com/favicon.ico. Некоторые программы, вроде RSS-читалок, пытаясь загрузить фавикон, просто запрашивают с сервера файл /favicon.ico и не утруждают себя поисками этого файла где-то ещё. II. Одна SVG-иконка с поддержкой тёмной и светлой темы для современных браузеров SVG — это векторный графический формат, описывающий не пиксели, а кривые. SVG-файлы, при хранении некоторых больших изображений, оказываются эффективнее растровых форматов. На момент написания этого текста 72% браузеров поддерживают SVG-иконки. Для подключения к HTML-странице SVG-значка в её коде, в разделе <head>, должен быть тег <link>, в котором имеются атрибуты rel="icon", type="image/svg+xml" и атрибут href со ссылкой на SVG-файл. SVG-файлы содержат XML-данные, в состав которых может входить тег <style>, содержащий CSS-код. Тут, как и в любом CSS-коде, могут использоваться медиазапросы, наподобие @media (prefers-color-scheme: dark). Это позволяет организовать подстройку внешнего вида значка под системную тему — тёмную или светлую. III. PNG-файл размером 180×180 для устройств Apple Если добавить веб-страницу на домашний экран iPhone или iPad — в качестве значка для её открытия будет использовано изображение, указанное в разделе страницы <head>, в теге, который может выглядеть как <link rel="apple-touch-icon" href="icon.png">. Устройства iPad, начиная с iOS 8+, требуют использования изображений размером 180×180 пикселей. Другие устройства могут уменьшить изображение. Если подготовить исходное изображение достаточно высокого качества, то его уменьшение не повредит конечным пользователям (мы ещё об этом поговорим). Хочу дать небольшой совет о подготовке значков, рассчитанных на устройства Apple. Значок будет выглядеть лучше в том случае, если вокруг основного изображения будет поле размером в 20 пикселей, и если фон значка будет закрашен каким-то цветом. Изображение можно обработать подобным образом, воспользовавшись любым графическим редактором. IV. Манифест веб-приложения с PNG-значками размерами 192×192 и 512×512, рассчитанными на Android-устройства Манифест веб-приложения — это JSON-файл, содержащий сведения, необходимые браузеру для установки приложения на устройство. Формат этого файла предложен Google в рамках технологии PWA. Манифест подключается к веб-странице посредством тега, который может выглядеть как <link rel="manifest" href="path.webmanifest">. В манифесте должно присутствовать поле icons, в котором содержатся ссылки на две иконки. Одна из них, размерами 192×192 пикселя, используется для значка приложения на домашнем экране. Другая, размером 512×512, применяется в качестве экрана-заставки, показываемого при загрузке PWA. { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Не забыли ли мы о чём-нибудь? Мы поговорили лишь о нескольких форматах фавиконов, но, на самом деле, существует гораздо больше их разновидностей. Некоторые из них не отличаются широкой известностью. Поэтому поговорим о том, как те значки, которые мы описали выше, ведут себя в различных ситуациях. Забегая вперёд, скажу, что, возможно, пришло время попрощаться с некоторыми форматами фавиконов, не получившими широкого распространения. Иконки для плиточного интерфейса Windows Браузер Microsoft Edge поддерживал иконки особого формата, используемые при закреплении сайтов в стартовом меню. В современных версиях Windows это уже не нужно. Иконки для закреплённых вкладок Safari Браузер Safari выдвигал особые требования для иконок, которые предназначены для закреплённых вкладок. Но, с выхода Safari 12, на таких вкладках можно использовать обычные фавиконы. Даже на apple.com больше не используется mask-icon. Атрибут rel=«shortcut» Во множестве руководств (теперь устаревших) предлагается включать favicon.ico в HTML с помощью следующей конструкции: <link rel="shortcut icon" href="/favicon.ico"> Обратите внимание на то, что ключевое слово shortcut не является допустимым значением атрибута rel и никогда таковым не являлось. Вот отличная статья десятилетней давности, в которой можно найти соответствующие пояснения и указание на то, что конструкция rel="icon" — это всё, что нужно. Табло браузера Яндекс Браузер Яндекс основан на Chromium. Его разработкой занимается крупнейшая российская поисковая система, которой принадлежит 20% рынка поиска в России. У этого браузера есть удобная функция, которая позволяет сайтам выводить актуальные данные в виджетах, закреплённых на особой панели, называемой Табло. Для реализации этого функционала нужен особый JSON-файл манифеста, загружаемой по ссылке, значением атрибута rel которой является yandex-tableau-widget. Но оказалось, что эта возможность особой популярностью не пользуется. Компания Яндекс удалила со своего сайта соответствующую техническую документацию. В результате для нормальной работы с сайтами в браузере Яндекс достаточно обычного файла-манифеста. Браузер Opera Coast Opera Coast — это экспериментальный браузер для iOS, который требовал использования иконок особого размера — 228×228. В 2017 году браузер исчез из App Store. Я сомневаюсь, что он пережил множество обновлений iOS, которые были выпущены с тех пор. Собственно говоря, теперь, когда мы попрощались технологиями, ушедшими в небытие, поговорим о том, как подготовить универсальный набор фавиконов, подходящих для актуальных браузеров и устройств. Создание универсального набора фавиконов Вот пошаговый план действий по подготовке универсального минималистичного набора фавиконов. Приступая к реализации этого плана достаточно обзавестись единственным SVG-файлом с изображением, которое должно выводиться на фавиконах. Шаг 1. Подготовка SVG-файла Проверьте, чтобы ваш исходный SVG-файл был бы квадратным. Откройте исходный файл в вашей системной программе просмотра графики и проверьте ширину и высоту изображения. Если файл нуждается в правке — сделать это можно в любом SVG-редакторе. Например, в Inkscape можно изменить размеры документа, перейдя по пули File > Document Properties. Выровнять логотип по центру изображения можно, прибегнув к команде Object > Align and Distribute. Сохраните файл с именем icon.svg. Теперь давайте поработаем с кодом SVG-файла, подготовим этот файл к работе с темами, поддерживаемыми современными системами. Уточните у дизайнера вопрос о том, как должны меняться цвета в варианте изображения, рассчитанном на тёмную тему (если речь идёт о чёрно-белом логотипе, то достаточно просто поменять чёрный цвет на белый, а белый — на чёрный). Теперь откройте SVG-файл в текстовом редакторе. Найдите элемент <path>, в котором значение fill отсутствует или представлено тёмным цветом. Добавьте в код медиа-запрос CSS, который срабатывает при изменении темы, и соответствующим образом поменяйте цвета этого элемента: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> - <path fill="#0f0f0f" d="…" /> + <path class="a" fill="#0f0f0f" d="…" /> </svg> Шаг 2. Создание ICO-файл Откройте файл icon.svg в растровом графическом редакторе. Я рекомендую GIMP — бесплатный многоплатформенный редактор. Согласитесь с растеризацией SVG-изображения. Установите ширину и высоту изображения в 32 пикселя. Экспортируйте изображение в файл favicon.ico, используя настройки 2 bpp, 8-bit alpha, no palette. Уменьшите изображение до размеров 16×16 пикселей и проверьте его качество. Если оно окажется слишком сильно размытым — лучше будет попросить дизайнера сделать особую версию этого изображения, хорошо выглядящую в маленьком размере. Для того чтобы включить в состав favicon.ico отдельную версию значка размером 16×16 пикселей, выполните следующие действия: Откройте favicon.ico, содержащий изображение размером 32×32 пикселя. Создайте новый слой размером 16×16. Поместите изображение значка размера 16×16 пикселей на этот слой. Экспортируйте файл. GIMP сохранит каждый вариант значка в виде отдельной версии. Шаг 3. Создание PNG-изображения Снова откройте исходный SVG-файл в растровом редакторе и создайте изображение размером 512×512 пикселей. Экспортируйте его в файл icon-512.png. Уменьшите изображение до размером 192×192 пикселя и экспортируйте его в файл icon-192.png. Далее, уменьшите само изображение до размеров 140×140 пикселей, а размеры холста установите в 180×180. Экспортируйте изображение в файл apple-touch-icon.png. Шаг 4. Оптимизация PNG- и SVG-файлов Лучший инструмент для оптимизации SVG-файлов — это SVGO. Выполните следующую команду: npx svgo --multipass icon.svg Для оптимизации растровых изображений отлично подходит веб-приложение Squoosh. Откройте в Squoosh файл icon-512.png. Измените значение параметра Compress на OxiPNG. Включите установку Reduce palette. Установите количество цветов в 64. Пользуясь слайдером сравните то, как выглядело изображение до оптимизации, с тем, как оно выглядит после оптимизации. Если вы заметите различия — увеличьте количество цветов. Сохраните файл. Повторите эти действия для файлов icon-192.png и apple-touch-icon.png. Шаг 5. Подключение значков в HTML Теперь нужно подключить favicon.ico и apple-touch-icon.png к веб-странице. Вот как это выглядит в коде статической страницы: <title>My website</title> + <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="/icon.svg" type="image/svg+xml"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Но мы рекомендуем использовать продвинутые средства для работы с кешем (речь идёт о включение в имя файла его хеша). Например, если вы пользуетесь Webpack с плагином html-webpack-plugin, выполните следующие действия: Создайте шаблон index.html. Добавьте этот шаблон в параметры плагина: new HtmlWebpackPlugin({ template: "./view/index.html" }); Опишите HTML-шаблон с включёнными в него ссылками (здесь для включения в шаблон ссылок на файлы используется ERB, но вы можете пользоваться и другим языком описания шаблонов): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" > </head> <body></body> </html> Воспользуйтесь плагином copy-webpack-plugin для копирования favicon.ico без добавления к имени файла его хеша. Совет: использование особого значка для окружения разработки Разные фавиконы — это отличный механизм, позволяющий отличать продакшн-окружение от окружения для разработки ПО. Я полагаю, что использование альтернативного значка для окружения разработки крайне эффективно в деле предотвращения дорогостоящих ошибок. Создадим файл favicon-dev.ico, содержащий то же изображение, что и обычный фавикон, но изображение каким-то образом изменённое (это могут быть инвертированные цвета, или нечто подобное). Точно так же создадим и файл icon-dev.svg. Теперь настроим смену значков в HTML-шаблоне, проверяя условие process.env.NODE_ENV === 'production': <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="<%= + process.env.NODE_ENV === 'production' + ? '/favicon.ico' + : require('./favicon-dev.ico').default + %>"> <link rel="icon" type="image/svg+xml" href="<%= - require('./icon.svg').default + process.env.NODE_ENV === 'production' + ? require('./icon.svg').default + : require('./icon-dev.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>"> </head> <body></body> </html> Шаг 6. Создание манифеста веб-приложения При работе со статическим HTML-кодом нужно создать JSON-файл с именем manifest.webmanifest: { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Этот файл нужно подключить в HTML-коде: <title>My website</title> + <link rel="manifest" href="/manifest.webmanifest"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> При использовании Webpack можно воспользоваться плагином webpack-pwa-manifest: plugins: [ …, new WebpackPwaManifest({ name: 'My website', icons: [ { src: resolve('./icon-192.png'), sizes: '192x192' }, { src: resolve('./icon512.png'), sizes: '512x512 } ] }) ] Итоги Как видите, благодаря существованию современных веб-стандартов создать универсальный набор фавиконов не так уж и сложно. Но, хотя ручное выполнение вышеописанных задач не должно отнять у вас слишком много времени, ещё лучше было бы, если бы их можно было автоматизировать. Если вы хотите создать средство для автоматизации подобных задач — пишите мне в Twitter. Я буду более чем счастлив вам помочь. Как вы готовите фавиконы для своих веб-проектов? Let’s block ads! (Why?) Read More
Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести на вкладке браузера или на сенсорном экране миниатюрный логотип сайта. В этом материале раскрывается более разумный подход к работе с фавиконами, который направлен на подбор минимального количества файлов, использование которых способно решить большинство «фавиконных» задач, стоящих перед современным веб-разработчиков. Известно, что создание фавиконов — это гораздо сложнее, чем многим хотелось бы. Поэтому я, чтобы не мучить тех, кто уже достаточно от всего этого настрадался, кто точно знает, что делать, собрал всю суть статьи в паре примеров кода. Но я, всё равно, советую читать этот материал целиком. Очень короткая версия статьи Вместо того чтобы готовить для сайта десятки фавиконов — достаточно будет создать пять иконок и один JSON-файл. Вот HTML-код, который попадает в браузер: <link rel="icon" href="/favicon.ico"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 --> <link rel="manifest" href="/manifest.webmanifest"> Вот код, который предназначен для манифеста веб-приложения: // manifest.webmanifest { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Вот и всё. А если вы хотите узнать о том, как я до всего этого дошёл, на какие компромиссы мне пришлось пойти, и о том, как самостоятельно, с нуля, создать подобный набор файлов — читайте дальше. Ниже я всё объясню и приведу пошаговые примеры. Длинная версия статьи, в которой даны все необходимые пояснения Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать. Антуан де Сент-Экзюпери Понятие «фавикон» (favicon, favorite icon, значок для избранного) существует с начала 2000-х годов. Все мы видели фавиконы в списках вкладок браузеров — маленькие симпатичные изображения, которые помогают различать открытые страницы. Пользователи ожидают наличия фавиконов у сайтов. Это — одна из тех мелочей, внимание к которым со стороны разработчика сайта заставляет воспринимать этот сайт как некий серьёзный проект. Даже компания Apple, у которой всегда были претензии эстетического плана, направленные на иконки, созданные не в Купертино, и которая не уделяла особого внимания фавиконам в Safari, наконец сдалась. Теперь фавиконы правильно отображаются на всех устройствах от Apple. Если у вас есть общедоступный веб-сайт — у него должен быть фавикон. К сожалению, то, что пользователи воспринимают в виде одной иконки, на самом деле представлено множеством изображений. Часто тяжёлый труд по созданию графических файлов, необходимых для поддержки постоянно растущего списка экранов и устройств, перекладывают на генераторы фавиконов. Никто, пребывающий в здравом уме, не станет тратить многие часы на ручное создание этих изображений. Мы, в конце концов, занимаемся разработкой сайтов, смысл нашей жизни не в том, чтобы угождать производителям браузеров. Набор фавиконов, созданный популярным онлайн-генератором Я, как создатель NanoID и сторонник минималистичного опенсорса, обычно склонен смотреть в несколько ином направлении. Какой набор графических файлов позволяет наиболее эффективно обеспечить веб-сайт фавиконами? Какие форматы являются устаревшими? Иконки каких типов можно заменить на другие, пойдя на небольшие компромиссы? Размышляя об этом, я решил создать минимальный набор фавиконов, который подойдёт для всех ситуаций и будет работать во всех браузерах. Его единственный недостаток заключается в том, что в некоторых особых случаях он, хотя окажется работоспособным, не позволит добиться на 100% идеального результата. Универсальный набор фавиконов Вместо того чтобы создавать множество изображений разных размеров, я решил положиться на формат SVG и на возможности браузеров по уменьшению масштабов картинок. Если вы беспокоитесь о производительности — сейчас я внесу ясность в этот вопрос: Браузеры загружают фавиконы в фоновом режиме. Поэтому загрузка достаточно большого изображения фавикона не повредит производительности сайта. Применение формата SVG позволяет экономно хранить изображения, не являющиеся растровыми. Так, в случае с большинством логотипов, их хранение в формате SVG даёт гораздо меньший размер файла, чем использование формата PNG. В этом минималистичном наборе фавиконов имеется всего три PNG-изображения. Для оптимизации их размеров можно использовать продвинутые инструменты. Это позволяет решить проблемы тех пользователей, у которых нет безлимитного интернет-подключения. Сейчас я расскажу о минимальном наборе значков, к которому меня привели исследование вопроса подготовки ресурсов для фавиконов и практика. Этот набор ресурсов должен работать во всех популярных браузерах и на всех устройствах, включая старые и новые. I. Файл favicon.ico для устаревших браузеров ICO-файлы, на самом деле, имеют структуру директорий. В них могут быть упакованы графические файлы разных размеров. Я рекомендую остановиться на одном изображении размера 32×32 пикселя. Если же это изображение плохо масштабируется до размера 16×16 (например, оказывается размытым), то вам стоит попросить дизайнера создать его высококачественную уменьшенную версию. Не стоит увлекаться экспериментами со структурой папки для статических ресурсов и со средствами для улучшения кеширования ресурсов сайта. Предположим, у нас имеется сайт https://example.com. Его фавикон должен находиться по адресу https://example.com/favicon.ico. Некоторые программы, вроде RSS-читалок, пытаясь загрузить фавикон, просто запрашивают с сервера файл /favicon.ico и не утруждают себя поисками этого файла где-то ещё. II. Одна SVG-иконка с поддержкой тёмной и светлой темы для современных браузеров SVG — это векторный графический формат, описывающий не пиксели, а кривые. SVG-файлы, при хранении некоторых больших изображений, оказываются эффективнее растровых форматов. На момент написания этого текста 72% браузеров поддерживают SVG-иконки. Для подключения к HTML-странице SVG-значка в её коде, в разделе <head>, должен быть тег <link>, в котором имеются атрибуты rel="icon", type="image/svg+xml" и атрибут href со ссылкой на SVG-файл. SVG-файлы содержат XML-данные, в состав которых может входить тег <style>, содержащий CSS-код. Тут, как и в любом CSS-коде, могут использоваться медиазапросы, наподобие @media (prefers-color-scheme: dark). Это позволяет организовать подстройку внешнего вида значка под системную тему — тёмную или светлую. III. PNG-файл размером 180×180 для устройств Apple Если добавить веб-страницу на домашний экран iPhone или iPad — в качестве значка для её открытия будет использовано изображение, указанное в разделе страницы <head>, в теге, который может выглядеть как <link rel="apple-touch-icon" href="icon.png">. Устройства iPad, начиная с iOS 8+, требуют использования изображений размером 180×180 пикселей. Другие устройства могут уменьшить изображение. Если подготовить исходное изображение достаточно высокого качества, то его уменьшение не повредит конечным пользователям (мы ещё об этом поговорим). Хочу дать небольшой совет о подготовке значков, рассчитанных на устройства Apple. Значок будет выглядеть лучше в том случае, если вокруг основного изображения будет поле размером в 20 пикселей, и если фон значка будет закрашен каким-то цветом. Изображение можно обработать подобным образом, воспользовавшись любым графическим редактором. IV. Манифест веб-приложения с PNG-значками размерами 192×192 и 512×512, рассчитанными на Android-устройства Манифест веб-приложения — это JSON-файл, содержащий сведения, необходимые браузеру для установки приложения на устройство. Формат этого файла предложен Google в рамках технологии PWA. Манифест подключается к веб-странице посредством тега, который может выглядеть как <link rel="manifest" href="path.webmanifest">. В манифесте должно присутствовать поле icons, в котором содержатся ссылки на две иконки. Одна из них, размерами 192×192 пикселя, используется для значка приложения на домашнем экране. Другая, размером 512×512, применяется в качестве экрана-заставки, показываемого при загрузке PWA. { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Не забыли ли мы о чём-нибудь? Мы поговорили лишь о нескольких форматах фавиконов, но, на самом деле, существует гораздо больше их разновидностей. Некоторые из них не отличаются широкой известностью. Поэтому поговорим о том, как те значки, которые мы описали выше, ведут себя в различных ситуациях. Забегая вперёд, скажу, что, возможно, пришло время попрощаться с некоторыми форматами фавиконов, не получившими широкого распространения. Иконки для плиточного интерфейса Windows Браузер Microsoft Edge поддерживал иконки особого формата, используемые при закреплении сайтов в стартовом меню. В современных версиях Windows это уже не нужно. Иконки для закреплённых вкладок Safari Браузер Safari выдвигал особые требования для иконок, которые предназначены для закреплённых вкладок. Но, с выхода Safari 12, на таких вкладках можно использовать обычные фавиконы. Даже на apple.com больше не используется mask-icon. Атрибут rel=«shortcut» Во множестве руководств (теперь устаревших) предлагается включать favicon.ico в HTML с помощью следующей конструкции: <link rel="shortcut icon" href="/favicon.ico"> Обратите внимание на то, что ключевое слово shortcut не является допустимым значением атрибута rel и никогда таковым не являлось. Вот отличная статья десятилетней давности, в которой можно найти соответствующие пояснения и указание на то, что конструкция rel="icon" — это всё, что нужно. Табло браузера Яндекс Браузер Яндекс основан на Chromium. Его разработкой занимается крупнейшая российская поисковая система, которой принадлежит 20% рынка поиска в России. У этого браузера есть удобная функция, которая позволяет сайтам выводить актуальные данные в виджетах, закреплённых на особой панели, называемой Табло. Для реализации этого функционала нужен особый JSON-файл манифеста, загружаемой по ссылке, значением атрибута rel которой является yandex-tableau-widget. Но оказалось, что эта возможность особой популярностью не пользуется. Компания Яндекс удалила со своего сайта соответствующую техническую документацию. В результате для нормальной работы с сайтами в браузере Яндекс достаточно обычного файла-манифеста. Браузер Opera Coast Opera Coast — это экспериментальный браузер для iOS, который требовал использования иконок особого размера — 228×228. В 2017 году браузер исчез из App Store. Я сомневаюсь, что он пережил множество обновлений iOS, которые были выпущены с тех пор. Собственно говоря, теперь, когда мы попрощались технологиями, ушедшими в небытие, поговорим о том, как подготовить универсальный набор фавиконов, подходящих для актуальных браузеров и устройств. Создание универсального набора фавиконов Вот пошаговый план действий по подготовке универсального минималистичного набора фавиконов. Приступая к реализации этого плана достаточно обзавестись единственным SVG-файлом с изображением, которое должно выводиться на фавиконах. Шаг 1. Подготовка SVG-файла Проверьте, чтобы ваш исходный SVG-файл был бы квадратным. Откройте исходный файл в вашей системной программе просмотра графики и проверьте ширину и высоту изображения. Если файл нуждается в правке — сделать это можно в любом SVG-редакторе. Например, в Inkscape можно изменить размеры документа, перейдя по пули File > Document Properties. Выровнять логотип по центру изображения можно, прибегнув к команде Object > Align and Distribute. Сохраните файл с именем icon.svg. Теперь давайте поработаем с кодом SVG-файла, подготовим этот файл к работе с темами, поддерживаемыми современными системами. Уточните у дизайнера вопрос о том, как должны меняться цвета в варианте изображения, рассчитанном на тёмную тему (если речь идёт о чёрно-белом логотипе, то достаточно просто поменять чёрный цвет на белый, а белый — на чёрный). Теперь откройте SVG-файл в текстовом редакторе. Найдите элемент <path>, в котором значение fill отсутствует или представлено тёмным цветом. Добавьте в код медиа-запрос CSS, который срабатывает при изменении темы, и соответствующим образом поменяйте цвета этого элемента: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> - <path fill="#0f0f0f" d="…" /> + <path class="a" fill="#0f0f0f" d="…" /> </svg> Шаг 2. Создание ICO-файл Откройте файл icon.svg в растровом графическом редакторе. Я рекомендую GIMP — бесплатный многоплатформенный редактор. Согласитесь с растеризацией SVG-изображения. Установите ширину и высоту изображения в 32 пикселя. Экспортируйте изображение в файл favicon.ico, используя настройки 2 bpp, 8-bit alpha, no palette. Уменьшите изображение до размеров 16×16 пикселей и проверьте его качество. Если оно окажется слишком сильно размытым — лучше будет попросить дизайнера сделать особую версию этого изображения, хорошо выглядящую в маленьком размере. Для того чтобы включить в состав favicon.ico отдельную версию значка размером 16×16 пикселей, выполните следующие действия: Откройте favicon.ico, содержащий изображение размером 32×32 пикселя. Создайте новый слой размером 16×16. Поместите изображение значка размера 16×16 пикселей на этот слой. Экспортируйте файл. GIMP сохранит каждый вариант значка в виде отдельной версии. Шаг 3. Создание PNG-изображения Снова откройте исходный SVG-файл в растровом редакторе и создайте изображение размером 512×512 пикселей. Экспортируйте его в файл icon-512.png. Уменьшите изображение до размером 192×192 пикселя и экспортируйте его в файл icon-192.png. Далее, уменьшите само изображение до размеров 140×140 пикселей, а размеры холста установите в 180×180. Экспортируйте изображение в файл apple-touch-icon.png. Шаг 4. Оптимизация PNG- и SVG-файлов Лучший инструмент для оптимизации SVG-файлов — это SVGO. Выполните следующую команду: npx svgo --multipass icon.svg Для оптимизации растровых изображений отлично подходит веб-приложение Squoosh. Откройте в Squoosh файл icon-512.png. Измените значение параметра Compress на OxiPNG. Включите установку Reduce palette. Установите количество цветов в 64. Пользуясь слайдером сравните то, как выглядело изображение до оптимизации, с тем, как оно выглядит после оптимизации. Если вы заметите различия — увеличьте количество цветов. Сохраните файл. Повторите эти действия для файлов icon-192.png и apple-touch-icon.png. Шаг 5. Подключение значков в HTML Теперь нужно подключить favicon.ico и apple-touch-icon.png к веб-странице. Вот как это выглядит в коде статической страницы: <title>My website</title> + <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="/icon.svg" type="image/svg+xml"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Но мы рекомендуем использовать продвинутые средства для работы с кешем (речь идёт о включение в имя файла его хеша). Например, если вы пользуетесь Webpack с плагином html-webpack-plugin, выполните следующие действия: Создайте шаблон index.html. Добавьте этот шаблон в параметры плагина: new HtmlWebpackPlugin({ template: "./view/index.html" }); Опишите HTML-шаблон с включёнными в него ссылками (здесь для включения в шаблон ссылок на файлы используется ERB, но вы можете пользоваться и другим языком описания шаблонов): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" > </head> <body></body> </html> Воспользуйтесь плагином copy-webpack-plugin для копирования favicon.ico без добавления к имени файла его хеша. Совет: использование особого значка для окружения разработки Разные фавиконы — это отличный механизм, позволяющий отличать продакшн-окружение от окружения для разработки ПО. Я полагаю, что использование альтернативного значка для окружения разработки крайне эффективно в деле предотвращения дорогостоящих ошибок. Создадим файл favicon-dev.ico, содержащий то же изображение, что и обычный фавикон, но изображение каким-то образом изменённое (это могут быть инвертированные цвета, или нечто подобное). Точно так же создадим и файл icon-dev.svg. Теперь настроим смену значков в HTML-шаблоне, проверяя условие process.env.NODE_ENV === 'production': <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="<%= + process.env.NODE_ENV === 'production' + ? '/favicon.ico' + : require('./favicon-dev.ico').default + %>"> <link rel="icon" type="image/svg+xml" href="<%= - require('./icon.svg').default + process.env.NODE_ENV === 'production' + ? require('./icon.svg').default + : require('./icon-dev.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>"> </head> <body></body> </html> Шаг 6. Создание манифеста веб-приложения При работе со статическим HTML-кодом нужно создать JSON-файл с именем manifest.webmanifest: { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Этот файл нужно подключить в HTML-коде: <title>My website</title> + <link rel="manifest" href="/manifest.webmanifest"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> При использовании Webpack можно воспользоваться плагином webpack-pwa-manifest: plugins: [ …, new WebpackPwaManifest({ name: 'My website', icons: [ { src: resolve('./icon-192.png'), sizes: '192x192' }, { src: resolve('./icon512.png'), sizes: '512x512 } ] }) ] Итоги Как видите, благодаря существованию современных веб-стандартов создать универсальный набор фавиконов не так уж и сложно. Но, хотя ручное выполнение вышеописанных задач не должно отнять у вас слишком много времени, ещё лучше было бы, если бы их можно было автоматизировать. Если вы хотите создать средство для автоматизации подобных задач — пишите мне в Twitter. Я буду более чем счастлив вам помочь. Как вы готовите фавиконы для своих веб-проектов? Let’s block ads! (Why?) Read More
Обнаружил, что в драфте спецификации CSS есть запрос на системную тему. Выглядит так: @media (prefers-color-scheme: dark). В статье автор инджектит стили в svg иконку, чтобы она отображалась в соответствии с темой. blog.tomayac.com/2019/09/21/pre…
Посмотреть оригинал Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести на вкладке браузера или на сенсорном экране миниатюрный логотип сайта. В этом материале раскрывается более разумный подход к работе с фавиконами, который направлен на подбор минимального количества файлов, использование которых способно решить большинство «фавиконных» задач, стоящих перед современным веб-разработчиков. Известно, что создание фавиконов — это гораздо сложнее, чем многим хотелось бы. Поэтому я, чтобы не мучить тех, кто уже достаточно от всего этого настрадался, кто точно знает, что делать, собрал всю суть статьи в паре примеров кода. Но я, всё равно, советую читать этот материал целиком.Очень короткая версия статьиВместо того чтобы готовить для сайта десятки фавиконов — достаточно будет создать пять иконок и один JSON-файл.Вот HTML-код, который попадает в браузер: <link rel="icon" href="/favicon.ico"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 --> <link rel="manifest" href="/manifest.webmanifest"> Вот код, который предназначен для манифеста веб-приложения: // manifest.webmanifest { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Вот и всё. А если вы хотите узнать о том, как я до всего этого дошёл, на какие компромиссы мне пришлось пойти, и о том, как самостоятельно, с нуля, создать подобный набор файлов — читайте дальше. Ниже я всё объясню и приведу пошаговые примеры.Длинная версия статьи, в которой даны все необходимые пояснения Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать. Антуан де Сент-Экзюпери Понятие «фавикон» (favicon, favorite icon, значок для избранного) существует с начала 2000-х годов. Все мы видели фавиконы в списках вкладок браузеров — маленькие симпатичные изображения, которые помогают различать открытые страницы. Пользователи ожидают наличия фавиконов у сайтов. Это — одна из тех мелочей, внимание к которым со стороны разработчика сайта заставляет воспринимать этот сайт как некий серьёзный проект.Даже компания Apple, у которой всегда были претензии эстетического плана, направленные на иконки, созданные не в Купертино, и которая не уделяла особого внимания фавиконам в Safari, наконец сдалась. Теперь фавиконы правильно отображаются на всех устройствах от Apple.Если у вас есть общедоступный веб-сайт — у него должен быть фавикон. К сожалению, то, что пользователи воспринимают в виде одной иконки, на самом деле представлено множеством изображений.Часто тяжёлый труд по созданию графических файлов, необходимых для поддержки постоянно растущего списка экранов и устройств, перекладывают на генераторы фавиконов. Никто, пребывающий в здравом уме, не станет тратить многие часы на ручное создание этих изображений. Мы, в конце концов, занимаемся разработкой сайтов, смысл нашей жизни не в том, чтобы угождать производителям браузеров. Набор фавиконов, созданный популярным онлайн-генераторомЯ, как создатель NanoID и сторонник минималистичного опенсорса, обычно склонен смотреть в несколько ином направлении. Какой набор графических файлов позволяет наиболее эффективно обеспечить веб-сайт фавиконами? Какие форматы являются устаревшими? Иконки каких типов можно заменить на другие, пойдя на небольшие компромиссы?Размышляя об этом, я решил создать минимальный набор фавиконов, который подойдёт для всех ситуаций и будет работать во всех браузерах. Его единственный недостаток заключается в том, что в некоторых особых случаях он, хотя окажется работоспособным, не позволит добиться на 100% идеального результата.Универсальный набор фавиконовВместо того чтобы создавать множество изображений разных размеров, я решил положиться на формат SVG и на возможности браузеров по уменьшению масштабов картинок. Если вы беспокоитесь о производительности — сейчас я внесу ясность в этот вопрос:Браузеры загружают фавиконы в фоновом режиме. Поэтому загрузка достаточно большого изображения фавикона не повредит производительности сайта. Применение формата SVG позволяет экономно хранить изображения, не являющиеся растровыми. Так, в случае с большинством логотипов, их хранение в формате SVG даёт гораздо меньший размер файла, чем использование формата PNG. В этом минималистичном наборе фавиконов имеется всего три PNG-изображения. Для оптимизации их размеров можно использовать продвинутые инструменты. Это позволяет решить проблемы тех пользователей, у которых нет безлимитного интернет-подключения. Сейчас я расскажу о минимальном наборе значков, к которому меня привели исследование вопроса подготовки ресурсов для фавиконов и практика. Этот набор ресурсов должен работать во всех популярных браузерах и на всех устройствах, включая старые и новые.I. Файл favicon.ico для устаревших браузеровICO-файлы, на самом деле, имеют структуру директорий. В них могут быть упакованы графические файлы разных размеров. Я рекомендую остановиться на одном изображении размера 32×32 пикселя. Если же это изображение плохо масштабируется до размера 16×16 (например, оказывается размытым), то вам стоит попросить дизайнера создать его высококачественную уменьшенную версию.Не стоит увлекаться экспериментами со структурой папки для статических ресурсов и со средствами для улучшения кеширования ресурсов сайта. Предположим, у нас имеется сайт https://example.com. Его фавикон должен находиться по адресу https://example.com/favicon.ico. Некоторые программы, вроде RSS-читалок, пытаясь загрузить фавикон, просто запрашивают с сервера файл /favicon.ico и не утруждают себя поисками этого файла где-то ещё.II. Одна SVG-иконка с поддержкой тёмной и светлой темы для современных браузеровSVG — это векторный графический формат, описывающий не пиксели, а кривые. SVG-файлы, при хранении некоторых больших изображений, оказываются эффективнее растровых форматов. На момент написания этого текста 72% браузеров поддерживают SVG-иконки.Для подключения к HTML-странице SVG-значка в её коде, в разделе <head>, должен быть тег <link>, в котором имеются атрибуты rel="icon", type="image/svg+xml" и атрибут href со ссылкой на SVG-файл.SVG-файлы содержат XML-данные, в состав которых может входить тег <style>, содержащий CSS-код. Тут, как и в любом CSS-коде, могут использоваться медиазапросы, наподобие @media (prefers-color-scheme: dark). Это позволяет организовать подстройку внешнего вида значка под системную тему — тёмную или светлую.III. PNG-файл размером 180×180 для устройств AppleЕсли добавить веб-страницу на домашний экран iPhone или iPad — в качестве значка для её открытия будет использовано изображение, указанное в разделе страницы <head>, в теге, который может выглядеть как <link rel="apple-touch-icon" href="icon.png">.Устройства iPad, начиная с iOS 8+, требуют использования изображений размером 180×180 пикселей. Другие устройства могут уменьшить изображение. Если подготовить исходное изображение достаточно высокого качества, то его уменьшение не повредит конечным пользователям (мы ещё об этом поговорим).Хочу дать небольшой совет о подготовке значков, рассчитанных на устройства Apple. Значок будет выглядеть лучше в том случае, если вокруг основного изображения будет поле размером в 20 пикселей, и если фон значка будет закрашен каким-то цветом. Изображение можно обработать подобным образом, воспользовавшись любым графическим редактором.IV. Манифест веб-приложения с PNG-значками размерами 192×192 и 512×512, рассчитанными на Android-устройстваМанифест веб-приложения — это JSON-файл, содержащий сведения, необходимые браузеру для установки приложения на устройство. Формат этого файла предложен Google в рамках технологии PWA. Манифест подключается к веб-странице посредством тега, который может выглядеть как <link rel="manifest" href="path.webmanifest">. В манифесте должно присутствовать поле icons, в котором содержатся ссылки на две иконки. Одна из них, размерами 192×192 пикселя, используется для значка приложения на домашнем экране. Другая, размером 512×512, применяется в качестве экрана-заставки, показываемого при загрузке PWA. { "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] } Не забыли ли мы о чём-нибудь?Мы поговорили лишь о нескольких форматах фавиконов, но, на самом деле, существует гораздо больше их разновидностей. Некоторые из них не отличаются широкой известностью. Поэтому поговорим о том, как те значки, которые мы описали выше, ведут себя в различных ситуациях. Забегая вперёд, скажу, что, возможно, пришло время попрощаться с некоторыми форматами фавиконов, не получившими широкого распространения.Иконки для плиточного интерфейса WindowsБраузер Microsoft Edge поддерживал иконки особого формата, используемые при закреплении сайтов в стартовом меню. В современных версиях Windows это уже не нужно.Иконки для закреплённых вкладок SafariБраузер Safari выдвигал особые требования для иконок, которые предназначены для закреплённых вкладок. Но, с выхода Safari 12, на таких вкладках можно использовать обычные фавиконы. Даже на apple.com больше не используется mask-icon.Атрибут rel=«shortcut»Во множестве руководств (теперь устаревших) предлагается включать favicon.ico в HTML с помощью следующей конструкции: <link rel="shortcut icon" href="/favicon.ico"> Обратите внимание на то, что ключевое слово shortcut не является допустимым значением атрибута rel и никогда таковым не являлось. Вот отличная статья десятилетней давности, в которой можно найти соответствующие пояснения и указание на то, что конструкция rel="icon" — это всё, что нужно.Табло браузера ЯндексБраузер Яндекс основан на Chromium. Его разработкой занимается крупнейшая российская поисковая система, которой принадлежит 20% рынка поиска в России. У этого браузера есть удобная функция, которая позволяет сайтам выводить актуальные данные в виджетах, закреплённых на особой панели, называемой Табло. Для реализации этого функционала нужен особый JSON-файл манифеста, загружаемой по ссылке, значением атрибута rel которой является yandex-tableau-widget. Но оказалось, что эта возможность особой популярностью не пользуется. Компания Яндекс удалила со своего сайта соответствующую техническую документацию. В результате для нормальной работы с сайтами в браузере Яндекс достаточно обычного файла-манифеста.Браузер Opera CoastOpera Coast — это экспериментальный браузер для iOS, который требовал использования иконок особого размера — 228×228. В 2017 году браузер исчез из App Store. Я сомневаюсь, что он пережил множество обновлений iOS, которые были выпущены с тех пор.Собственно говоря, теперь, когда мы попрощались технологиями, ушедшими в небытие, поговорим о том, как подготовить универсальный набор фавиконов, подходящих для актуальных браузеров и устройств.Создание универсального набора фавиконовВот пошаговый план действий по подготовке универсального минималистичного набора фавиконов. Приступая к реализации этого плана достаточно обзавестись единственным SVG-файлом с изображением, которое должно выводиться на фавиконах.Шаг 1. Подготовка SVG-файлаПроверьте, чтобы ваш исходный SVG-файл был бы квадратным. Откройте исходный файл в вашей системной программе просмотра графики и проверьте ширину и высоту изображения. Если файл нуждается в правке — сделать это можно в любом SVG-редакторе. Например, в Inkscape можно изменить размеры документа, перейдя по пули File > Document Properties. Выровнять логотип по центру изображения можно, прибегнув к команде Object > Align and Distribute.Сохраните файл с именем icon.svg. Теперь давайте поработаем с кодом SVG-файла, подготовим этот файл к работе с темами, поддерживаемыми современными системами. Уточните у дизайнера вопрос о том, как должны меняться цвета в варианте изображения, рассчитанном на тёмную тему (если речь идёт о чёрно-белом логотипе, то достаточно просто поменять чёрный цвет на белый, а белый — на чёрный).Теперь откройте SVG-файл в текстовом редакторе. Найдите элемент <path>, в котором значение fill отсутствует или представлено тёмным цветом. Добавьте в код медиа-запрос CSS, который срабатывает при изменении темы, и соответствующим образом поменяйте цвета этого элемента: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> - <path fill="#0f0f0f" d="…" /> + <path class="a" fill="#0f0f0f" d="…" /> </svg> Шаг 2. Создание ICO-файлОткройте файл icon.svg в растровом графическом редакторе. Я рекомендую GIMP — бесплатный многоплатформенный редактор.Согласитесь с растеризацией SVG-изображения. Установите ширину и высоту изображения в 32 пикселя. Экспортируйте изображение в файл favicon.ico, используя настройки 2 bpp, 8-bit alpha, no palette.Уменьшите изображение до размеров 16×16 пикселей и проверьте его качество. Если оно окажется слишком сильно размытым — лучше будет попросить дизайнера сделать особую версию этого изображения, хорошо выглядящую в маленьком размере.Для того чтобы включить в состав favicon.ico отдельную версию значка размером 16×16 пикселей, выполните следующие действия:Откройте favicon.ico, содержащий изображение размером 32×32 пикселя. Создайте новый слой размером 16×16. Поместите изображение значка размера 16×16 пикселей на этот слой. Экспортируйте файл. GIMP сохранит каждый вариант значка в виде отдельной версии. Шаг 3. Создание PNG-изображенияСнова откройте исходный SVG-файл в растровом редакторе и создайте изображение размером 512×512 пикселей. Экспортируйте его в файл icon-512.png. Уменьшите изображение до размером 192×192 пикселя и экспортируйте его в файл icon-192.png. Далее, уменьшите само изображение до размеров 140×140 пикселей, а размеры холста установите в 180×180. Экспортируйте изображение в файл apple-touch-icon.png.Шаг 4. Оптимизация PNG- и SVG-файловЛучший инструмент для оптимизации SVG-файлов — это SVGO. Выполните следующую команду: npx svgo --multipass icon.svg Для оптимизации растровых изображений отлично подходит веб-приложение Squoosh.Откройте в Squoosh файл icon-512.png. Измените значение параметра Compress на OxiPNG. Включите установку Reduce palette. Установите количество цветов в 64. Пользуясь слайдером сравните то, как выглядело изображение до оптимизации, с тем, как оно выглядит после оптимизации. Если вы заметите различия — увеличьте количество цветов. Сохраните файл. Повторите эти действия для файлов icon-192.png и apple-touch-icon.png.Шаг 5. Подключение значков в HTMLТеперь нужно подключить favicon.ico и apple-touch-icon.png к веб-странице.Вот как это выглядит в коде статической страницы: <title>My website</title> + <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="/icon.svg" type="image/svg+xml"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Но мы рекомендуем использовать продвинутые средства для работы с кешем (речь идёт о включение в имя файла его хеша). Например, если вы пользуетесь Webpack с плагином html-webpack-plugin, выполните следующие действия:Создайте шаблон index.html. Добавьте этот шаблон в параметры плагина: new HtmlWebpackPlugin({ template: "./view/index.html" }); Опишите HTML-шаблон с включёнными в него ссылками (здесь для включения в шаблон ссылок на файлы используется ERB, но вы можете пользоваться и другим языком описания шаблонов): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" > </head> <body></body> </html> Воспользуйтесь плагином copy-webpack-plugin для копирования favicon.ico без добавления к имени файла его хеша. Совет: использование особого значка для окружения разработкиРазные фавиконы — это отличный механизм, позволяющий отличать продакшн-окружение от окружения для разработки ПО. Я полагаю, что использование альтернативного значка для окружения разработки крайне эффективно в деле предотвращения дорогостоящих ошибок.Создадим файл favicon-dev.ico, содержащий то же изображение, что и обычный фавикон, но изображение каким-то образом изменённое (это могут быть инвертированные цвета, или нечто подобное). Точно так же создадим и файл icon-dev.svg.Теперь настроим смену значков в HTML-шаблоне, проверяя условие process.env.NODE_ENV === 'production': <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="<%= + process.env.NODE_ENV === 'production' + ? '/favicon.ico' + : require('./favicon-dev.ico').default + %>"> <link rel="icon" type="image/svg+xml" href="<%= - require('./icon.svg').default + process.env.NODE_ENV === 'production' + ? require('./icon.svg').default + : require('./icon-dev.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>"> </head> <body></body> </html> Шаг 6. Создание манифеста веб-приложенияПри работе со статическим HTML-кодом нужно создать JSON-файл с именем manifest.webmanifest: { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Этот файл нужно подключить в HTML-коде: <title>My website</title> + <link rel="manifest" href="/manifest.webmanifest"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> При использовании Webpack можно воспользоваться плагином webpack-pwa-manifest: plugins: [ …, new WebpackPwaManifest({ name: 'My website', icons: [ { src: resolve('./icon-192.png'), sizes: '192x192' }, { src: resolve('./icon512.png'), sizes: '512x512 } ] }) ] ИтогиКак видите, благодаря существованию современных веб-стандартов создать универсальный набор фавиконов не так уж и сложно. Но, хотя ручное выполнение вышеописанных задач не должно отнять у вас слишком много времени, ещё лучше было бы, если бы их можно было автоматизировать. Если вы хотите создать средство для автоматизации подобных задач — пишите мне в Twitter. Я буду более чем счастлив вам помочь.Как вы готовите фавиконы для своих веб-проектов?