Atribute error on element link used for safari favicon

Hello,

First I apologize for any spelling mistakes. English is not my first
language.

I've just used favicon generator on realfavicongenerator.net. This gives me
the following html code for html5:

<link rel="apple-touch-icon" sizes="57x57"
href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
href="/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
href="/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
href="/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png"
sizes="32x32">
<link rel="icon" type="image/png"
href="/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png"
sizes="96x96">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png"
sizes="16x16">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg"
color="#ed1e78">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#ed1e78">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Next thing I do is check the code on https://validator.w3.org. This gives
me the following error:

*Error*: Attribute color not allowed on element link
<http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-link-element>
at
this point.

<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg"
color="#ed1e78">

[image: Inline afbeelding 1]
How do I solve this? I don't know where else to ask this question anymore.
I couldn't find an answer true google or any forum and using the
color-atribute is the official way to do this for the Safari pinned tab
according to the Apple website.


Kind regards,
Christiaan Huizinga

Received on Monday, 11 January 2016 21:30:47 UTC