So I just updated this yesterday but I didn’t realize Safari only takes the silluoutte and not the actual icon. It just looks like a yellow ball right now. Not sure what to improve.
It’s mild gibberish to me, but the favicon and the safari tab icon are different:
Providing the Vector Image
Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent (replacing "website_icon" with your own file’s name).
In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value ( #990000 ), an RGB value ( rgb(153, 0, 0) ), or a recognized color-keyword, such as: red , lime , or navy .
Note: Adjust your artwork as needed for the best presentation in the color you’ve specified. The pinned tab icon will not accept additional colors. You can improve the visibility of your icon by avoiding a light color, such as white, bright yellow, or light gray.
Oh I know, I had to make the vector graphic for this feature request. I did but then I realized that it only uses the silhouette, which means you only see the shadow of the logo. Anyway, it’s no longer a red N.