WordPressのブログでファビコンやアイコンを画像一枚で設定する方法

読者の悩み

こんな悩みに答える記事になっています。

サイトのタブにあるアイコンを設定してみたいけどやり方が分からない。

調べてみたけど、一体いくつ画像を用意すればいいの？画像のサイズはどれが正解？

そんな悩みを持っている人に対して、画像1枚だけでアイコン（ファビコンともいいます）を設定する方法を紹介します。

1.ファビコンの用途

ファビコンの有無はSEOにはそれほど関係がないと考えがちですが、ファビコンを設定することで、サイトのイメージがつきやすくなるという効果があります。その他にも、クリック率UPには効果があるとも言われています。

ブランドのロゴみたいな感じの効果を発揮してくれる感じですね。

ファビコンが設定されていないと、タブやブックマークのアイコンは以下の画像のデザインに自動的になります。

これはもったいない。

ファビコンの設定方法として、ヘッダー中に<link rel=”画像のURL”>を追記し、16px×16px、32px×32px、152px×152pxなどなど、様々なサイズのファイルを指定する方法があります。

なんでこんなに多くの画像が必要かというと、スマホ・PCでのタブやブックマークに使用する小さなアイコン以外にも、スマホのホーム画面に追加したとき用のアイコンも必要になってくるためです。

また、フォーマットも.icoにしなければIEで表示がうまくできない・・・色々と考えることが多く面倒です。

画像一枚で形式も考えずに設定したい・・・。

一枚の画像で一括設定する方法を紹介します。
そう、ここからが本題。

簡単な技がありまして、WordPressのメニューから『外観』→『カスタマイズ』→『サイト基本情報』に進みます。

ここの、サイトアイコンに設定するだけで終わりです。
（なんで今まで気づかなかった！！）

一枚の画像でブックマークやスマホのホーム画面への追加にも対応できる優れものです。

確認してみると、IEでもうまく表示できていました。簡単にすべての悩みが解決しましたね。

なにかしらのツールを使用してファビコンを各自で作成しましょう。

512×512px以上の正方形で、できれば綺麗な方がいいのでフォーマットはpngを選択するのがいいかと。

大きすぎても画像の容量が大きくなるので512px×512pxがオススメです。

特にアイデアが思い浮かばなければ、画像の背景はヘッダーの色と一致させると違和感がなくてGood！

特に私のように、ブログカスタマイズ記事を多く投稿しているサイトではこのサイトを閲覧しつつ読者のサイトのデザインをカスタマイズするため、必然的にタブが多くなります。

その時にファビコンが目印になって分かりやすいという効果もありそうです。

ブログの細かいデザインを設定する方法を多く載せた記事もありますので見てみてください。