audreyfeldroy / favicon-cheat-sheet

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
MIT License
9.85k stars 413 forks source link

Safari's pinned mask-icon, as modified in OS X 10.11 #75

Open grazianoappbuilder opened 5 years ago

grazianoappbuilder commented 5 years ago

Hi, I found in GitHub's page itself a html element with the "mask-icon" attribute that I didn't know about. This tutorial explains that it was introduced by Apple for Safari's pinned mask icons. There's already a pull-request on this topic, but it's outdated, as Apple eventually changed the syntax. Quoting 1st paragraph:

With the release of Mac OS X 10.11, Safari finally got pinned tabs. While all other browsers use a site’s favicon for the pinned tab, Apple deemed that “not esthetically pleasing enough” and created a new type of icon for it, which they call a “mask-icon”. By default, they’ll use the first letter of your domain if you don’t have such an image. You need a black SVG image, a hover color and some time to do a tiny bit of coding.

Could you please integrate it in your document? I am new user and I'm not skilled in GitHub (unfortunately). Thanks. Graziano