SVG icon formatting issues

[sadams101]

After failing tests at https://www.validbot.com/ for my site's SVG icon I had an exchange with a tech person there who said:

Quote

For the SVG icon, I could not find a link tag in your page header with the format: <link rel="icon" href="/icon.svg" type="image/svg+xml"> This header is required for SVG favicons to work in browsers and for our tests to discover it.

In the standard ISP version it has:

• rel="mask-icon" but it should be rel="mask"
• and this is missing: type="image/svg+xml"

[Jim M]

Sorry, it is unclear what exactly you're referring to here and where.

[sadams101]

In the ACP under Web App you can add a Safari mask icon. The issue seems to be how the header tag for it is formatted:

<link rel="mask-icon" href="https://www.mysite.com/uploads/monthly_2023_07/SAFARI-MASK-LOGO-NEW.svg" color="#ffffff">

should be:

<link rel="icon" type="image/svg+xml" href="https://www.mysite.com/uploads/monthly_2023_07/SAFARI-MASK-LOGO-NEW.svg" color="#ffffff">

 

Edited August 8, 2023 by sadams101

[Stuart Silvester]

mask-icon is a Safari specific thing, It was originally for those MacBook Pro's that had the touch bar so they could show a single color icon. I believe Safari may use it for other things.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

https://en.wikipedia.org/wiki/Favicon#How_to_use

[sadams101]

I will relay this to the tech contact for that scanner and let you know if they can justify why they are flagging this.

[Stuart Silvester]

They say they've retired the test because it's old - https://www.validbot.com/tests/102/safari-pinned-tab-icon.html

Outside of that, we don't currently support SVG for favicons. Not all browsers (mainly Safari) support this.