Are you using SVG favicons yet? A guide for modern browsers

栏目: IT技术 · 发布时间: 4年前

内容简介:You should be using SVG favicons. They’re supported in all modern browsers right now.Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word.Th

Are you using SVG favicons yet? A guide for modern browsers.

Are you using SVG favicons yet? A guide for modern browsers

You should be using SVG favicons. They’re supported in all modern browsers right now.

Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word.

Are you using SVG favicons yet? A guide for modern browsers

Icon

The main favicon can be an SVG of any size. The type type=”image/svg+xml” is unnecessary.

<link rel="icon" href="favicon.svg">

Mask icon

For Safari, it’s a bit different. You need to add a mask-icon . It’s also an SVG, but it has to be made of a single colour and placed on a transparent background. The browser adds the colour of the attribute.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

Touch icon

The icon for iOS devices as well as favourites from browsers new tab page and more. You only need the 180 x 180 size, and the sizes attribute is superfluous.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Manifest

The manifest.json provides information about your web app or website. These lines are mandatory to pass Lighthouse ’s test. The icon linked is used by Android and Chrome. The largest size 512 x 512 is the only one needed.

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

The theme-color meta is still required for Android’s Chrome browser colour.

<meta name="theme-color" content="#ffffff">

Done

That’s it, that’s all the icons you need for the current modern browsers, everything else is unnecessary. The msapplication-TileImage can be added if you want a different icon in Windows tiles otherwise the apple-touch-icon is used. The TileColor isn’t used anymore.

Everything else

Sadly, not everyone is on modern browsers yet BUT it can be easily resolved by dropping a 32 x 32 favicon.ico at the root of your website. This works everywhere else, even at your grandma’s.

Are you using SVG favicons yet? A guide for modern browsers

Dark mode

To finish, here’s a tip for dark mode. One of the benefits of an SVG favicon is that you can change the colour with CSS. Using the prefers-color-scheme media query, the colour of your favicon changes with the users dark or light mode. This method won’t work with the mask-icon since the colour is in the attribute but Safari adds a white background if there isn’t enough contrast.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>

Are you using SVG favicons yet? A guide for modern browsers

Result

Here’s the final result. Copy this in the <head> of your website and don’t forget to place a favicon.ico at the root. :v:

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通Windows应用开发

精通Windows应用开发

[美] Jesse Liberty Philip Japikse Jon Galloway / 苏宝龙 / 人民邮电出版社 / 59.00元

Windows 8.1的出现不仅提供了跨设备的用户体验,也提供了跨设备的开发体验。本书着眼于实际项目中所需要的特性,以及现有C#编程知识的运用,对如何最大限度地利用Metro、WinRT和Windows 8进行了讲解,内容详尽,注重理论学习与实践开发的配合。 Windows 8.1和WinRT的作用及其特殊性 如何使用先进特性创建具有沉浸感和吸引力的Windows 8.1应用 如......一起来看看 《精通Windows应用开发》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具