Web Icons in RW8

Classic General
1

Some guidance, please. I have made png files of the dimensions specified and they appear to have loaded without a problem. However for the Safari pinned tab icon, the svg icon I have made isn’t showing up, although when I load my site in Safari, the old default letter icon for the pinned tab has disappeared — so it seems to think there should be something new there. (Actually there is a simple circle when the pinned tab is unselected.)

I have made the svg icon square with black on a transparent background. I understand you should be able to specify the colour it displays but do not see where to enter that information.

Also, in RW itself on the web icons panel, there are two svg slots. Where there are png slots the smaller ones either populate themselves or can be selected for a separate icon, but the smaller svg slot doesn’t have anything in it and can’t be selected.

Finally, where in the exported file structure do these files go? I have looked through my export folder but cannot see them anywhere. I should like to be able to access them directly on the server in case I need to change something.

2

Use 100% black for all vectors with a transparent background in SVG format.
Important: The SVG file must be a single layer and the viewBox attribute must be set to "0 0 16 16" .
– from Apple developer docs

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

1 Like
3

Is there info about how to use the Web Icons section in RW 8? I was hoping that I could create one image and RW 8 would do all the others for me. That seems to work except for the SVG.

4

RW will generate all the images for you, but not the svg. As the svg is a different animal with a different set of guidelines (above) it’s probably best this way.

2 Likes
5

Thanks. I finally managed to get the view box attribute set correctly, but it still doesn’t work. If any kind soul is willing to look at my file I have put it at https://www.dropbox.com/s/8r116l2c05bjbxa/wolf-silhouette.svg?dl=0 — but maybe it is something else?

BTW I discovered the the small box alongside the SVG icon box on the RW Web Icon page is for the colour (which is specified in the header), so it is unlike all the PNG ones which have scaled-down icons.

6

Try creating your icon on a square art board in Illustrator, instead of exporting the curves alone, export the art board it’s self as an svg. This way your guaranteed the file is square. Your’s is not and may be the cause.

I just looked at my own on the Doobox site, which was no longer working either. Mine was not square either. Made it square, as above, and it started working again right away.

Note: Mine is not 16px square as Apple docs recumbent. Mine is 200px x 200px, but it works none the less.

7

There’s some big players out there that haven’t even properly implemented the pinned tab icon

image
image4032×3024 2.6 MB

8

When I created mine I originally tried to make the the svg pinned tabbed icon in Photoshop - and couldn’t get it to work no matter how I fiddled with it. I then used the site https://realfavicongenerator.net/ to create it from one of my other format images and it worked perfectly the first time.

1 Like
9

Had a couple of goes with this - first time it produced an svg file which had the wrong view box attributes. I still ended up having to edit it in a text editor and import/export from Illustrator. I think I have it working now, though — thanks!

10

Erm, actually the only thing with this is if you implement their suggestions in full it can clash with RW’s own procedures. I have ended up with icons in different places that are different. RW appears to save its web icons in /Resources but these ones are supposed to be at root level. I may clear out the ones I don’t think I need …

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.