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, ブログ運営
-,

執筆者:

関連記事

アフィリエイト

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

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

Seach Console

Search Consoleの登録方法と使い方を初心者向けに解説

ブログをはじめたばかりの方が意外と忘れがち、先送りしがち、なのが、この「Search Console」。 ブログの立ち上げでやることがいっぱいあるのに、「分析?そんな先のことまで気が回るわけないよ」っ …

レンタルサーバー

レンタルサーバーを比較!2018年にブログをはじめる方は必読

ブログを運営するうえで、ドメインの次に準備(契約)するのがレンタルサーバーです。 無料ブログを使うという手もありますが、今回はレンタルサーバーを使おうと思っている方に向けてオススメのレンタルサーバーを …

WordPress www

【WordPress】www有無を統一!リダイレクトの設定方法

ホームページやブログのURLは「www」を有りにしても無しにしてもどちらでも表示することができます。 サイトを公開して何も設定しないとどちらのサイトにもアクセスできる状態です。 www.zakkipo …

MixHostキャンペーン

MixHost・1ヶ月間限定10%OFF!【期間限定キャンペーン】

レンタルサーバーの比較記事で取り上げ、当サイトでも利用させてもらっているMixHostが1ヶ月限定の10%OFFキャンペーンを開始しました! 2018年にブログをはじめる方に向けた「レンタルサーバーの …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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