Webサイトをアクセスするとブラウザのタブなどに表示されるアイコンのことを「ファビコン」(favicon)といいます。
ファビコンは ico 形式の画像ファイル favicon.ico をドメインのルートディレクトリに置くことで表示させることができます。
「favicon.ico」のファイル名は決まりなので、そのままのファイル名にしてください。
ただこの ico 形式の画像ファイルは少々特殊で、一つのファイル内に複数のサイズ・色数の画像を格納することができるというスグレモノですが、その特殊性から作成がちょっと手間だったりします。
アプリ、ツール類を使うのも良いでしょうが、この記事では敢えてコマンド一発で作成する方法を紹介します。
コマンド一発というのは、既に ImageMagick のコマンドが使える状態になっている事が前提です。
ImageMagick は macOSの場合、ターミナルを開いてコマンドラインから
$ brew install imagemagick
でインストールできます。
ImageMagick がインストールできたら、ファビコンファイルを作ってみましょう。
元となる画像ファイルを example.png とすると、
$ convert example.png -define icon:auto-resize=64,48,32,16 favicon.ico
はい、これだけです。
favicon.ico が作成されていることを確認してください。
このコマンドだけで 64x64, 48x48, 32x32, 16x16 の各サイズの画像が favicon.ico に格納されています。
簡単ですね!😊