WordPress ブログ運営

【WordPress】Favicon(ファビコン)の作り方と設定方法

投稿日:2018年8月23日 更新日:

アイコン

WordPressでFavicon(ファビコン)を設定する方法を解説します。

Favicon(ファビコン)とは

5W1H

Faviconとは、Webサイトのシンボルとして使われるアイコンのことです。

ファミコンと似てますが全く関係ありません。

ブラウザの上にあるタブやお気に入り(ブックマーク)一覧、スマホのホーム画面に表示されている小さな画像です。

ZAKKIPOSTのFaviconは以下のように表示されています。

favicon(ファビコン)

Iphoneホーム画面

お気に入り一覧に使われていることから、

favorite icon」 → Favicon

「Favarite Icon」が名前の由来とされています。

ぶっちゃけ、Faviconを設定しなくても大きな支障はありません。

大きな支障はありませんが、Faviconを設定していないと、Webサイトのイメージ低下につながる可能性があります。

Favicon(ファビコン)

Faviconを設定していないと、上の例のように紙切れがぺろーんと折り曲がったようなアイコンが表示されてしまいます。
– Chromeの場合

これだと安っぽいサイトに見えませんか?素人が運営している安っぽいサイトに見えますよね。

実際にWebの素人だったとしても、素人が運営するサイトをじっくり読もうって人は少ないでしょうから、素人感はできるだけ排除した方が良いでしょう。

あと、タブをたくさん開いているときやお気に入り一覧でリスト表示されるときにFaviconがないと目立たないし、他のサイトと見分けがつかなくなってしまいますね。

最初にご紹介した通り、FaviconはWebサイトのシンボル(=顔)なので、読者の方にサイトを見つけてもらうためにも、サイトを憶えてもらうためにも、Faviconを忘れずに設定しておきましょう。

Faviconの作成方法

作り方

Faviconの作成方法について順を追って説明していきます。

1. デザインを決める

まず、Faviconをどのようなデザインにするか考えます。

一般的には、ロゴやトレードマーク、サイト名やブランド名、企業名などを使うことが多いです。

Faviconは正方形なので、横に長いロゴやサイト名だと収まりきりません。そういった場合には頭文字だけをデザインに取り入れる方法もあります。

Faviconは表示されるサイズがとても小さいので、複雑な模様を使うと縮小したときにゴチャゴチャしたデザインになってしまいますので気をつけましょう。

2. Faviconを作成する

Faviconはブラウザごとにサイズやフォーマットが違います。

Faviconのサイズ

Faviconのサイズはブラウザとデバイスによって適正サイズが異なります。
代表的なものは以下の通りです。

IE タブ 16px x 16px
IE9 ピン留め機能 24px x 24px
Chrome、Firefox、Safari などのタブ 32px x 32px
Windowsのホームページアイコン 48px x 48px
高解像度 Windowsホームページアイコン 64px x 64px
iOS、 Androidのホーム画面 152px x 152px

これだけでも種類が多いので、何種類かに絞って設定することもできます。
該当するサイズがない場合はブラウザが自動的に拡大・縮小してくれます。

ただ、面倒くさがって1種類しか用意しなかったりすると

  • 拡大した時に画像が粗くなってしまう
  • うまく縮小されず表示されない

このようなことがありますので、最低でも「16px × 16px」と「32px × 32px」くらいは用意することをオススメします。

Faviconのフォーマット

Faviconのフォーマットは「.ico」がオススメです。
「.png」や「.gif」だと一部のブラウザで表示されないケースがあります。

Favicon Generator

  • 色んなサイズを用意しろ
  • 「.ico」がオススメ

って言われても…
「.ico」なんて聞いたことないし、どうやって作るの?って思っている方が多いのではないでしょうか。

そこで、皆さんが馴染みの深い「.jpg」や「.png」、「.gif」ファイルを1つ用意するだけで、必要なファイル一式を自動生成してくれる無料ツールをご紹介します。
Favicon Generatorです。

Favicon用の「.jpg」や「.png」、「.gif」ファイルを1つアップロードして、「ファビコン一括生成」のボタンを押してダウンロードするだけです。

Faviconの設定方法

解決方法

ここではFavicon Generatorで作成したファイルを設定する方法を解説します。

  1. Favicon GeneratorでダウンロードしたZipファイルを解凍
  2. 解凍したファイルをサーバーのドキュメントルートに設置
  3. 以下のコードをhead〜/headの間に挿入

※全てが必須ではありません。
※ドキュメントルートに設置しない場合は、「browserconfig.xml」と「manifest.json」のパスを書き換えてください。

最後にひとこと

最後にひとこと

以上でFaviconの設定方法の解説は終わりです。

Faviconはひとつひとつ自分で作ると大変ですがツールを使うことで作成〜設置まで簡単に済ませられますので、是非この機会に設置してしまいましょう。

-WordPress, ブログ運営
-,

執筆者:

関連記事

WordPressのテーマ(テンプレート)

【2019年】SEOに強いWordPressテーマ(有料・無料)厳選

このページでは、ただオシャレなだけでないSEOに強いWordPressテーマを有料のものから無料のものまで厳選して紹介します。 これからブログやアフィリエイトサイトを運営してお金を稼ぎたいと思っている …

WordPressコメント機能

【WordPress】コメント機能を無効化(非表示・削除)する方法

WordPressにはコメント機能が標準で設置されています。 コメント機能は読者の方とコミュニケーションを図るうえでとても便利な機能なのですが、ブログを運営していると、スパムコメントが入ってきたり、嫌 …

アフィリエイト

【必読】裏ワザ特典付き「アフィリエイトのはじめ方」

ちょっぴりお得な「アフィリエイトのはじめ方」をご紹介します。 そもそもアフィリエイトが何かわからない方は別の記事(アフィリエイトはじめました。)の記事に解説を入れてますので、そちらをご覧ください。 こ …

AddQuickTag

AddQuickTag(WordPressプラグイン)の設定方法と便利な使い方

WordPressで記事を書く時に文字を太字にしたり、リンクを挿入するときに、あらかじめ設定されているタグを使うと便利ですよね。 もし、自分好みのタグを設定することができたら便利だと思いませんか? そ …

ソースコード表示ショートカットキー

ソースコードをブラウザで表示するショートカットキー

WordPressでブログを書いているだけでも、慣れてきて、CSSをいじりはじめたり、プラグインを使わずにカスタマイズしたりするようになってくると、ソースコードをチェックすることが増えてきます。 他の …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

零細企業経営者。東京都在住。田舎暮らしに憧れを抱きながら東京で消耗中。いつかその日が来ることを信じて場所にとらわれない働き方の確立を目指して奮闘しています。