<link rel="icon" sizes="any" mask href="website_icon.svg">

<meta name="msapplication-TileImage" content="//abs.twimg.com/favicons/win8-tile-144.png"/>

<meta name="msapplication-TileColor" content="#00aced"/>

<link rel="icon" sizes="any" mask href="https://abs.twimg.com/a/1438866985/img/t1/favicon.svg">

<meta name="theme-color" content="#55acee">

<link href="//abs.twimg.com/favicons/favicon.ico" rel="shortcut icon" type="image/x-icon">

Note: This markup should be placed before other <link rel="icon"> elements to avoid compatibility issues with existing icons.

inned sites allow your users to keep their favorite websites open, running, and easily accessible.

You can set the pinned tab icon for your site by providing a vector image. Use an SVG image with a transparent background and 100% black for all vectors. Add the following markup to all your pinnable webpages, replacing "website_icon" with your own file's name:

<link rel="mask-icon" href="website_icon.svg" color="red">

In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value (#990000), an RGB value (rgb(153, 0, 0)), or a recognized color-keyword, such as: red, lime, or navy.

<link rel="mask-icon" href="https://cdn-static-1.medium.com/_/fp/icons/favicon.KjTfUJo7yJH_fCoUzzH3cg.svg" color="#171717">