【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

SWELL|サイトの目印!アイコンを付けてブラウザタブに存在感を出そう!

当ページのリンクには広告が含まれています。
SWELL-サイトの目印!ファビコンを付けよう!
くま太君

かわいい、ちっちゃなサイトアイコン。
これ、favicon(ファビコン)って言うんだ。
ちゃんと名前が付いているんだから、実はちゃんと役割があるんだよ。

ここで、しっかりと画像サイズと、設定方法を確認していってね。
もちろん、favicon(ファビコン)の役割もお話するよ!

WEBページを表示したときに、ブラウザのタブにアイコンがありますよね。

これがあることで、ブラウジングなどする際に、自分のサイトの目印になっています。

これがサイトアイコン(favicon/ファビコン)
サイトアイコン(favicon/ファビコン)

でもこのアイコン、どうやって作っているのでしょうか?

・画像はどんなサイズで用意したらいいの?
・設定の方法は?

こんな疑問を、バッチリ解消します!

小さくて地味だけど、立派なサイトの顔!

ぜひ、オリジナルの自分のサイトアイコン(favicon)を、表示していきましょう!

この記事を読むと分かること
・SWELLでのサイトアイコンの推奨画像サイズ
・SWELLでのサイトアイコンの設定方法
・サイトアイコン(favicon/ファビコン)の役割

目次

サイトアイコン設定しなかったらどうなるの?

くま太君

こうなっちゃう。
今回は、これを自分のオリジナルアイコンに、変えたいんだよね。

サイトアイコン(favicon/ファビコン)未設定の場合はWordPressのアイコンが表示される
サイトアイコン(favicon)設定なしの場合

これだと、味気ない!

WordPressのアイコンが表示される

せっかく自分のサイトのオリジナリティが発揮できる部分なので、是非、サイトアイコン(favicon)を設定してみてください。

設定方法は簡単なので、すぐに出来ちゃいますよ!

最初に、サイトアイコン画像を用意しよう!

当ブログ、ゼロブロ雑記帳のサイトアイコン(favicon/ファビコン)
当ブログのサイトアイコン(favicon)
くま太君

コレが無くちゃ始まらない!
サイトアイコン(favicon)用の画像を用意しよう。

ある意味サイトの顔だから、シンプルで、覚えやすそうなデザインがおすすめだよ。

・画像サイズは、「縦512px × 横512px以上を推奨」
・デザインを決める
・シンプルがベスト
・画像形式は「.jpeg/.png」でOK

サイトアイコン(favicon)用画像を用意するのに、必要な事項は、たったこれだけです。

くま太君

縦512px × 横512px以上ってあるけど、バスッと、
縦512px × 横512px」で作っちゃえばOK!

デザインに関していうと、サイトアイコンの表示って、とても小さいですよね。

あまり凝ったデザインだと、潰れて見えにくいので、シンプルな図柄が適しています。

そのため、以下のコトに注意して作成するのが、おすすめです。

・表示サイズが小さいので、文字は認識しにくい
・文字なら1〜2文字、シンプル字形で
・複雑な図柄も潰れて分かりにくい

2文字でも、場合によっては残念な仕上がりになってしまうので、要注意です。

・シンプルで、サイトをイメージしやすい図柄なら、最高!

これで、サイトアイコン(favicon)用画像が出来上がったので、さっそく自分のサイトに設定してみましょう。

くま太君

サイトアイコン(favicon)用画像を作るなら、
良かったら、こっちの記事も見てみてね!

ブログ素材の画像&イラストを3つの経路からおすすめサイトを厳選!
イラストACアカウント共通利用OK!全18種AC関連サイトをまとめてみた!

簡単!SWELLでサイトアイコンを設定しよう!

くま太君

サイトアイコン(favicon)の設定方法は、とっても簡単!
1つずつ一緒に見ていこう!

STEP
管理画面から『カスタマイズ』を選ぶ
SWELLサイトアイコン(favicon/ファビコン)設定方法-1

・①の『外観』から、

・②の『カスタマイズ』をクリック

