title: Apple Touch Bar Favourites Icon for Website Not Working
body: <p>So I'm building a website and I can't get the svg icon to show up correctly on my MacBook's Touch Bar when I add the site to my favourites list. </p>
  
  <p>The webpage in question can be found here: <a href="http://japesfawcett.com" rel="nofollow noreferrer">http://japesfawcett.com</a></p>
  
  <p>I have an SVG file that is a black thunderbolt on a white background, and I am using the following code for the Touch Bar icon:</p>
  
  <pre><code>&lt;link rel="mask-icon" href="img/favicon.svg" color="#000000"&gt;
  </code></pre>
  
  <p>The code of the SVG is as follows:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 100 100;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
          .st0{fill:#231F20;}
      &lt;/style&gt;
      &lt;path class="st0" d="M41.3,45.9c2.4,1.6,4.6,0.3,7.4,0.1c-1.7,3.4-3.3,6.5-4.8,9.6c-0.6,1.3-0.9,2.8-1.5,4.1  c-0.6,1.3-1.4,2.5-1.9,3.8c-2.2,5.2-4,10.6-6.6,15.5c-2,3.7-2.7,7.6-4.4,11.6c0.9,0.5,1.8,0.9,2.9,1.4c4.6-6.2,9.2-12.3,13.7-18.5  c4.8-6.4,8.3-13.5,11.9-20.6c1.6-3.2,4.1-6.1,6.4-8.9c2.6-3.2,5.4-6.1,6.2-10.3c-4-2.7-8.7-1.7-13.3-2c2.2-6.7,4.2-13.1,6.3-19.6  c0.5-1.4,1-2.8-0.6-4.1c-4.4,1.1-6.1,5-8.1,8.4c-2.7,4.6-5,9.4-7.5,14.1c-1,1.8-2.1,3.4-3.1,5.2C42.5,38.7,41.3,42,41.3,45.9z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>For some reason the Touch Bar icon for the site is appearing all white with no image visible in it. I can't get the SVG to be visible at all!</p>
  
  <p>If anyone has any insights as to how to fix this it'd be greatly appreciated, it's been driving me mad!</p>