So I wanted to reproduce the issue, only to discover that I have to pay 99€ to download a beta product I'll have for free when it's ready. Procrastination suddenly became my best ally.
What you observe is unexpected because Safari usually doesn't behaves like this when there is a problem with the mask icon (eg. when the color attribute is absent). It usually falls back to its default behavior, which is to generate an icon with the first letter of the domain name (so pinning example.com creates a "E" icon). Two hypothesis:
Safari's behavior changes with Sierra. As simple as this.
Safari doesn't scale the icon anymore. If this hypothesis is true, then what you see is the 16x16 top left corner of your much larger icon (which would be empty in this example).
I updated the compatibility test, and somehow hacked it to compare the "classic", buggy, high resolution icon and the expected, 16x16 icon. Could you run it?
The first test has a 16x16 icon. You should see the expected result, which is:
If you don't see this, it means that the resolution of the icon is not the culprit.
The second test still has a high resolution icon, so this time the icon should be wrong. If hypothesis 2 is true, you should see an isosceles right triangle.