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"

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

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, 20231 yr by sadams101

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

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

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.