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 パーマリンク設定

【WordPress】SEOに最適なパーマリンク(URL)設定

ブログをはじめたばかりの方が意外と見落としがちなのが、この「パーマリンク」。 そもそも「パーマリンクってなんぞや?」って方が多いと思います。 しかし、WordPressでブログを運営していく場合、パー …

ブログ

ブログはじめました。

目次 1. ブログをはじめることにしました。2. とりあえずドメインとサーバーだけ決めました。3. 「ブログを最低1年継続すること」をここにを宣言します! ブログをはじめることにしました。 ドメインを …

WordPress XMLサイトマップ

【WordPress】XMLサイトマップの作り方とGoogleへの送り方

ブログをはじめようとWordPressのセットアップをしていると、やることが多すぎて細かい設定を忘れがち。 このXMLサイトマップも見落としがちな設定のひとつですね。 はじめてWebサイトやブログを運 …

ドメイン

独自ドメインの取得方法をブログ初心者向けにわかりやすく解説

ドメインはインターネット上の住所のようなもので、このブログで言うと「zakkipost.com」のことです。 「はてなブログ」や「ライブドアブログ」などの無料ブログを使えば、独自ドメインを取得しなくて …

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

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

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

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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