SVG でダークモード対応の favicon を作成する
はじめに
モダンな 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 に対応していない環境もあるだろうが,筆者の環境で正常に表示できているためよしとする.