あなたのサイトは「ファビコン」を設定していますか?
えっ?設定していない?
それはもったいないです!
ファビコンを設定することで、他のサイトと差別化できます。
せっかくサイトデザインをこだわるのであれば、タブのデザインにもこだわりたいですよね。
自分のサイトを覚えやすくするために、ファビコンを設定しましょう。
- ファビコンについて
- ファビコンの設定方法(WordPress)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
ファビコンって知ってる?
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
えっ?スーファミ??
![](https://ryulifeblog.com/wp-content/uploads/2020/09/ad0762eee73d751dacf2569dc9f26225.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/ad0762eee73d751dacf2569dc9f26225.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/ad0762eee73d751dacf2569dc9f26225.png)
時代を感じますなぁ
ファビコンとは?
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_fukurou_hakase.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_fukurou_hakase.jpg)
ファビコンとは、パソコンでサイトを閲覧しているときに、タブの左側に表示されるマークのことです。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/0.0.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/0.0.png)
タブをたくさん開いているときは、ファビコンによってどのサイトか視覚化できます。
サイトを開いたときに、特徴的なファビコンだと印象に残りやすいです。
企業のロゴマークなどは、パッと見ただけでなんのサイトか分かりますよね。
タブの他に、ブックマークバーにもファビコンが表示されます。
WordPressで作ったサイトは、ファビコンを設定していなければ、すべて同じ表示になってしまいます。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/1-2.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/1-2.png)
「他とは違う」サイトにするために、ファビコンを設定しましょう。
スマホでのファビコン表示
スマホでは、ブックマーク画面やホーム画面に追加した場合にファビコンが表示されます。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/0.1.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/0.1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/0.2.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/0.2.jpg)
ファビコンを設定することで、自分のサイトを一目で分かるようにできます。
ファビコンの設定方法(WordPress)
WordPressでファビコンを設定するのは簡単です。
「外観」「カスタマイズ」をクリックします。
![](https://ryulifeblog.com/wp-content/uploads/2020/11/2-4.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/2-4.jpg)
「サイト基本情報」をクリックします。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/3-3.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/3-3.png)
「サイトアイコン」がファビコンのことです。
「サイトアイコンを選択」をクリックして、ファビコンに設定したい画像を選択します。
ファビコンに使う画像はサイトの顔になるので、覚えてもらいやすい画像にしましょう。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/4-3.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/4-3.png)
画像のサイズが大きい場合は、画像のどの部分をファビコンに設定するか範囲選択できます。
範囲選択したら「画像切り抜き」をクリックします。
![](https://ryulifeblog.com/wp-content/uploads/2020/11/5-3-1024x535-1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/5-3-1024x535-1.jpg)
「公開」をクリックします。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/6-2.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/6-2.png)
これでファビコンが設定されました。
サイトを開いてファビコンが反映されているか確認します。
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/7-1.png)
![ファビコン](https://ryulifeblog.com/wp-content/uploads/2020/11/7-1.png)
まとめ
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
ファビコンについてお話ししました。
ファビコンはタブやスマホのホーム画面で、サイトの顔になるアイコンです。
タブやホーム画面がゴチャゴチャしているときに、目立つファビコンを設定していると、自分のサイトが見つけやすくなります。
一目で自分のサイトだと分かるように、印象に残りやすい画像をファビコンに設定しましょう。
最後まで読んでいただき、ありがとうございました。
コメント