I have noticed that the Safari Pinned Tab is now black for my site. Viewing the site in any other browser displays the favicon OK. This includes FireFox, Chrome, Edge (Windows 10) in Linux, Windows 10 Pro and Mac OS.
It does not seem to matter what machine/device this is done from, it is consistently wrong. It used to be OK.
I tried deleting and adding back in a new SVG but it has not helped.
In MacOS 10.13 it does not show at all.
I am running the latest version of Rapidweaver 8.2.1 (20758)
Is it possible that both your SVG image and the background are black? (By background, I mean the green area in my screenshot.)
No. I intentionally picked white as the background colour. I also tried different images as well of different sizes.
Another thing I tried was to delete all the files on website (clean site) and to create a new project where I deleted all graphics files from the project.
It is still the case that the tab icon is black.
I checked my files on server and I noticed, that RW now exports pinned-tab file within the resources folder instead of in the root of public_html. I think this might be the reason for your issue. Try to upload your pinned-tab SVG to your public_html folder at the root level (same level as your home page)—I assume your server runs Apache. You will need to use an FTP app for that.
In my screenshot, Nr 1 shows where previous versions of RW were uploading a pinned-tab image. Nr 2 shows where latest versions of RW are uploading it. As you can see, Nr 1 is on a different level (public_html) and Nr 2 is inside the resources folder.
Could this be a bug that slipped through in RW 8.x?
Tagging @tpbradley to see if this might be a bug…
Thank you for the reply.
I checked that and I now have two versions of the svg. However, it still does not work.
I did clear the cache and I republished the entire site.
The only thing I am wondering now is that perhaps the svg is not correct.Due to all the messing about trying to solve this, I have forgotten what the original svg was. This time I have named it something obvious so as not to be confused with other icons.
I have not been able to find what the actual dimensions should be. In my case I have used a 128x128 flattened svg.
I did see the following article: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW2
as well as https://developer.yoast.com/safari-pinned-tab-icon-mask-icon/
What confuses me is the reference to “Use 100% black for all vectors”.
I tried out all the various options including manually placing the svg into the root of the site as well as in the resources folder. I tried different resolutions and I tried adding the following to the header " <link rel=“mask-icon” href=“website_icon.svg” color=“red”>".
I also uploaded the complete site to be sure, cleared my local cache and also removed the line of code from the header as it did not work. Now I no longer have a black box in the tab. I have nothing.
I suppose that is better than a black box but this is very frustrating.
I don’t know really how but I seemed to have solved it after having made endless changes and re-publishing the entire site.
In the end I deleted the Safari Pinned Tab under Web Icons. I then added the svg file to the host in both the root and in the resources folder (probably pointless). The latter did not help.
I then added the following code to the head
"link rel=“apple-touch-icon” href=“https://example.com/resources/apple-touch-icon-57x57.png”
" (used a png reference). (ps there is a < before link) and now every page has the tab icon.
I don’t fully understand this but, I will leave well enough alone now.
I’m glad you’ve solved your problem. From your posts, it seems like a lot of work, which is surprising, because it shouldn’t be. Which application you use to create SVGs? I use Affinity Designer and it makes my work very easy at exporting SVG images, on rare occasions when I need them. I then place them in RW’s Web Icons wells and everything works.
I left my pinned-tab icon (along with Apple touch icon and favicon) in the root. I am going to remove them from resources and see if that will work.
Thanks for your input.
I believe there must be something else happening. It never used to be a problem in the past. I tested this on a completely new and bare two page site and it also had strange behaviour.
I will leave well enough alone.
I use Affinity for the SVGs as well.
I was confused by the descriptions for the pinned icons. What size do you use and just a flat svg?
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
