ファビコンを設定してみよう

「ファビコン」は「フェイバリット・アイコン」の略称で、ブラウザやブックマークで表示される、ウェブサイトのイメージアイコンです。

「ファビコン」を設定しておくと、「このアイコンはこのサイト」とユーザーにサイトイメージを直感的に伝えることができ、サイトの味わいも増します。

ここでは、そんなファビコンを、ウェブサイトに設定する方法を見ていきましょう。

必要最小限のファビコン設定

ここでは、必要最小限でできる、3つのファビコンの設定を見ていきます。

favicon.ico
ブラウザの端っこなどに表示されるアイコンです。

apple-touch-icon
Safari（iPhone）やChrome（Android）で、ブックマークを「ホームに追加」するとき表示されるアイコンです。

og:image
ツイッターカードなどSNSで表示される画像です。

ファビコンというよりサムネイル画像ですが、サイトにSNSボタンを導入している場合は、一緒に設定しておきましょう。

ファビコン画像を作る

まずはファビコン画像を作ります。

フリー素材を使ってさくっと用意することも出来ます。

自作する場合は大きめサイズを1つ作っておき、それをリサイズして使い回すと楽です。

favicon.ico

ファビコン（favicon.ico）の画像サイズは、ブラウザ用には16x16,32x32（タブ、アドレス、ブックマークなどのアイコン）。

win用ショートカットアイコンとしては48x48,64x64が適正と言われています。

適正サイズがない時は用意された画像をブラウザ側で拡大縮小してくれるので、どれか1つのサイズで用意しておけばOKです。

最小16x16（px）で表示されるので、複雑な図柄だとつぶれてしまいます。

小さくても分かりやすいシンプルな図柄を心がけましょう。

ファイル形式は「.ico」「.png」「.gif」形式で作れますが、「.png」「.gif」は対応していないブラウザもあるため、「.ico」で作るのが一般的です。

「.png」などで画像を作っておき、変換ソフトなどで「.ico」に変換すると簡単です。

「ico 変換サイト」などと検索すると、無料で変換できるサービスが色々出てくると思います。

私がよく利用しているサイト様はこちら。

どちらも素材画像を「.ico」ファイルへ変換できます。

x icon editor
ピンポイントで.ico形式に変換してくれる。

favicongenerator
様々なサイズの画像を一括生成してくれる。

apple-touch-icon

apple-touch-iconは、Safari（iPhone）やChrome（Android）で、ブックマークを「ホームに追加」するとき表示されるアイコンです。

こちらは180x180サイズの画像1つでOKです。

ファイル形式はpngが一般的になっています。

og:image

og:imageの画像サイズは、メインで使うSNSの標準画像サイズに合わせます。

ツイッターカード（画像小さい）では「1：1」比率の「144x144」。

ツイッターカード（画像大きい）では「1.19：1」比率の「600x314」が適正とされています。

ツイッターカードでは、画像が大きい時は「中央から」自動でトリミングされます。

ツイッターカード（画像大きい）を使う場合は、併用を考慮してフェイスブック推奨の「1200x630」で作っておくのもいいでしょう。

ファイル形式はpngやjpgが一般的です。

※単位は全て「px」。

ファビコンを設定する

画像の準備ができたら、ウェブサイトと同じサーバーに、画像ファイルをアップロードします。

任意の場所でOKですが、ここではドメイン直下の「img」フォルダにアップロードする想定です。

パスの書き間違いなどに注意しましょう！

続いて、ファビコンを表示したい（全ての）ページのhead内に、ファビコン設定を記述します。

favicon.ico

favicon.icoのコードは、対応ブラウザによって少し書き方が変わります。

こちらはIE9,10にも対応した書き方です。

<link rel="icon" type="image/x-icon" href="https://sample.com/img/favicon.ico">

IE11以降のみの対応で良ければ、より簡潔なコードでOK。

<link rel="icon" href="https://sample.com/img/favicon.ico">

また、画像に.icoファイルではなく、svgファイルを使う場合の書き方はこちら。

svgファイルは、拡大しても画像がぼやける事なく、1枚でどんなサイズにも適応できるファイル形式です。

<link rel="icon" type="image/svg+xml" href="https://sample.com/img/favicon.svg">

.pngファイルを使う場合の書き方はこちら。

<link rel="icon" type="image/png" href="https://sample.com/img/favicon.png">

.gifファイルを使う場合の書き方はこちらです。

<link rel="icon" type="image/gif" href="https://sample.com/img/favicon.gif">

apple-touch-icon

「favicon.ico」と「apple-touch-icon.png」は、この名称でサーバーのルートディレクトリにアップロードすれば、ファイルに記述をしなくてもブラウザで勝手に拾ってくれる事もあります。

フォルダに入れたい、独自の名前をつけたい場合は、設定を記述すれば任意の場所＆ファイル名でOKです。

<link rel="apple-touch-icon" href="https://sample.com/img/apple-touch-icon.png">

og:image

「og:image」でTwitterカードを表示する場合は、表示形式、記事のURL、記事のタイトル、記事の概要、画像URLを指定します。

<meta name="twitter:card" content="summary">
<meta property="og:url" content="ウェブページのURL">
<meta property="og:title" content="ウェブページのタイトル">
<meta property="og:description" content="ウェブページの概要">
<meta property="og:image" content="https://sample.com/img/sns.png">

ファビコンを確認する

3つのファビコン設定を、実際に書いてみるとこんな感じになります。

<meta name="twitter:card" content="summary">
<meta property="og:url" content="ウェブページのURL">
<meta property="og:title" content="ウェブページのタイトル">
<meta property="og:description" content="ウェブページの概要">
<meta property="og:image" content="https://sample.com/img/sns.png">
<link rel="icon" type="image/x-icon" href="https://sample.com/img/favicon.ico">
<link rel="apple-touch-icon" href="https://sample.com/img/apple-touch-icon.png">

これでセットアップは完了！

今度は、実際にページをブラウザで見たり、ホームに追加してみたりして、ファビコン表示を確認してみましょう。

ツイッターカードの反映には少し時間がかかったりするので、少し時間をおいてから試すか、 twitter公式の検証ページでも表示を確認できます。

表示を確認したいページのURLを入力して「プレビューカード」ボタンを押すと、ツイッターカードの確認ができます。

うまく表示できない時は、ファイル名や保存場所、パスの書き間違いなどを、もう1回チェックしてみましょう。

ツイッターカードはキャッシュの問題で表示されない事もあるので、本番ページをコピーしたテストページなどで試してみるのがおすすめです。