I am currently developing a website for a client and I am in the process of setting up the Favicons. I've just for the first time come up to applying a logo to the touch bar bookmark but it seems very small in comparison to my other bookmarks logos
Does anyone know what the code is to make this display properly?
Hi alexlamond,
Icons in Touch Bar use several different icon file formats as fallbacks:
Pinned Tab Icon
The prefered icon format is to use an SVG mask icon, otherwise known as Pinned Tab icons. Here is documentation on how to properly implement a Pinned Tab icon for websites:
All vectors in an SVG file should only be in 100% black vectors, not full color. The color of the icon is specified in the markup. Note that the viewBox attribute should be included in your SVG file markup:
<svg … viewbox="0 0 16 16">
…
</svg>Apple Touch Icon
Apple Touch icons were originally designed for web applications getting saved to the home screen on iOS. Today they are also used in Safari on macOS for the Favorites view, when setting your Safari ˃ General Preferences to show "Favorites" when opening new windows or tabs, and as the first fallback option for website favorite icons displayed on Touch Bar in Safari.
Webpage Favicon
This is the favicon standard, which supports PNG, GIF or ICO file formats. It is the last icon art fallback option for favorites displayed on Touch Bar.
<link rel="icon" href="favicon.png">Generated Monogram
After all icon format options are exhausted, a monogram is generated for the first letter of the page title or the top-level domain name.
I hope that is helps!