![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
かわいい、ちっちゃなサイトアイコン。
これ、favicon(ファビコン)って言うんだ。
ちゃんと名前が付いているんだから、実はちゃんと役割があるんだよ。
ここで、しっかりと画像サイズと、設定方法を確認していってね。
もちろん、favicon(ファビコン)の役割もお話するよ!
WEBページを表示したときに、ブラウザのタブにアイコンがありますよね。
これがあることで、ブラウジングなどする際に、自分のサイトの目印になっています。
![これがサイトアイコン(favicon/ファビコン)](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-mini.png)
![これがサイトアイコン(favicon/ファビコン)](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-mini.png)
でもこのアイコン、どうやって作っているのでしょうか?
こんな疑問を、バッチリ解消します!
小さくて地味だけど、立派なサイトの顔!
ぜひ、オリジナルの自分のサイトアイコン(favicon)を、表示していきましょう!
この記事を読むと分かること
・SWELLでのサイトアイコンの推奨画像サイズ
・SWELLでのサイトアイコンの設定方法
・サイトアイコン(favicon/ファビコン)の役割
サイトアイコン設定しなかったらどうなるの?
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
こうなっちゃう。
今回は、これを自分のオリジナルアイコンに、変えたいんだよね。
![サイトアイコン(favicon/ファビコン)未設定の場合はWordPressのアイコンが表示される](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-no.png)
![サイトアイコン(favicon/ファビコン)未設定の場合はWordPressのアイコンが表示される](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-no.png)
これだと、味気ない!
せっかく自分のサイトのオリジナリティが発揮できる部分なので、是非、サイトアイコン(favicon)を設定してみてください。
設定方法は簡単なので、すぐに出来ちゃいますよ!
最初に、サイトアイコン画像を用意しよう!
![当ブログ、ゼロブロ雑記帳のサイトアイコン(favicon/ファビコン)](https://www.zero-blo.com/wp-content/uploads/2022/12/221211-favicon.png)
![当ブログ、ゼロブロ雑記帳のサイトアイコン(favicon/ファビコン)](https://www.zero-blo.com/wp-content/uploads/2022/12/221211-favicon.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
コレが無くちゃ始まらない!
サイトアイコン(favicon)用の画像を用意しよう。
ある意味サイトの顔だから、シンプルで、覚えやすそうなデザインがおすすめだよ。
サイトアイコン(favicon)用画像を用意するのに、必要な事項は、たったこれだけです。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
縦512px × 横512px以上ってあるけど、バスッと、
「縦512px × 横512px」で作っちゃえばOK!
デザインに関していうと、サイトアイコンの表示って、とても小さいですよね。
あまり凝ったデザインだと、潰れて見えにくいので、シンプルな図柄が適しています。
そのため、以下のコトに注意して作成するのが、おすすめです。
2文字でも、場合によっては残念な仕上がりになってしまうので、要注意です。
これで、サイトアイコン(favicon)用画像が出来上がったので、さっそく自分のサイトに設定してみましょう。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
サイトアイコン(favicon)用画像を作るなら、
良かったら、こっちの記事も見てみてね!
ブログ素材の画像&イラストを3つの経路からおすすめサイトを厳選!
イラストACアカウント共通利用OK!全18種AC関連サイトをまとめてみた!
簡単!SWELLでサイトアイコンを設定しよう!
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
サイトアイコン(favicon)の設定方法は、とっても簡単!
1つずつ一緒に見ていこう!
![SWELLサイトアイコン(favicon/ファビコン)設定方法-1](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-1.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-1](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-1.png)
・①の『外観』から、
・②の『カスタマイズ』をクリック
![SWELLサイトアイコン(favicon/ファビコン)設定方法-2](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-2.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-2](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-2.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-3](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-3.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-3](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-3.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-4](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-4.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-4](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-4.png)
・ここで画像を選択をする
・画像はここからアップロード可能
・管理画面の『メディア』からの
アップロードでもOK
![SWELLサイトアイコン(favicon/ファビコン)設定方法-5](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-5.png)
![SWELLサイトアイコン(favicon/ファビコン)設定方法-5](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-settei-5.png)
・選択した画像を確認したら
右上の『公開』ボタンをクリックして
出来上がり!
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
設定は以上だよ!
簡単だったでしょ?
お疲れ様でした!
サイトアイコンちょっとオマケのお話
![SWELLサイトアイコン(favicon/ファビコン)設定後は自動で新しい専用画像ができる](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-media.png)
![SWELLサイトアイコン(favicon/ファビコン)設定後は自動で新しい専用画像ができる](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-media.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-fuzake.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-fuzake.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-fuzake.png)
なんか増えてる……
サイトアイコン(favicon)を設定した後に、『メディアライブラリ』を見ると、同じ画像が1つ増えています。
これはサイトアイコン(favicon)用に、自動生成された画像です。
間違ってアップしたモノでも、バグでもないので、放っておきましょう。
サイトアイコン(favicon)ってなに?
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
さっき設定した、SWELLでサイトアイコンって呼ばれているのは、
本名、favicon(ファビコン)って言うんだ。
サイトアイコン(favicon)ってどんなモノ?
favorite iconを略して、favicon(ファビコン)と言うんですね。
そしてfavicon(ファビコン)について、Googleでもこのように述べています。
ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。
Google検索セントラル より
favicon(ファビコン)は、小さいけれど、絶大なアピールポイントになるので、心して設定しましょう!
サイトアイコン(favicon)の表示場所は?
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
favicon(ファビコン)って、大事なのは分かったけど、
表示されるのって、ブラウザのタブだけなの?
ブラウザによって、表示場所が少し違いますが、favicon(ファビコン)が使われる内容は、同じです。
パソコン表示の場合、
スマホ表示の場合、
![サイトアイコン(favicon/ファビコン)パソコン使用状況](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-bookmark.png)
![サイトアイコン(favicon/ファビコン)パソコン使用状況](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-bookmark.png)
![サイトアイコン(favicon/ファビコン)モバイルの表示](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-mobile.png)
![サイトアイコン(favicon/ファビコン)モバイルの表示](https://www.zero-blo.com/wp-content/uploads/2022/12/favicon-mobile.png)
このように、よく見かけるブラウザのタブ以外にも、サイトアイコン(favicon)の登場箇所は多数あります。
例えば、
などの場合、一目でそのWEBサイトを、サイトアイコン(favicon)によって認識できますね。
これがサイトアイコン(favicon)の役割です。
今回のまとめ。サイトアイコン(favicon)で存在感を!
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
サイトアイコン(favicon)は、ブラウザのタブ以外にも、色んな所で使われていたんだね。
ボクのブログの目印になるから、バッチリ作っていこっと!
今回はWordPressテーマ、SWELLでのサイトアイコン(favicon)設定を行いました。
サイトアイコン(favicon)設定をしていないと、「WordPressのアイコン」が表示されます。
自分のWEBサイトが、「WordPressのアイコン」で表示されると、チョットかっこ悪いので、必ず設定しておきましょう。
使用する画像サイズは
実際に表示されるのは、とても小さいので、図柄が認識できるように、
小さいけれど、存在感抜群のサイトアイコン(favicon)、じっくりシンボルマークを考えて、是非設定してみてください。
ここまでお読みいただき、ありがとうございました。
![](https://www.zero-blo.com/wp-content/uploads/2022/11/swellicon-tittle-300x158.png)
![](https://www.zero-blo.com/wp-content/uploads/2022/11/swellicon-tittle-300x158.png)
\ 【広告】SWELLなら、設定も編集もサクサク快適! /
WordPressテーマ『SWELL』の詳細は公式サイトで!