Putting a contoured outline on the favicon

src/icon.svg

@@ -1,18 +1,26 @@
 <?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 512 512">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-  <style><![CDATA[
+  width="1024px" height="1024px" viewBox="0 0 512 512">
-    rect {
-      stroke: #000;
-      stroke-width: 5px;
-    }
-  ]]></style>
   <defs>
+    <path id="outline" d="
+      M 10,256
+      C 10,10 10,10 256,10
+        502,10 502,10 502,256
+        502,502 502,502 256,502
+        10,502 10,502 10,256
+    " />
+
     <radialGradient id="shade" cx="0.5" cy="0.5" fx="0.5" fy="0" r="1">
       <stop stop-color="#000" stop-opacity="0.0" offset="0%" />
       <stop stop-color="#000" stop-opacity="0.4" offset="100%" />
     </radialGradient>
+
+    <clipPath id="cutout">
+      <use xlink:href="#outline" />
+    </clipPath>
   </defs>
-  <rect x="0" y="0" width="512" height="512" fill="#bada55"></rect>
+  <rect x="0" y="0" width="512" height="512" fill="#bada55" clip-path="url(#cutout)" />
-  <rect x="0" y="0" width="512" height="512" fill="url(#shade)"></rect>
+  <rect x="0" y="0" width="512" height="512" fill="url(#shade)" clip-path="url(#cutout)" />
+  <use xlink:href="#outline" fill="transparent" stroke="#000" stroke-width="5px" />
   <path transform="translate(-103 -155) translate(256 256)" d="M 64.8 276 L 0 292.8 Q 10.8 239.6 20.8 188.8 Q 24.4 167.2 28.8 143.8 Q 33.2 120.4 37 97.4 Q 40.8 74.4 44.2 53 Q 47.6 31.6 49.6 14 Q 72.4 6.8 98.8 3.4 Q 125.2 0 151.2 0 Q 166.8 0 177 3.6 A 45.523 45.523 0 0 1 184.953 7.248 A 32.618 32.618 0 0 1 193 13.8 Q 198.8 20.4 201.2 29.2 Q 203.6 38 203.6 48.8 Q 203.6 64.8 198 80.2 Q 192.4 95.6 183 109.4 Q 173.6 123.2 161.4 134.6 A 117.006 117.006 0 0 1 137.809 151.814 A 109.09 109.09 0 0 1 135.2 153.2 Q 142.4 169.2 150.6 188.2 Q 158.8 207.2 166 224.4 Q 174 244.4 182.4 264.4 L 120.4 286 Q 112.4 258.4 106 234 Q 103.2 224 100.4 213.4 Q 97.6 202.8 95.2 193.4 Q 93.138 185.322 91.666 178.869 A 382.514 382.514 0 0 1 91.2 176.8 Q 89.881 170.866 89.378 167.106 A 45.473 45.473 0 0 1 89.2 165.6 L 84 167.2 Q 82.35 176 80.227 187.447 A 17681.562 17681.562 0 0 0 78.2 198.4 Q 74.8 216.8 72 234 Q 68.4 254.4 64.8 276 Z M 106.8 55.6 L 94 119.2 A 34.41 34.41 0 0 0 99.627 118.083 Q 105.291 116.501 112.375 112.915 A 110.672 110.672 0 0 0 112.6 112.8 Q 123.6 107.2 133.6 99.4 Q 143.6 91.6 150.8 83.2 A 46.45 46.45 0 0 0 154.199 78.756 Q 157.503 73.796 157.935 69.634 A 11.948 11.948 0 0 0 158 68.4 A 11.199 11.199 0 0 0 157.606 65.354 A 8.401 8.401 0 0 0 155.2 61.4 A 14.587 14.587 0 0 0 152.151 59.259 Q 150.674 58.465 148.866 57.853 A 28.502 28.502 0 0 0 147.4 57.4 A 49.778 49.778 0 0 0 140.847 56.053 A 62.206 62.206 0 0 0 136.4 55.6 A 184.322 184.322 0 0 0 125.594 55.207 A 202.408 202.408 0 0 0 124 55.2 Q 119.6 55.2 115 55.4 A 233.913 233.913 0 0 1 111.166 55.537 Q 109.41 55.585 107.832 55.597 A 137.33 137.33 0 0 1 106.8 55.6 Z" vector-effect="non-scaling-stroke"/>
 </svg>