SVG, Favicons, and All the Fun Things We Can Do With Them

Website icons (Favicons) are small icons displayed in browser tabs, which facilitate users to quickly identify websites among many bookmarks and tabs. They are a clever design in the history of the internet and have some amazing features.

A new feature is to use SVG as a website icon. Most modern browsers support this feature and support is increasing.

Here is the code to add the website icon to the website. Place it on the website part:

<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg xml">
<link href="/manifest.webmanifest" rel="manifest">

And add the following code to the website's web application manifest:

 {
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Browsers that support SVG website icons will override the first one<link> element declaration and use the second one<link> element. Browsers that do not support SVG website icons but support web application manifests will use higher resolution images. All other browsers will fall back to using the favicon.ico file. This ensures that all browsers that support website icons have a good experience.

You may also notice the alternate attribute value declared by rel in the second line. This programmatically conveys a website icon using the .ico file format as an alternative display.

After the website icon is a line of code that loads another SVG image named safari-pinned-tab.svg . This is to support Safari's fixed tag feature, which existed before other browsers support SVG website icons. You can also add additional files here to enhance websites for different applications and services, which will be covered in more detail later.

Here are more details on the current support level of the SVG website icon:

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this version and later.

Desktop

Mobile/tablet

Why choose SVG?

You may be wondering why you need SVG. The .ico file format has been around for a long time and can support images with a maximum size of 256×256 pixels. Here are three answers:

Easy to create

Creating .ico files is troublesome. This file is a proprietary format used by Microsoft, which means you need specialized tools to create them. SVG is an open standard, which means you can use them without any additional tools or platform locking.

Future development

Retinal screen? 5K? 6K? When we use SVG files that are not related to resolution as website icons, we can guarantee that our website icons will look clear and sharp on future devices, no matter how big their display is.

performance

SVGs are usually very small files, especially compared to their raster image counterparts – especially if you optimize them in advance. By using only 16×16 pixel website icons as a backup solution that does not support SVG browsers, we provide a combination of high support and smaller file sizes.

This seems a bit extreme, but when it comes to network performance, every byte is important!

Skill

Another advantage of SVG is that we can embed CSS directly inside it. This means we can dynamically adjust them using JavaScript, provided that SVG is declared inline, rather than using<img alt="SVG, Favicons, and All the Fun Things We Can Do With Them" > Element embedded.

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

Since SVG website icon is used<link> Elements are embedded, so they cannot be modified using JavaScript. However, we can use emoji and media queries.

Emoji

Lea Verou has a genius idea of ​​being in SVG<text></text> Emojis are used within the element to create a quick website icon with a transparent background that is also clear in small sizes.

In response, Chris Coyier made a neat little demo that allows you to try out the concept.

Dark mode support

Both Thomas Steiner and Mathias Bynens independently discovered the idea that using prefers-color-scheme media queries to provide dark mode support. This work is based on Jake Archibald's exploration of SVG and media queries.

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark 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"></path>
</svg>

For supported browsers, this code means that our star SVG website icon will change its fill color from black to white when dark mode is activated. Very clever!

Other media inquiries

Dark mode support reminds me: if SVG can support prefers-color-scheme , what else can we do with them? While support for Level 5 media queries may not exist yet, here are some ideas to consider:

• Use light-level to desaturate website icon colors in low light environments.
• Use inverted-colors to "flip" to invert the color to retain the brand, or make sure the photo-realistic website icons appear as expected.
• Use prefers-reduced-motion to delete the website icon animation. Ideally, we should avoid animate website icons first, as they can be a cause of attention deficit hyperactivity disorder and other related disabilities.
• Use forced-colors and/or Windows high contrast mode media queries to ensure that website icons maintain visual effects in high contrast color environments! Remember to use color keywords to keep the color dynamic of your website icons!

Stay clear

Another important aspect of a good website icon design is to make sure they look good in the small browser tag area. The secret to this is to align the path of the vector image with the pixel grid, a guide used by computers to convert SVG math into bitmaps we see on the screen.

Here is a simplified example using square shapes:

The anti-aliasing effect that computers use to smooth the shapes is not needed when the vector points of the square are aligned with the pixel grid of the artboard. When the vector points are not aligned, we get the "smear" effect:

Vector editing programs such as Figma, Sketch, Inkscape, or Illustrator can be used to adjust the position of vector points on the pixel grid. These programs also export SVG. To adjust the position of a vector point, use the exact selection tool to select each node and drag it to the desired position.

To look good at such a small size, some more complex icons may need to be simplified. If you are looking for a good starter guide in this regard, Jeremy Frank wrote a very good two-part article on Vidget.

Take one extra step

In addition to website icons, there are many different (unfortunately proprietary) ways to use icons to enhance their experience. These include the aforementioned Safari's fixed tag icon¹, chat app expansion, fixed Windows Start Menu tile, social media preview, and home screen launcher.

If you are looking for a great place to start using these enhancements, I really like realfavicongenerator.net.

An interesting thing about the history of website icons: Internet Explorer is the first browser to support them, and they were sneakily added at the last minute by a developer named Bharat Shyam:

The story is like this, late at night, Shyam is developing his new website icon feature. He called Junior Project Manager Ray Sun to take a look.

Shyam commented, "This is good, right? Check in?", requesting permission to sign code into the Internet Explorer code base so that it can be released in the next version. Sun didn't think much about it. This feature is cool and obviously will give IE a better advantage. So he told Shyam to keep adding it. That's it, the website icon goes into Internet Explorer 5, which will become one of the largest browser versions of the web ever.

The next day, Sun was scolded by the manager for allowing the feature to pass so quickly. It turns out that Shyam waited deliberately until later that day, and he knew that an inexperienced project manager would let him pass. But by then, the code had been merged. By the way, you'll be surprised at how many relatively major browser features sneak into the version like this.

Excerpt from How We Get Website Icons by Jay Hoffmann

I'm glad to see the platform paying some attention to the website icon. They have long been one of my favorite tiny design details and I'm glad they have become more responsive to what users want. If you have time, why not add the SVG website icon to your project as Bharat Shyam did in 1999?

¹ I can't determine if Safari will implement SVG website icon support, but I want them to do so. Has anyone heard of anything?

The above is the detailed content of SVG, Favicons, and All the Fun Things We Can Do With Them. For more information, please follow other related articles on the PHP Chinese website!