faviconをローカルで生成する

こんにちは、なかにしです。

アプリを作成する際に避けて通れないのがmetaタグ。
タイトルや説明はもちろん、faviconの設定も必要です。

そういえば、ちょっと古めのサイトはfaviconが設定されていないことが多いですよね。

ちょっと調べたところによると、明確な理由は分かりませんが、

・昔はファビコン形式（.ico）への変換が容易ではなかった（敷居が高い）
・見ている人が気にしていなかった（重要性が低い）
・テンプレートやFWにデフォルトで含まれていなかった

などがあるようです。

faviconってなに？
faviconを作成する方法
favicon作成（オンラインツール）
favicon作成（オフラインツール）
- アプリインストール～初期設定
- アプリ実行
さいごに

faviconってなに？

これです。

Webサイトを開いた時に出てくるアイコンですね。
検索時にも表示されます。

直接的なSEO効果は無いようですが、私はファビコンがあるページとないページを比べた時に、ファビコンがあるページをクリックしがちなので、少しはPV増加に影響があるのかもしれません。

メインの使用目的は、ブランディングかと思います。

faviconを作成する方法

faviconは、手軽に作成ができます。

作成方法は、以下の2種類です。

・オンラインツールを使用する
・ローカルで動くアプリを使用する

個人開発や小規模アプリの場合は、
オンラインツールでサクッと作ることが多いです。

今はオンラインツールがたくさんあるので、
それで作成すれば1分かからずに終わります。

顧客に準備していただけることも多々あります。

現在業務委託で作成しているアプリは私がfaviconを作成する担当になり、セキュリティ面を考慮し、ローカルで作成することにしました。

オンラインツールが悪いというわけではありませんが、無料オンラインツールは画像がクラウド上に保存されてしまうリスクや、悪意のあるコードが実行されてしまうリスクがあるので、避けるのがベターでしょう。

まぁ、後者のリスクはローカル版でもありますので、「より安全とされている方を選ぶ」くらいの認識で問題ないと思います。

favicon作成（オンラインツール）

説明するまでもないと思いますが、念のため。

faviconにしたい png や jpg ファイルを用意し、オンラインツールに読み込ませます。

私がよく使うのは、以下です。
https://favicon-generator.mintsu-dev.com

▼ 使い方通りに実施すれば終わりです。

favicon作成（オフラインツール）

今回の本題です。

アプリインストール～初期設定

専用のアプリをインストールして、
コマンドプロンプトなどで実行します。

ツールはいくつかありますが、記事が最も出てきた ImageMagic を使用します。

以下のURLからOSに合わせてダウンロードし、インストールします。
https://imagemagick.org/script/download.php

私は Windowsなので、インストーラをダウンロードし、インストールしました。

アプリ実行

続いて、faviconにしたい画像を用意します。
今回は「black-cat.png」を使用します。

フリー画像のかわいい猫ちゃんです。

最後に、favicon化します。

Windowsの場合はコマンドプロンプトなどで以下コマンドを入力します。

magick [faviconにしたいファイル] -define icon:auto-resize=16,32,48,64,128,256 favicon.ico

引数に関しては公式ドキュメントをご参照ください。
今回使用しているのは、以下です。

-define icon:auto-resize=16,32,48,64,128,256

これは、icon（.icoファイル）に対して、16×16, 32×32…という大きさになるよう、auto-resize（自動リサイズ）してくれと define（定義）しています。

.icoファイルは特殊なファイルで、複数の画像サイズを内部に持つことができます。
つまり、上記コマンドで生成されるiconファイルには、16×16, 32×32, 48×48…という複数のサイズの画像がまとまって入ります。

複数サイズの画像を入れておくと、ブラウザやOSが、そのときに必要なサイズの画像を設定してくれます。
※ちなみに、Google が推奨する faviconのサイズは 48×48ピクセル以上です。

早速やってみましょう。

今回は black-cat.png を favicon化したいので、以下を入力して実行

magick .\black-cat.png -define icon:auto-resize=16,32,48,64,128,256 favicon.ico

エラーが出なければ完了しています。

▼ できました。

あとはこれを設置し、HTMLのheadタグなどにURLを設定すれば完了です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>.....</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />  // faviconの読み込み
  </head>
  <body>
    ......
  </body>
</html>