STEP
『WordPress設定』をクリック
SWELLサイトアイコン(favicon/ファビコン)設定方法-2
STEP
『サイト基本情報』をクリック
SWELLサイトアイコン(favicon/ファビコン)設定方法-3
STEP
『サイトアイコンを選択』をクリック
SWELLサイトアイコン(favicon/ファビコン)設定方法-4

・ここで画像を選択をする

・画像はここからアップロード可能

・管理画面の『メディア』からの
 アップロードでもOK

STEP
右上、『公開』ボタンをクリック
SWELLサイトアイコン(favicon/ファビコン)設定方法-5

・選択した画像を確認したら
 右上の『公開』ボタンをクリックして
 出来上がり!

くま太君

設定は以上だよ!
簡単だったでしょ?
お疲れ様でした!

ブラウザを読込直ししたら、WordPressアイコンから、設定したアイコンに変わっていることが確認できます。

サイトアイコンちょっとオマケのお話

SWELLサイトアイコン(favicon/ファビコン)設定後は自動で新しい専用画像ができる
自動生成の画像
くま太君

なんか増えてる……

サイトアイコン(favicon)を設定した後に、『メディアライブラリ』を見ると、同じ画像が1つ増えています。

これはサイトアイコン(favicon)用に、自動生成された画像です。

間違ってアップしたモノでも、バグでもないので、放っておきましょう。

サイトアイコン(favicon)ってなに?

くま太君

さっき設定した、SWELLでサイトアイコンって呼ばれているのは、
本名、favicon(ファビコン)って言うんだ。

サイトアイコン(favicon)ってどんなモノ?

favicon = favorite icon

favorite iconを略して、favicon(ファビコン)と言うんですね。

そしてfavicon(ファビコン)について、Googleでもこのように述べています。

ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。

Google検索セントラル より

ようは、WEBサイトを表す、シンボルマークのコト

favicon(ファビコン)は、小さいけれど、絶大なアピールポイントになるので、心して設定しましょう!

サイトアイコン(favicon)の表示場所は?

くま太君

favicon(ファビコン)って、大事なのは分かったけど、
表示されるのって、ブラウザのタブだけなの?

ブラウザによって、表示場所が少し違いますが、favicon(ファビコン)が使われる内容は、同じです。

パソコン表示の場合、

・タブ
・お気に入り
・ブックマーク
・ショートカット

スマホ表示の場合、

・検索結果
・お気に入り
・ブックマーク

サイトアイコン(favicon/ファビコン)パソコン使用状況
PC表示/Chromeブラウザの場合
サイトアイコン(favicon/ファビコン)モバイルの表示
スマホ表示の場合

このように、よく見かけるブラウザのタブ以外にも、サイトアイコン(favicon)の登場箇所は多数あります。

例えば、

・複数タブを開いているとき
・ブックマークしたとき

などの場合、一目でそのWEBサイトを、サイトアイコン(favicon)によって認識できますね。

これがサイトアイコン(favicon)の役割です。

今回のまとめ。サイトアイコン(favicon)で存在感を!

くま太君

サイトアイコン(favicon)は、ブラウザのタブ以外にも、色んな所で使われていたんだね。
ボクのブログの目印になるから、バッチリ作っていこっと!

今回はWordPressテーマ、SWELLでのサイトアイコン(favicon)設定を行いました。

サイトアイコン(favicon)設定をしていないと、「WordPressのアイコン」が表示されます。

自分のWEBサイトが、「WordPressのアイコン」で表示されると、チョットかっこ悪いので、必ず設定しておきましょう。

使用する画像サイズは

縦512px × 横512px

実際に表示されるのは、とても小さいので、図柄が認識できるように、

シンプルなデザインが1番!

小さいけれど、存在感抜群のサイトアイコン(favicon)、じっくりシンボルマークを考えて、是非設定してみてください。

ここまでお読みいただき、ありがとうございました。

\ 【広告】SWELLなら、設定も編集もサクサク快適! /
WordPressテーマ『SWELL』の詳細は公式サイトで!

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次