favicon を SVG から作成
いまどきは favicon もマルチプラットフォームに配慮することを知った。 1個のアイコンにファイルに画像をいくつもの画素数で格納できて、そういうのをマルチアイコンと言うらしい。
次のようにすれば、1個の画像からあまり画質を劣化させずにマルチアイコンのファイルを作れる。
- SVG で元画像を作る。
- ImageMagick で SVG から PNG の ico ファイルに変換する。
元画像は Inkscape とかのドロー系のツールを使うなり、もっと機械的に生成するなり、いろいろあると思う。
ico ファイルへの変換は次のコマンドでやれる。
convert -define icon:auto-resize favicon.svg favicon.ico
これだけでマルチアイコンを作ってもらえる。 確認のために Gimp で開いたら各レイヤに画素数の違う画像がはいっていた。 いつも驚くけど、ImageMagick は気が効き過ぎでしょ。
ただ、この手順だけだと出来上がった ico ファイルの背景が透明色にならない。 元画像の SVG で透明色にしていても、ico ファイルは白色の背景になっていた。
ImageMagick で透明色にするには次のようなコマンドを使う。
convert -transparent COLOR -fuzz NUM INPUT OUTPUT
これで COLOR の色のところを透明色に変えてくれる。
-fuzz の後のパラメータ NUM は、 COLOR にどのくらい近い色までを対象にするかを指定する。
適切な値は画像に応じて異なる。
SVG から ico への変換と透明色の設定を同時やるなら次のコマンドになる。
convert -define icon:auto-resize -transparent '#ffffff' -fuzz 10% favicon.svg favicon.ico
Makefile に次のように書いた。
.PHONY: favicon clean-favicon
.SUFFIXES: .svg .ico
clean-favicon:
rm -f favicon.ico
favicon: favicon.ico
.svg.ico:
convert -define icon:auto-resize -transparent '#ffffff' -fuzz 10% $? $@
追記1
よく考えたら、SVG をそのまま favicon に使えるかもしれないので試した。
- 実験
- SVG を favicon.ico の名前で置いてみる。
- 結果
- Chrome 91 は favicon を表示する。
- Firefox 89 は favicon を表示しない。
やはり、上の手順で PNG の ico ファイルに変換するのが無難そう。
HTML ファイルの中に favicon のパスや形式を指定する方法もあるようだけど、ここではやらないことにする。
追記2