The New Favicon
The
hrefpoints to an SVG file and thecoloris used to draw the vector shape contained in the file (the background color for the tab changes depending on whether the browser window is active and if it’s selected.)The documentation states that the graphic should be a vector shape filled with black. In our first test, we used a fill color that wasn’t black: the image is used as a mask, so the opacity of a filled shape is the only thing that matters. Any opacity in the shape’s fill color will be used, but we don’t recommend using it (and you’ll see why in just a second.)
[…]
Of course, at such a small size, a hand-tuned bitmap graphic would be a better choice.
[…]
It’s our guess that the company has other plans for these files. They currently only appear in pinned tabs, but as more sites support this new style of “favicon”, it’s likely that they’ll make their way into lists for browser history or frequently visited sites.
[…]
Of course you’ll want to preview your work as you tune your vectors. Safari caches the SVG files, so it takes a bit of effort to clear the old data and see your changes.
