ブログのファビコンを変更したので、その備忘録をこの記事にまとめておきます。

ファビコンとは?

Web系の仕事をしていたり、ブログを書いていたりするような方には説明する必要もないかと思いますが、ブラウザでサイト・記事を開いたときにタブに表示されるアイコンのことです。

ファビコンの説明

これをオリジナルのものにすることでユーザーがWebサイト・ブログを覚えてくれやすくなり、リピートで訪れたときに認識しやすくなります。

それによってユーザーのファン化に効果があると考えられます。

WordPressのデフォルトだと、上記のようにWordPressのアイコンが表示されています。

このまま使っている人も多いのですが、オリジナリティがなく、せっかくユーザーが再訪問してくれても「あ、またこのブログだ!」と認識してもらえなくなってしまいます。

WordPressでのファビコン変更方法

いくつかやり方はありますが、もっとも簡単な方法で変更しました。

ダッシュボード>カスタマイズの順に選択します。

ダッシュボードから「外観」→「カスタマイズ」をクリック

カスタマイズ画面から「サイト基本情報」を選択する。

カスタマイズ画面で「サイト基本情報」を選択する

サイトアイコンのところにファビコン用の画像をドラッグ&ドロップします。

ファビコン画像をアップ

ファビコン画像がアップされたら、「公開」をクリックして完了です。

ファビコンのアップ完了

ファビコンが変更されました。

ファビコン変更完了

ファビコンを作成について

ファビコンはブラウザの表示サイズに合わせて複数作ることが一般的です。

Internet Explorer、Chrome、Safariなどブラウザによって表示サイズが違うためです。

サイズ(px) 対応するブラウザ
16px × 16px Internet Explorer
24px × 24px Internet Exploreのピン留め
32px × 32px Chrome、Firefox、Safari
48px × 48px Windows
64px × 64px 高解像度Windows

また、ファビコンのファイル形式は「.ico」が理想です。「.gif」や「.png」でも表示できますが、対応していないブラウザがあるので、「.ico」が最も望ましいです。

ファビコンを作成したサイト

今回は以下のサイトでファビコンを作成しました。

ico形式が望ましいのですが、有料プランとなってしまうので、今回は無料で作成できるpng形式としました。