WordPressで作ったサイトにファビコンを設定する方法【Cocoon】

WordPressで作ったサイトに「favicon（ファビコン）」を設定する方法を紹介します。

ちなみに、このブログのテーマは「Cocoon」を使っているんですが、初期設定では繭（まゆ）のアイコンが表示されるようになっていました。

しかし、これではサイトのオリジナリティも薄れてしまいますよね…。Cocoonは今後多くの人が使うテーマなので、早めに変更しておきましょう。

ファビコンは意外と目を引く要素。しっかりとオリジナルのアイコンを設定仕直しておく必要があると思います。

「ファビコン」と「ウェブクリップアイコン」

ファビコンと似たものに”ウェブクリップアイコン”というものもあります。

まずはこの2つの違いを簡単に紹介しておきます。

ファビコンは、ブラウザのタブに表示されるサイトアイコンのことですね。

それに対してウェブクリップアイコンは、スマホでサイトをブックマークしたときに表示されるアイコンのことです。

WordPressのテーマによっては、両方別々で設定することもあるかもしれません。

それでは実際の設定手順を見てみましょう。

Cocoonのファビコン設定は、「外観」→「カスタマイズ」→「サイト基本設定」の中で行います。

「サイトアイコン」という項目ですね。

画像サイズは「512px × 512px」の正方形ということなので、その通りに画像を作成してアップロードすればOK。

Cocoonの場合は、これで”ファビコン”も”ウェブクリップアイコン”も同時に設定することができます。

ファビコンの設定は、最近のWordPressテーマには標準で備わってるはず。

特別なコードも不要で画像をアップロードするだけなので、暇な時にでも設定しておくと良いと思います。

ついでにファビコンに関する知識もいくつかまとめておきたいと思います。

参考にしてみてください。

ファビコンの画像表示サイズは、「16px × 16px」や「32px × 32px」が一般的とされています。

PCは画像の解像度が低くてもある程度きれいに映りますし、そもそもファビコン自体が小さいものなのでこのサイズで十分なんです。

ちなみにウェブクリップアイコンは、「144px × 144px」。

webページに載せる画像は小さくし、ファイルサイズが大きくならないようにするのが基本です。

画像1つで変わることでもありませんが、この小さな積み重ねでサイトが軽くなり、ページ表示速度も上がります。

Cocoonは色々な箇所に表示されることを想定して、ちょっと大きめのサイズに設定する必要があるのかもしれませんね。

ファビコンやウェブクリップアイコンに設定する画像は正方形の画像です。

画像の輪郭を丸くしたりロゴを使いたい場合は、背景が透明の画像を使いましょう。

ここで注意が必要なんですが、透過画像を作る際はファイルの形式を「png」で保存する必要があります。

web用の画像は一般的に「jpg」が使われますが、いくらjpg形式で保存すると透明だった背景が白色になってしまうので注意しましょう。