# RW Tip: Adding a favicon for Safari’s new pinned tabs **URL:** \ **Category:** RapidWeaver Classic\ **Created:** [September 16, 2015, 5:06pm UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603 "2015-09-16T17:06:20Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![ElliotEKJ](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elliotekj/32/3705_2.png) [@ElliotEKJ](https://forums.realmacsoftware.com/u/ElliotEKJ)\ **Post date:** [September 16, 2015, 5:06pm UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/1 "2015-09-16T17:06:20Z")
Hey folks, Safari 9.0, coming in the El Capitan release, will introduce pinned tabs which will support a custom pinned-tab favicon. Example: ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/1X/5c0d5880ece2b38e54df31473a42c3c499360caf.png) You can find the full docs for creating them [here](https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20). If you want to add one to your RW project you can do so very easily as RW supports SVGs. Here’s how: 1. Create your favicon. As the docs say, it should be a full-black on transparent SVG. I’d recommend Sketch as a vector drawing tool, you can get a free trial for it [here](http://bohemiancoding.com/sketch/). 2. Drag it into the resources area in RW. 3. Go to the site-wide code area in your project settings and within the “Head:” section paste the following: `` `website_icon.svg` should be changed to whatever you named your SVG. See the docs for info about changing it’s colour. And that’s it 😄 Have a good evening/day. ---
**Author:** ![peterdanckwerts](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/peterdanckwerts/32/22443_2.png) [@peterdanckwerts](https://forums.realmacsoftware.com/u/peterdanckwerts)\ **Post date:** [September 16, 2015, 5:41pm UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/2 "2015-09-16T17:41:53Z")
Thanks! A useful tip ---
**Author:** ![wwinter86](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/wwinter86/32/21884_2.png) [@wwinter86](https://forums.realmacsoftware.com/u/wwinter86)\ **Post date:** [September 28, 2015, 7:00pm UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/3 "2015-09-28T19:00:41Z")
It doesn’t seem to work for me, not sure what I’ve done wrong. But here is the code I used: ``` ``` I put the code into Code -\> Head and the file is in resources with the right file name. Any ideas please? ---
**Author:** ![nikf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/nikf/32/10_2.png) [@nikf](https://forums.realmacsoftware.com/u/nikf)\ **Post date:** [September 29, 2015, 9:21am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/4 "2015-09-29T09:21:59Z")
A live site link would be the easiest way to look into this… ---
**Author:** ![wwinter86](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/wwinter86/32/21884_2.png) [@wwinter86](https://forums.realmacsoftware.com/u/wwinter86)\ **Post date:** [September 30, 2015, 12:37am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/5 "2015-09-30T00:37:31Z")
Thanks 😄 [www.williamcodywinter.com](http://www.williamcodywinter.com) ---
**Author:** ![nikf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/nikf/32/10_2.png) [@nikf](https://forums.realmacsoftware.com/u/nikf)\ **Post date:** [September 30, 2015, 8:17am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/6 "2015-09-30T08:17:11Z")
Just visited the site, and it appears just fine in Safari with a blue highlight. Might be worth resetting Safari (Clear Caches etc) and give it another try. —N ---
**Author:** ![wwinter86](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/wwinter86/32/21884_2.png) [@wwinter86](https://forums.realmacsoftware.com/u/wwinter86)\ **Post date:** [October 2, 2015, 9:06pm UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/7 "2015-10-02T21:06:51Z")
Well, what it seemed to be using was a generic blue icon with a W in the middle (maybe taking first letter of my domain name). But I figured out what was wrong, not only does the SVG image have to use black pixels but the image also has to be square (i.e. 1:1). ---
**Author:** ![garageshop](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/garageshop/32/366_2.png) [@garageshop](https://forums.realmacsoftware.com/u/garageshop)\ **Post date:** [March 19, 2016, 7:11am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/8 "2016-03-19T07:11:17Z")
The Apple Developer link is broken. ☹ Can;t seem to get it to work on my site. > **[Welcome to VBS on the Web!](https://vbsonline.org/)** > > VBS online is our online resource for a new model for doing VBS. Thanks for the tutorial. Blessings, —Mark ---
**Author:** ![annebourdon](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/annebourdon/32/2391_2.png) [@annebourdon](https://forums.realmacsoftware.com/u/annebourdon)\ **Post date:** [March 19, 2016, 11:41am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/9 "2016-03-19T11:41:13Z")
> [@garageshop](#): > > [Vbsonline.org](http://Vbsonline.org) it works but I obtain a black rectangle with very small points (the stars). I think you have the good technique but the svg image is not good for a pinned tab ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/6/67786dd487b3775d372b716af44d02aac7787621.png) ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/c/c370a5a16a129177e34482f47c8ae0f1ccb6ff9b.png) ---
**Author:** ![RandyBonnette](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/randybonnette/32/15900_2.png) [@RandyBonnette](https://forums.realmacsoftware.com/u/RandyBonnette)\ **Post date:** [August 8, 2019, 7:02am UTC](https://forums.realmacsoftware.com/t/rw-tip-adding-a-favicon-for-safari-s-new-pinned-tabs/2603/10 "2019-08-08T07:02:46Z")
> [fastessaywriter](https://writemyessaytoday.net/) wrote: > Well, what it seemed to be using was a generic blue icon with a W in the middle (maybe taking first letter of my domain name). > But I figured out what was wrong, not only does the SVG image have to use black pixels but the image also has to be square (i.e. 1:1). > [www.williamcodywinter.com](http://www.williamcodywinter.com) Hello, I’ve been using Sketch as a drawing tool for my website projects. But I cannot find the tutorial how to create custom pinned-tab favicons. Could you please share the Apple Developer library guide? The page suggested by the OP cannot be found. Thanks.