rel-mask-icon

rel-mask-icon

[79] Safari 9.0 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20>

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

[80] [whatwg] Apple's new <link rel="icon" mask> not-quite-favicon syntax causing problems in other browsers; needs standardization? (Daniel Holbert 著, 版) <https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0011.html>

[87] ( 版) <https://twitter.com/>

<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">

[88] Safari 9.0 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20>

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

[89] Re: [whatwg] A mask="" advisory flag for <link rel=icon> (Maciej Stachowiak 著, 版) <https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0059.html>

[90] Re: [whatwg] A mask="" advisory flag for <link rel=icon> (Maciej Stachowiak 著, 版) <https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0115.html>

[93] Safari 9.0 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20>

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.

[104] ( ()) <https://medium.com/mediumjp/medium%E3%81%AEpublications%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%81%AE%E6%A5%BD%E3%81%97%E3%81%99%E3%81%8E%E3%83%AF%E3%83%AD%E3%82%BF%EF%BD%97-54cf4b70498d#.kc4drc3o0>

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

[1] Allow <link rel=mask-icon color> (XhmikosR著, ) <https://github.com/whatwg/html/commit/ca61254f5d9fe3e8af5566a095393203e3a99389>

[2] Fix incorrect value space for <link>'s color="" attribute (domenic著, ) <https://github.com/whatwg/html/commit/aa06e310a8e957e816b48201fa1e7d5af5ee6585>