ファビコン(favicon)の作り方と設定方法【WordPressでも有効】

ファビコン(favicon)はブラウザのタブやブックマーク、検索結果に表示される小さいアイコンです。

自分のサイトの目印になるので、是非設置しておきましょう。

この記事では、ファビコン(favicon) の仕様についてと、設定方法を解説していきます。

このページの内容(目次)

ファビコン(favicon)とは

faviconが使われている場所

ファビコン(favicon)とはブラウザやブックマーク、検索結果画面に表示されるそのサイトやページを示す小さなアイコンのことです。

これらはGoogleが勝手にきめたりしているのではなく、発信者が自分で決めて設定しています。

ファビコンを設置する意味・効果

現在は、ファビコン(favicon)はほとんどすべてのサイトで使用されています。

ファビコン(favicon)を設置する効果は主にサイトを目立ちやすくすること、です。

ブックマークや検索結果など、多くのページがずらっと並ぶところでアイコンがあると、テキストだけで探すよりも効率よく見つけることができるためです。

ファビコンのサイズと種類

ファビコンのサイズには具体的には下記のようなものがあります。

サイズ使われているところファイル名
16px × 16pxブラウザfavicon.ico
32px × 32pxブラウザfavicon.ico
152px x 152pxiOS,Safariのホーム画面apple-touch-icon.png

上記の他にも沢山のサイズがあるのですが、上記を用意しておけばOKです。

画像形式はビットマップのアイコン用である ico 形式と、png画像です。

ファビコンの作り方

WordPressの場合はファイルのアップロードから設定まで全てWordPress側で行うことができます。

WordPressの機能を使わずにファビコン(favicon)を作成するには、下記のツールを使って作るのが手っ取り早いです。

様々なファビコンを一括生成。favicon generator

正方形で画像を作成し、上記ツールに読み込ませれば必要なfaviconがすべて作成されます。

ico ファイルはマルチアイコンになっているので16x16も、32x32も一つのファイルに含まれています。

画像ファイルを選択し、<ファビコン一括生成>ボタンを押す
大量にファイルが作成されますが、必要なファイルは2ファイルだけです。

ファビコンの設定方法

ファビコンの設定方法ですが、WordPressで設定する場合と、FTPで設置する場合の2パターンがあります。

WordPressでファビコンを設定する場合

WordPressでファビコンを設定する場合

<外観>→<カスタマイズ>→<サイト基本情報>を選択し、「サイトアイコン」を選択します。

ファイルを選択またはアップロードし、<公開>ボタンを押せば完了です。

FTPでファビコンを設置する場合

FTPクライアントで以下のファイルをドキュメントルート直下にアップロードします。

  • favicon.ico
  • apple-touch-icon.png

続いて、下記のコードをヘッダ内に入れてください(テーマによりヘッダに追加のタグを入れる方法は異なります)。

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

実はfaviconはドキュメントルートに設置するだけでOK

favicon.ico や apple-touch-icon.png はドキュメントルートに設置するだけでも反映されます

というのは最近のブラウザはページを表示する際に favicon.ico や apple-touch-icon.png を(勝手に)リクエストしているからです。

WordPressで設定した場合や、FTPでアップ後にヘッダにコードを入れる場合、全ページに入れることになってしまいます。

特にWordPressで設定すると、下記のように4つもコードが入ることになります。

<link rel="icon" href="32x32.pngの画像のフルパス" sizes="32x32" />
<link rel="icon" href="192x192.pngの画像のフルパス" sizes="192x192" />
<link rel="apple-touch-icon" href="180x180.pngの画像のフルパス" />
<meta name="msapplication-TileImage" content="270x270.pngの画像のフルパス" />

favicon のために4行も使いたくないので、私の場合はソースには何も書かず、ただFTPでファイルを設置するだけにしています(今のところそれで何も不都合は起きていません)。

まとめ:ファビコン(favicon)は忘れず設定しましょう

サイトを立ち上げた直後についつい忘れてしまいがちなファビコンですが、うっかり忘れてた、ということがないように気をつけましょう。

このページの内容(目次)
閉じる