はじめに
モダンな Web ブラウザは favicon 用の画像として SVG を認識するらしい.さらに SVG では閲覧者の UI モードに応じて描画内容を変更できるらしい.というわけで以下の記事を参照して当サイトの favicon を作成した.
SVG 作成
まずは元となる SVG を用意する.「葵」の文字を favicon としたい.
Google Font to Svg Path にて以下の SVG を生成した. Thanks!
<svg width="88.401" height="89.3" viewBox="0 0 88.401 89.3" xmlns="http://www.w3.org/2000/svg">
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="#000" style="stroke:#000;stroke-width:0.25mm;fill:#000">
<path d="M 46.901 65.4 L 72.701 64.3 Q 74.301 64.2 74.301 63 Q 74.301 62.1 73.501 61.3 A 7.236 7.236 0 0 0 71.754 60.002 A 6.129 6.129 0 0 0 71.751 60 A 9.838 9.838 0 0 0 71.361 59.805 Q 70.77 59.527 70.458 59.502 A 0.736 0.736 0 0 0 70.401 59.5 A 0.728 0.728 0 0 0 70.294 59.51 Q 70.07 59.544 69.601 59.7 Q 68.801 60.1 67.951 60.2 Q 67.101 60.3 65.901 60.4 L 44.801 61.3 Q 45.301 59.3 45.701 57.05 Q 46.101 54.8 46.301 52.4 L 56.901 51.8 Q 58.074 51.662 58.437 51.143 A 0.922 0.922 0 0 0 58.601 50.6 A 1.15 1.15 0 0 0 58.509 50.182 Q 58.255 49.541 57.301 48.55 A 5.958 5.958 0 0 0 56.529 47.867 Q 56.072 47.534 55.615 47.367 A 2.65 2.65 0 0 0 54.701 47.2 Q 54.501 47.2 54.301 47.25 Q 54.101 47.3 53.901 47.4 A 9.22 9.22 0 0 1 52.687 47.718 A 7.923 7.923 0 0 1 52.151 47.8 Q 51.301 47.9 50.101 48 L 31.901 49 L 30.901 49 Q 29.401 49 27.901 48.7 A 82.381 82.381 0 0 0 31.932 44.983 Q 33.821 43.114 35.334 41.33 A 44.14 44.14 0 0 0 36.301 40.15 A 81.205 81.205 0 0 0 38.13 37.751 Q 39.762 35.519 40.731 33.799 A 22.33 22.33 0 0 0 40.951 33.4 Q 42.401 30.7 42.401 30.5 L 42.101 29.8 A 2.459 2.459 0 0 0 41.741 29.218 Q 41.546 28.979 41.277 28.746 A 5.468 5.468 0 0 0 40.901 28.45 A 2.909 2.909 0 0 0 40.099 28.054 Q 39.326 27.8 38.201 27.8 L 37.701 27.8 L 19.801 29.2 Q 19.401 29.2 19.001 29.25 Q 18.601 29.3 18.101 29.3 A 20.29 20.29 0 0 1 16.513 29.234 Q 15.563 29.159 14.501 29 L 14.201 29 A 0.432 0.432 0 0 0 14.082 29.015 Q 13.949 29.053 13.914 29.189 A 0.442 0.442 0 0 0 13.901 29.3 L 13.901 29.7 Q 14.395 31.019 15.569 32.405 A 15.163 15.163 0 0 0 16.101 33 A 3.583 3.583 0 0 0 17.175 33.493 A 3.219 3.219 0 0 0 18.001 33.6 Q 18.501 33.6 19.001 33.55 A 21.059 21.059 0 0 0 19.404 33.506 Q 19.584 33.484 19.783 33.458 A 40.997 40.997 0 0 0 20.201 33.4 L 35.701 32.1 Q 34.001 35.3 31.701 38.25 Q 29.401 41.2 26.501 44.1 Q 22.001 39.8 19.151 37.7 A 71.172 71.172 0 0 0 18.475 37.208 Q 16.238 35.6 15.801 35.6 A 1.684 1.684 0 0 0 14.927 35.823 Q 14.585 36.025 14.342 36.41 A 2.8 2.8 0 0 0 14.101 36.9 L 13.601 38.2 Q 13.601 39 14.601 39.7 A 68.019 68.019 0 0 1 17.779 42.119 A 77.028 77.028 0 0 1 18.851 43 A 64.115 64.115 0 0 1 21.967 45.794 A 74.913 74.913 0 0 1 23.201 47 A 78.027 78.027 0 0 1 16.346 52.246 A 90.851 90.851 0 0 1 13.601 54.05 A 133.25 133.25 0 0 1 6.585 58.179 A 159.366 159.366 0 0 1 2.001 60.6 A 9.579 9.579 0 0 0 1.271 61.002 Q 0.001 61.783 0.001 62.5 A 0.585 0.585 0 0 0 0.334 63.059 Q 0.585 63.189 1.023 63.199 A 3.274 3.274 0 0 0 1.101 63.2 Q 1.601 63.2 4.001 62.4 Q 6.375 61.609 10.02 59.986 A 132.168 132.168 0 0 0 10.101 59.95 A 64.845 64.845 0 0 0 13.9 58.096 Q 15.942 57.02 18.151 55.7 Q 22.501 53.1 26.801 49.6 A 8.749 8.749 0 0 0 27.235 50.776 Q 27.858 52.126 28.794 52.593 A 2.311 2.311 0 0 0 29.201 52.75 A 31.968 31.968 0 0 0 29.848 52.925 Q 30.708 53.148 31.128 53.19 A 1.751 1.751 0 0 0 31.301 53.2 L 32.801 53.2 L 41.201 52.7 Q 41.101 54.5 40.801 56.2 Q 40.501 57.9 40.201 59.5 L 39.701 61.5 L 18.101 62.3 L 17.501 62.3 Q 16.501 62.3 15.501 62.15 Q 14.501 62 13.501 61.8 A 0.426 0.426 0 0 1 13.348 61.771 A 0.523 0.523 0 0 1 13.301 61.75 A 0.482 0.482 0 0 0 13.188 61.71 A 0.408 0.408 0 0 0 13.101 61.7 A 0.576 0.576 0 0 0 12.942 61.72 Q 12.765 61.771 12.718 61.952 A 0.589 0.589 0 0 0 12.701 62.1 A 1.494 1.494 0 0 0 12.715 62.311 Q 12.738 62.475 12.801 62.6 Q 13.419 64.92 14.487 65.745 A 2.173 2.173 0 0 0 15.151 66.1 A 17.558 17.558 0 0 0 15.879 66.319 Q 16.618 66.522 17.136 66.578 A 3.396 3.396 0 0 0 17.501 66.6 L 19.101 66.6 L 38.201 65.8 Q 34.501 73.9 26.751 78.55 A 81.805 81.805 0 0 1 17.288 83.386 A 104.969 104.969 0 0 1 8.901 86.6 A 9.752 9.752 0 0 0 8.119 86.907 Q 6.601 87.588 6.601 88.4 A 0.733 0.733 0 0 0 7.067 89.096 Q 7.415 89.264 8.024 89.294 A 5.641 5.641 0 0 0 8.301 89.3 Q 8.701 89.3 9.101 89.25 A 10.439 10.439 0 0 0 9.498 89.192 Q 9.705 89.158 9.935 89.113 A 17.262 17.262 0 0 0 10.001 89.1 A 116.814 116.814 0 0 0 15.914 87.537 Q 18.792 86.69 21.251 85.774 A 57.423 57.423 0 0 0 24.051 84.65 Q 28.81 82.586 32.15 80.239 A 29.698 29.698 0 0 0 33.351 79.35 A 32.469 32.469 0 0 0 36.985 76.065 A 25.869 25.869 0 0 0 39.301 73.25 Q 41.601 70 43.101 66.4 A 51.5 51.5 0 0 0 50.287 74.347 A 47.04 47.04 0 0 0 51.751 75.6 A 68.367 68.367 0 0 0 57.521 79.87 A 55.867 55.867 0 0 0 61.201 82.1 Q 65.405 84.426 68.969 85.911 A 54.025 54.025 0 0 0 69.801 86.25 Q 73.324 87.65 75.582 88.316 A 28.965 28.965 0 0 0 76.051 88.45 L 78.401 89.1 Q 79.301 89.1 80.751 87.8 A 9.941 9.941 0 0 0 81.316 87.255 Q 82.155 86.373 82.198 85.765 A 0.919 0.919 0 0 0 82.201 85.7 A 0.936 0.936 0 0 0 82.078 85.213 Q 81.85 84.83 81.201 84.7 A 79.609 79.609 0 0 1 68.983 80.678 A 94.536 94.536 0 0 1 63.351 78.1 A 53.861 53.861 0 0 1 49.734 68.345 A 63.273 63.273 0 0 1 46.901 65.4 Z M 56.001 16.6 L 81.801 15.1 A 3.125 3.125 0 0 0 82.376 14.973 Q 82.672 14.874 82.874 14.718 A 1.095 1.095 0 0 0 83.301 13.8 A 1.998 1.998 0 0 0 83.052 12.863 Q 82.731 12.255 82 11.633 A 7.469 7.469 0 0 0 81.901 11.55 A 6.401 6.401 0 0 0 80.993 10.919 Q 80.462 10.619 79.946 10.492 A 3.117 3.117 0 0 0 79.201 10.4 A 3.956 3.956 0 0 0 78.97 10.406 Q 78.749 10.419 78.609 10.459 A 0.63 0.63 0 0 0 78.501 10.5 A 15.568 15.568 0 0 1 76.88 10.942 A 17.393 17.393 0 0 1 76.601 11 A 13.608 13.608 0 0 1 75.78 11.136 Q 75.409 11.187 74.989 11.228 A 29.013 29.013 0 0 1 74.101 11.3 L 57.401 12.3 Q 58.201 9.8 58.901 7.4 Q 59.601 5 60.101 3 L 60.101 2.8 A 1.218 1.218 0 0 0 59.845 2.079 Q 59.524 1.636 58.801 1.214 A 7.908 7.908 0 0 0 58.201 0.9 Q 56.762 0.219 55.553 0.053 A 5.547 5.547 0 0 0 54.801 0 Q 54.257 0 54.083 0.231 A 0.434 0.434 0 0 0 54.001 0.5 A 0.319 0.319 0 0 0 54.005 0.556 Q 54.011 0.587 54.023 0.611 A 0.148 0.148 0 0 0 54.051 0.65 Q 54.092 0.691 54.099 0.767 A 0.352 0.352 0 0 1 54.101 0.8 Q 54.401 1.8 54.401 2.8 A 3.135 3.135 0 0 1 54.385 3.117 A 2.454 2.454 0 0 1 54.351 3.35 A 2.524 2.524 0 0 0 54.31 3.647 A 3.227 3.227 0 0 0 54.301 3.9 A 26.041 26.041 0 0 1 54.184 5.252 Q 54.101 5.997 53.972 6.826 A 47.809 47.809 0 0 1 53.801 7.85 Q 53.401 10.1 52.901 12.6 L 33.601 13.7 L 32.401 4.3 A 1.563 1.563 0 0 0 31.683 3.139 A 2.463 2.463 0 0 0 31.351 2.95 Q 30.401 2.5 29.351 2.35 Q 28.359 2.208 27.947 2.201 A 2.434 2.434 0 0 0 27.901 2.2 Q 27.152 2.2 26.835 2.399 A 0.452 0.452 0 0 0 26.601 2.8 Q 26.601 2.9 26.801 3.3 A 17.103 17.103 0 0 1 27.278 4.146 Q 27.511 4.59 27.687 4.999 A 10.039 10.039 0 0 1 27.751 5.15 A 5.555 5.555 0 0 1 28.022 6.016 Q 28.116 6.422 28.17 6.885 A 9.868 9.868 0 0 1 28.201 7.2 L 29.101 14 L 9.901 15.1 A 7.195 7.195 0 0 0 9.381 15.12 A 8.664 8.664 0 0 0 9.051 15.15 A 8.272 8.272 0 0 1 8.508 15.193 A 6.866 6.866 0 0 1 8.201 15.2 A 14.127 14.127 0 0 1 6.271 15.073 A 11.312 11.312 0 0 1 4.901 14.8 A 0.881 0.881 0 0 0 4.691 14.728 Q 4.593 14.707 4.479 14.702 A 1.684 1.684 0 0 0 4.401 14.7 A 0.917 0.917 0 0 0 4.218 14.717 Q 3.937 14.774 3.905 15.031 A 0.56 0.56 0 0 0 3.901 15.1 A 1.412 1.412 0 0 0 3.906 15.23 Q 3.918 15.357 3.955 15.434 A 0.241 0.241 0 0 0 4.001 15.5 Q 5.301 17.7 6.051 18.5 Q 6.801 19.3 8.501 19.3 Q 8.901 19.3 9.401 19.25 Q 9.901 19.2 10.501 19.2 L 29.701 18.1 L 29.801 19.2 A 8.274 8.274 0 0 1 29.991 20.576 A 7.374 7.374 0 0 1 30.001 20.95 L 30.001 22.9 Q 30.001 23.2 30.151 23.9 A 1.974 1.974 0 0 0 30.433 24.561 Q 30.59 24.803 30.823 25.038 A 4.126 4.126 0 0 0 31.051 25.25 Q 31.801 25.9 33.601 25.9 Q 34.972 25.9 35 24.94 A 1.386 1.386 0 0 0 35.001 24.9 L 35.001 24.5 L 34.101 17.8 L 52.001 16.8 Q 51.501 19 50.951 21.1 A 103.124 103.124 0 0 1 50.479 22.842 Q 50.256 23.635 50.042 24.34 A 58.918 58.918 0 0 1 49.901 24.8 Q 49.811 25.158 49.762 25.396 A 7.285 7.285 0 0 0 49.751 25.45 A 2.524 2.524 0 0 0 49.71 25.747 A 3.227 3.227 0 0 0 49.701 26 A 2.352 2.352 0 0 0 49.737 26.434 Q 49.874 27.156 50.521 27.198 A 1.262 1.262 0 0 0 50.601 27.2 Q 51.793 27.2 52.936 24.684 A 14.141 14.141 0 0 0 52.951 24.65 Q 54.101 22.1 56.001 16.6 Z M 53.001 36.1 L 48.301 31 A 4.142 4.142 0 0 0 47.639 30.346 A 5.012 5.012 0 0 0 47.301 30.1 Q 46.701 29.7 46.001 29.7 A 1.479 1.479 0 0 0 45.474 29.791 A 1.329 1.329 0 0 0 45.001 30.1 Q 43.915 30.914 43.812 31.729 A 1.36 1.36 0 0 0 43.801 31.9 A 1.871 1.871 0 0 0 44.102 32.907 A 2.807 2.807 0 0 0 44.501 33.4 Q 48.801 38.5 52.901 42.35 Q 57.001 46.2 61.451 49.4 A 87.312 87.312 0 0 0 68.313 53.845 A 102.24 102.24 0 0 0 71.251 55.5 Q 76.601 58.4 83.501 61.4 A 3.34 3.34 0 0 0 83.937 61.583 Q 84.178 61.663 84.402 61.689 A 1.776 1.776 0 0 0 84.601 61.7 Q 85.401 61.7 86.251 60.95 Q 87.101 60.2 87.751 59.3 A 11.16 11.16 0 0 0 87.972 58.984 Q 88.302 58.491 88.378 58.234 A 0.483 0.483 0 0 0 88.401 58.1 A 1.072 1.072 0 0 0 88.263 57.551 Q 88.133 57.327 87.878 57.171 A 1.835 1.835 0 0 0 87.501 57 Q 80.701 54.5 75.351 51.95 A 92.634 92.634 0 0 1 68.396 48.278 A 79.561 79.561 0 0 1 65.501 46.5 Q 68.001 44.7 70.851 42.35 A 85.859 85.859 0 0 0 73.182 40.361 Q 74.227 39.434 75.121 38.569 A 48.179 48.179 0 0 0 75.701 38 A 29.354 29.354 0 0 0 76.38 37.299 Q 77.701 35.888 77.701 35.4 A 3.84 3.84 0 0 0 76.713 32.827 A 5.348 5.348 0 0 0 76.301 32.4 A 11.931 11.931 0 0 0 75.722 31.893 Q 74.852 31.185 74.322 31.109 A 0.86 0.86 0 0 0 74.201 31.1 Q 73.601 31.1 73.501 31.8 A 4.549 4.549 0 0 1 73.183 32.723 Q 72.668 33.855 71.451 35.35 Q 69.701 37.5 67.251 39.8 Q 64.801 42.1 62.201 44.2 Q 60.601 42.9 59.051 41.6 Q 57.501 40.3 56.001 39 Q 63.001 33.6 65.551 30.8 A 47.168 47.168 0 0 0 66.417 29.824 Q 67.99 27.998 68.093 27.381 A 0.491 0.491 0 0 0 68.101 27.3 Q 68.101 26.1 66.851 24.65 Q 65.772 23.399 64.805 23.227 A 1.74 1.74 0 0 0 64.501 23.2 Q 64.03 23.2 63.826 23.731 A 1.578 1.578 0 0 0 63.801 23.8 A 6.846 6.846 0 0 1 63.205 25.385 Q 62.473 26.818 60.989 28.48 A 25.473 25.473 0 0 1 60.651 28.85 Q 58.257 31.425 53.946 35.264 A 214.554 214.554 0 0 1 53.001 36.1 Z" vector-effect="non-scaling-stroke"/>
</g>
</svg>
SVG ダークモード対応
上記の SVG が表す文字を,ライトモードのときは黒目の色で,ダークモードのときは白目の色で描画されるように設定する.
diff --git a/favicon_org.svg b/favicon.svg
index b0c5ae9..0bb7384 100644
--- a/favicon_org.svg
+++ b/favicon.svg
@@ -1,5 +1,17 @@
-<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="#000" style="stroke:#000;stroke-width:0.25mm;fill:#000">
+<style>
+path {
+ stroke: #222;
+ fill: #222;
+}
+@media (prefers-color-scheme: dark) {
+ path {
+ stroke: #eee;
+ fill: #eee;
+ }
+}
+</style>
+<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke-width="0.25mm">
以上の変更により,ライトモードでは文字色が #222
で描画されるようになった.
また,ダークモードでは文字色が #eee
で描画されるようになった.
おわりに
先人の記録やサービスのおかげで簡単に SVG でダークモード対応の favicon を設定できた.世の中には今回の favicon に対応していない環境もあるだろうが,筆者の環境で正常に表示できているためよしとする.