Impossible to validate page due to favicon error

Hi,

Unfortunately, no, there is no easy workaround. Apple introduced proprietary material while defining the icon of the pinned tabs for Mac OS X Safari. So as soon as you declare this icon, the validation fails.

At least for the moment, RFG has no option to disable this icon: you have to create it.

To conclude on a more positive note: web pages are full of such validation errors. It’s always frustrating to get a validation report with red entries, but in real life, it just doesn’t matter.

Okay, I understand. Thank you.

But, what do you mean by

At least for the moment, RFG has no option to disable this icon: you have to create it.

? Specifically the “you have to create it” part.

When you create your icons with RFG, you have no “Do not generate the pinned tab icon” option. This icon is created no matter what.

So do I……
On https://validator.w3.org
insert https://www.bakekaincontritalia.it
and….

“
Error: Attribute color not allowed on element link at this point.
From line 104, column 1; to line 104, column 93
st.json”>?<link rel=”mask-icon” href=”/wp-content/uploads/fbrfg/safari-pinned-tab.svg” color=”#5bbad5″>?<link
Attributes for element link:
Global attributes
href
crossorigin
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element.
“

What I must do??

Unfortunately the plugin offers no workaround for this at the moment. If the validation error is a blocking issue for you, then you shouldn’t use the plugin.

As an aside: is this issue critical for you? I mean:

• All pages, including famous ones (Google’s homepage, Amazon’s homepage…) have validation errors at some point.
• Although this attribute is not W3C compliant, it is introduced by Apple so this is the kind of proprietary feature which is supposed to spread across the web, whatever it is correct or not.

So from my point of view, this is the kind of error that can be safely ignored. But if that’s not the case for everyone, I would like to know the context (eg. “hard corporate policy”, “customer doesn’t want any error”, etc.).

Ok ok, I safely ignored it.
Thz 1000.

Just an idea: The generated SVG file is an XML file (plaintext). What happens if the string ‘fill=”#000000″‘ is replaced by e.g. ‘fill=”#5bbad5″‘ and the color attribute is left out of the link tag?

Unfortunately, I have no Safari at hand to test if the icon will have the desired color.

I have no Mac OS at hand to test this either. All I can say right now is that it’s not that simple. The icon is not displayed as is, Safari plays with its colors to create an effect whenever the tab is hovered (see https://youtu.be/KJDIc6wAnzw?t=1m8s for a demo). This is why the icon, while expected to be black and white, never appears to be black and white when displayed by Safari.

But it’s worth trying, just to see what happens! Unfortunately I won’t be able to do this soon…

@all,
I can confirm that @Ix66‘s suggestion of replacing the fill colour with the theme colour does work in Safari (OSX 10.11.6 El Capitan, Macbook Pro Retina Early 2015):

Screengrab of pinned icon and svg code

I also ran the generated svg through Jake Archibald’s svgomg and streamlined the code by removing the width & height attributes and replacing the viewport dimensions following the same recommendations for Creating Pinned Tab Icons on the Apple developers site.

While that page does state:

“Use 100% black for all vectors with a transparent background in SVG format […]“

I feel that if there’s going to be as much discrepancy between the governing bodies we should be given the freedom to choose for ourselves which route to take! ??

Hope this helps!

• This reply was modified 8 years, 6 months ago by Jon Humphrey. Reason: updating image path
• This reply was modified 8 years, 6 months ago by Jon Humphrey. Reason: updating screengrab image path again
• This reply was modified 8 years, 6 months ago by Jon Humphrey. Reason: removing erroneous html comment
• This reply was modified 8 years, 6 months ago by Jon Humphrey. Reason: can't use q tags apparently for inline quotes!

Thank you for this comprehensive feedback.

This viewBox thing is on its way.

I didn’t know about svgomg and just made a simple try. Wow! I definitely need to investigate this!