こんにちは、まちゃりさです。
今回は、ワードプレスでURL横にあるアイコン(ファビコン)の役割と設定方法について解説していきます。
「ファビコン」は、Webブラウザでページを開いたときに、アドレスバーやタブ部分に表示されるアイコンのことです。
![ファビコンのイメージ①](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon1-1.png?resize=519%2C385&ssl=1)
![ファビコンのイメージ②](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon1-2.png?resize=751%2C108&ssl=1)
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
サイトのシンボルマークです!
例えば、Cocoonのデフォルトでは、下のように卵のアイコンになっています。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon2.png?resize=243%2C29&ssl=1)
サイトを立ち上げた後は、設定するのを忘れずに行いましょう!
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
画像があれば、簡単に設定できます!
今回の記事では、下記2点を中心に解説していきます。
- ファビコンとは?
- ワードプレスでファビコンを設定する方法
それでは、どうぞ!
ファビコンとは?
最初に、ファビコンについてご説明していきます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2020/03/nayamu_woman_2.jpg?resize=150%2C150&ssl=1)
ファビコンって何??
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
いわば、Webサイトのシンボルマークといえるアイコンのことです!
ファビコンとは、Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるアイコンのことを言います。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
名前の由来はね・・
お気に入り(favorite)に登録したときに表示されるアイコン(icon)が元になっています。
favorite icon(フェイバリット・アイコン)を縮小して、favicon(ファビコン)と呼ぶようになったとか!
![女性](https://i0.wp.com/macharisa.com/wp-content/uploads/2020/12/youngwoman_42.png?resize=150%2C150&ssl=1)
なるほどね~
サイトやページを判別する目印となる部分なので、設定しておくのが望ましいです!
ファビコン画像はどんなものがいい?
では、ファビコン画像にはどんなものが適しているでしょうか?
以下にまとめてみました。
- Webサイトの内容が伝わるもの
- シンプルでわかりやすいもの
- 画像は正方形がよい
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2020/03/nayamu_woman_2.jpg?resize=150%2C150&ssl=1)
なるほど~
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
サイトのシンボルマークになる部分!複雑なデザインは避け、パット見で内容が伝わるものが◎
余談ですが、ファビコンに使用する画像は、圧縮し容量を減らしておくのがベターです。
私の場合は、以下サイトを使用して画像容量を軽くしてから使用しています。
【ワードプレス】ファビコンを設定する方法
ファビコンの役割がわかったところで、さっそくワードプレスでファビコンを設定する方法をご紹介します。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
手順は簡単!サイト立ち上げ後は、早めにトライしてみよう!
- STEP1ワードプレスの管理画面を開く
- STEP2「外観」→「カスタマイズ」と進む
- STEP3サイト基本情報の「サイトアイコン」で、「サイトアイコンを選択」をクリック
- STEP4画像ファイルをアップロードし、「公開」をクリック
- STEP5表示を確認する
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
5分以内に終わります!それでは、いってみよう~!!
STEP1.ワードプレスの管理画面を開く
最初に、ワードプレスの管理画面(ダッシュボード画面)を開きます。
![ワードプレスの管理画面(ダッシュボード画面)を開く](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon3.png?resize=1024%2C484&ssl=1)
STEP2.「外観」→「カスタマイズ」と進む
次に、この管理画面のままで「外観」にカーソルを当て、「カスタマイズ」をクリックします。
![「外観」から「カスタマイズ」をクリックする](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon4.png?resize=1024%2C607&ssl=1)
STEP3.「サイトアイコンを選択」をクリック
画面が遷移します。
「サイト基本情報」をクリックします。
![「サイト基本情報」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon5.png?resize=642%2C718&ssl=1)
「サイトアイコン」欄の「サイトアイコンを選択」をクリックします。
![「サイトアイコンを選択」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon6.png?resize=355%2C537&ssl=1)
STEP4.画像ファイルをアップロードし、「公開」をクリック
ファビコンに使用したい画像を取り込みます。
PCの場合は、
- ①使用する画像をクリックし、
- ②「開く」を選択します
![①使用する画像をクリックし、②「開く」を選択](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon7.png?resize=657%2C553&ssl=1)
該当の画像にチェックマークが入っているのを確認し、右下の「選択」をクリックします。
![チェックマークを確認し、右下の「選択」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon8.png?resize=1024%2C542&ssl=1)
画像が取り込まれます。
下のイメージを確認後、上の「公開」をクリックします。
![下のイメージを確認後、上の「公開」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon9.png?resize=425%2C791&ssl=1)
STEP5.表示を確認する
最後に、ファビコンが反映されたことを確認しましょう。
ワードプレスの管理画面、またはサイトのページを開き直します。
タブにファビコン画像が反映されているかを確認します。
![タブにファビコン画像が反映されているかを確認](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/06/wordpress-favicon10.png?resize=1024%2C247&ssl=1)
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
設定は以上です!お疲れさまでした!無事設定できたかな?
まとめ:サイトを立ち上げたらファビコンを設定しよう!
いかがでしたか?
今回は、「ファビコンの役割」と「ワードプレスでの設定方法」についてご紹介しました!
ファビコンは、サイトのイメージを決める重要な部分です!
サイトを立ち上げた後は、ぜひ設定してみましょう。
ワードプレスであれば、簡単に設定できてしまいます。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/image.jpg?resize=150%2C150&ssl=1)
個人的に、アイコンがデフォルトのままだと、サイトにこだわりがないのかな・・と思ってしまいます(;_:)
それでは、今回はこの辺で!
最後までお読みいただき、ありがとうございました!
おわり。
【PickUp】WordPressについてのおすすめ記事
【PickUp】Cocoonについてのおすすめ記事
コメント