【WordPress】ファビコン作成~設定まとめ

WordPress setting Favicon eyecache WordPress

今回はWordPressを利用している方向けにご自身のサイトシンボルマークともいえるアイコン(ファビコン)の作成~WordPressで設定するまでの方法をお伝えしていきます

はじめに

WordPress setting Favicon
上記の四角で囲った部分のロゴ名ってわかりますか?『ファビコン』といいます。知ってましたか?
ホームページやブログを始めたばかりの方だとファビコンなんて言葉聞いたことないですよね。
googleなどの検索エンジンでワードを検索する際『ブックマーク横 ロゴ』『サイトタブ横 ロゴ』『URL横 ロゴ』などと記載するしかそのものの名前わからないと思います。

編集長K
KTA
実際に私もこの名前を知らず検索は『サイトタブ横 ロゴ』等と検索していました!

ファビコンとは?

ファビコンとは、ブラウザのタブなどに表示されるWebサイトのアイコンのことです。ウェブブラウザではURLの左横またはタブに表示されます。お気に入りに登録するとブックマークアイコンとして表示されます。そしてファビコンはWebサイトのイメージを表現でき、設置にも複雑な作業を伴いません。
そのため、Webサイトを作成した際はファビコンも設置することをおすすめします。

ファビコンの名前の由来

favorite-icon(フェイバリットアイコン)が名前の由来になっていて、favorite-icon(フェイバリットアイコン)が略されfavicon(ファビコン)と呼ぶようになったのが名前の由来とされています。なお、英語ではファブアイコン(Fav-Icon)と読まれます。

ファビコンが表示される場所

ファビコンが表示される場所は、おおむね以下の箇所になります。

  • ブラウザのタブ
  • ブラウザのホーム画面(ブックマークやお気に入りなど)
  • パソコンのショートカット

場所によってファビコンのサイズが異なります。代表的なサイズとしては、ブラウザのタブが「16px × 16px」、パソコンのショートカットが「32px × 32px」です。

ファビコン(ロゴ)作成の前に

ファビコンの作成に関しては以下の2パターンの方法で作成すると良いと思います。

  • フリーロゴ作成サイトを使用する
  • ペイント(手書き)を使用する

フリーロゴ作成サイト5選

Adobe Express

引用:Adobe Express
WordPress setting Favicon-Adobe Express

編集長K
KTA
以下の関連記事ではロゴ作成方法に関して書いてますので参考にしてみてください!

Desing Evo

引用:Desing Evo
WordPress setting Favicon-Desing-Evo
DesignEvoは、10000以上のテンプレートを備えた無料のオンラインロゴメーカーで、誰でも使えるようにシンプルにデザインされています。
WordPress setting Favicon-Desing-Evo2
DesignEvoのウェブサイトのロゴクリエイターを使って、一際目立つウェブサイトとブログのロゴデザインを簡単にストレスなく作成できます。DesignEvoを使って、初心者のデザイナーでも数分でカスタムロゴを無料で手に入れることができます。あなたのウェブサイトやブログが技術、ファッション、スポーツ、食べ物などどんなジャンルでも、よくデザインされたロゴテンプレートから完璧なロゴデザインを見つけることができます。

Wix

引用:Wix
WordPress setting Favicon-Wix
WordPress setting Favicon-Wix2
Wix ロゴメーカーは無料でロゴの自動作成、ダウンロードが可能です。商用利用権を含む高解像度ファイルのダウンロードには、プレミアムプランの購入が必要です。

designAC

引用:designAC
WordPress setting Favicon-desingAC
初心者での簡単に新規登録さえすれば無料テンプレートでおしゃれなデザインが簡単に作成できちゃいます。
WordPress setting Favicon-desingAC2

Canva

引用:CanvaWordPress setting Favicon-Canva
2013年にリリースされたCanvaは、世界中のユーザーが自由にデザインを作成して公開することを目的としたオンラインのデザイン公開ツールです。
WordPress setting Favicon-Canva-temp

ペイント(手書き)を使用

WordPress setting Favicon-paint
どのサイトにも頼らず自分で!という方はペイント機能を使って自由にファビコン用のロゴを作成しましょう。
ファビコンサイズは512px×512pxなので忘れずに設定しておきましょう

ファビコンの設定

ファビコン用に作成したロゴを設定していきましょう
WordPress管理画面⇒外観⇒カスタマイズの順にクリックします
WordPress setting Favicon2
もしくは管理者メニューTOPの『カスタマイズ』をクリック
WordPress setting Favicon3
『サイト基本情報』をクリック

『画像を変更』から作成したファビコン用ロゴ画像を選択しましょう
WordPress setting Favicon5
画像が設定できたら『公開』ボタンをクリックします
WordPress setting Favicon6
公開/下書き保存/予約公開【各種説明】
WordPress setting Favicon7

状態状態の説明
公開設定内容を公開します
下書き保存設定内容はまだ公開せず、内容をいったん保存します
予約公開公開日時を指定して予約公開をする機能です

【予約公開】
WordPress setting Favicon8

さいごに

今回はfavicon(ファビコン)についての記載をしていきました。
閲覧中のサイトタブやブックマークタブ、スマホのホーム画面や検索結果ページに表示されるfavicon(ファビコン)の作成方法~設定方法はお判りいただけましたでしょうか?
正しくfavicon(ファビコン)が設定されていればご自身のサイトやブログのブランディングやユーザーへの認知度も高くなるはずです。正しいサイズでオリジナルのロゴを設定し、認知度を高めていけるといいですね!

編集長K
KTA
今回も最後までご覧いただき誠にありがとうございます!

コメント