今回はWordPressを利用している方向けにご自身のサイトシンボルマークともいえるアイコン(ファビコン)の作成~WordPressで設定するまでの方法をお伝えしていきます
はじめに
上記の四角で囲った部分のロゴ名ってわかりますか?『ファビコン』といいます。知ってましたか?
ホームページやブログを始めたばかりの方だとファビコンなんて言葉聞いたことないですよね。
googleなどの検索エンジンでワードを検索する際『ブックマーク横 ロゴ』『サイトタブ横 ロゴ』『URL横 ロゴ』などと記載するしかそのものの名前わからないと思います。

ファビコンとは?
ファビコンとは、ブラウザのタブなどに表示されるWebサイトのアイコンのことです。ウェブブラウザではURLの左横またはタブに表示されます。お気に入りに登録するとブックマークアイコンとして表示されます。そしてファビコンはWebサイトのイメージを表現でき、設置にも複雑な作業を伴いません。
そのため、Webサイトを作成した際はファビコンも設置することをおすすめします。
ファビコンの名前の由来
favorite-icon(フェイバリットアイコン)が名前の由来になっていて、favorite-icon(フェイバリットアイコン)が略されfavicon(ファビコン)と呼ぶようになったのが名前の由来とされています。なお、英語ではファブアイコン(Fav-Icon)と読まれます。
ファビコンが表示される場所
ファビコンが表示される場所は、おおむね以下の箇所になります。
- ブラウザのタブ
- ブラウザのホーム画面(ブックマークやお気に入りなど)
- パソコンのショートカット
場所によってファビコンのサイズが異なります。代表的なサイズとしては、ブラウザのタブが「16px × 16px」、パソコンのショートカットが「32px × 32px」です。
ファビコン(ロゴ)作成の前に
ファビコンの作成に関しては以下の2パターンの方法で作成すると良いと思います。
- フリーロゴ作成サイトを使用する
- ペイント(手書き)を使用する
フリーロゴ作成サイト5選
Adobe Express

Desing Evo
引用:Desing Evo
DesignEvoは、10000以上のテンプレートを備えた無料のオンラインロゴメーカーで、誰でも使えるようにシンプルにデザインされています。
DesignEvoのウェブサイトのロゴクリエイターを使って、一際目立つウェブサイトとブログのロゴデザインを簡単にストレスなく作成できます。DesignEvoを使って、初心者のデザイナーでも数分でカスタムロゴを無料で手に入れることができます。あなたのウェブサイトやブログが技術、ファッション、スポーツ、食べ物などどんなジャンルでも、よくデザインされたロゴテンプレートから完璧なロゴデザインを見つけることができます。
Wix
引用:Wix
Wix ロゴメーカーは無料でロゴの自動作成、ダウンロードが可能です。商用利用権を含む高解像度ファイルのダウンロードには、プレミアムプランの購入が必要です。
designAC
引用:designAC
初心者での簡単に新規登録さえすれば無料テンプレートでおしゃれなデザインが簡単に作成できちゃいます。
Canva
引用:Canva
2013年にリリースされたCanvaは、世界中のユーザーが自由にデザインを作成して公開することを目的としたオンラインのデザイン公開ツールです。
ペイント(手書き)を使用
どのサイトにも頼らず自分で!という方はペイント機能を使って自由にファビコン用のロゴを作成しましょう。
ファビコンサイズは512px×512pxなので忘れずに設定しておきましょう
ファビコンの設定
ファビコン用に作成したロゴを設定していきましょう
WordPress管理画面⇒外観⇒カスタマイズの順にクリックします
もしくは管理者メニューTOPの『カスタマイズ』をクリック
『サイト基本情報』をクリック
『画像を変更』から作成したファビコン用ロゴ画像を選択しましょう
画像が設定できたら『公開』ボタンをクリックします
公開/下書き保存/予約公開【各種説明】
状態 | 状態の説明 |
---|---|
公開 | 設定内容を公開します |
下書き保存 | 設定内容はまだ公開せず、内容をいったん保存します |
予約公開 | 公開日時を指定して予約公開をする機能です |
【予約公開】
さいごに
今回はfavicon(ファビコン)についての記載をしていきました。
閲覧中のサイトタブやブックマークタブ、スマホのホーム画面や検索結果ページに表示されるfavicon(ファビコン)の作成方法~設定方法はお判りいただけましたでしょうか?
正しくfavicon(ファビコン)が設定されていればご自身のサイトやブログのブランディングやユーザーへの認知度も高くなるはずです。正しいサイズでオリジナルのロゴを設定し、認知度を高めていけるといいですね!

コメント