ファビコン(favicon)とはfavorite iconの略でブラウザのタブや履歴、お気に入りに表示されるアイコンやスマホでサイトをホーム画面に置いたときに表示することができるアイコンのことです。
そんなファビコンをHTMLで表示させてみることにしました。
ファビコンは表示するとこんな感じになりすよ。みたいなことから記事は始まり、覚えたファビコンの作成方法でファビコンを表示するまでを紹介します。
HTMLでファビコンを表示するとこうなる
ウェブサイトにHTMLでファビコンを表示するとChromeやSafariなどの検索エンジンで開いたタブには、サイト名やページ名が表示されると共にアイコンが表示されるようになります。このとき表示されるアイコンがファビコンです。
上の画像では３つのタブがありますが、一番左のタブがこの記事を読んで頂いているサイトのファビコン。
真ん中のタブは、シンプルなファビコンを作成してHTMLで表示させてみたものです。
一番右のタブはHTMLでファビコンを表示させていない場合のブラウザでよく見ることがあるファビコンです。
HTMLでファビコンを表示して見ると、ファビコンを表示しているサイトは、ファビコンを表示していないサイトと比べて個性が出るのです。
お気に入りに追加してもHTMLで表示するファビコンは見ることができます。
上の画像はSafariのお気に入りに追加した場合のファビコンです。
他にもリーディングリストやChromeアプリにしたウェブサイトにファビコンが表示されたりと、数多くのところで小さいならがらも一生懸命に私たちのウェブサイトを表現しようとするファビコンは見ることができます。
そんなファビコンは、画像ファイルを作成して、作成した画像をファビコンとしてHTMLに埋め込みます。
ファビコンの画像を作成
ファビコンをHTMLで表示させてみたときの作り方をそのままの手順で説明します。難しい作り方はしてません。
はじめにファビコンをデザインします。画像編集ソフトを使用してファビコンのデザインを作成します。
私の場合、適当かよと思えるほどシンプル過ぎるデザインを無料の画像編集ソフトを使用して画像にしました。PhotoScape Xというソフトを使用しています。
最初はファビコンの全体的な作成手順を把握しておきたかったので表示確認用のファビコンデザインとなっております。
デザインしたファビコン画像のサイズは512×512にして拡張子は.pngにして保存します。
次に以下のfavicon generatorで様々なサイズのファビコンを一括生成します。
様々なファビコンを一括生成-favicon generator
favicon generatorの使い方はファビコンに使用するために作成した512×512サイズの画像を「画像ファイルを選択」のボタンで選択してから「ファビコン一括生成」のボタンをクリックします。
すると様々なサイズのファビコンがプレビューされるので自分で作成したファビコンをうっとりと眺めた後に「ファビコンダウンロード」のボタンでzipファイル名「favicons.zip」をダウンロードします。
ダウンロードした「favicons.zip」は解凍をしたfaviconsフォルダの中から次の2つの画像ファイル名のものをファビコンとして使用します。
- favicon.ico
- apple-touch-icon-180×180.png
favicon.icoとapple-touch-icon-180×180.pngのファビコン画像はHTMLファイルに埋め込んで表示することになります。そのためファビコンを表示したいサイトのフォルダ(imgフォルダなど)にFTPソフトでアップします。
apple-touch-icon-180×180.pngはapple-touch-icon.pngにリネームしておきます。
HTMLのheadにファビコンを埋め込み表示する
サイトのフォルダにアップしたfavicon.icoとapple-touch-icon.pngの画像ファイルはHTMLのheadに埋め込むことでブラウザのタブに表示できます。
埋め込み方法にはHTMLのlinkタグを使います。
<link rel="icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" sizes="180x180">
ファビコンを埋め込む具体的な記述は、まずHTMLファイルのhead要素にlinkタグを2つ記述します。
次に2つのlinkタグのうち、1つはrel属性にiconを指定。
もう1つのlinkタグのrel属性にはapple-touch-iconを指定します。
そしてhref属性にファビコンとして表示する画像ファイルのパスを指定します。
トドメにapple-touch-icon.pngのパスを指定しているlinkタグにsizes属性を記述して値を180×180に指定します。
HTMLファイルの編集を保存するとheadへのファビコン埋め込み作業は完成です。
HTMLのheadにファビコンを埋め込んだページをブラウザで表示してみると、タブにファビコンを表示することができています。
スクリーンショットにしてファビコンを見ると、適当に作った割には愛着が湧くのか、気に入り始めている自分がいます。
タブに表示するファビコンはHTMLのheadに埋め込んだfavicon.icoの画像ファイルが使用されています。
一方でapple-touch-icon.pngの画像ファイルはiphoneやipadのiosのホーム画面にウェブサイトのリンクを追加したときに表示されるアイコンとして使用されます。
表示してみることにしました。iphoneホーム画面への追加方法は簡単。
iphoneのSafariでウェブサイトにアクセスしてから、青い正方形の中から上に飛び出しちゃてる矢印アイコンをタップ。
「ホーム画面に追加」をタップします。
そうすると、HTMLのheadに埋め込んだapple-touch-icon.pngの画像ファイルがホーム画面のアイコンとして表示することができます。
このアイコンはファビコンについて調べているとファビコンとして説明されていることが多いのでファビコンだと思っていましたが「ウェブクリップアイコン」とも言うらしいのです。
初めて知りましたが、ファビコンとデザインを統一することになるはずなので、ファビコンと一緒に作成してHTMLで表示させてみると良いのでした。
ちなみにファビコンだと思いこんでいたウェブクリップアイコンは、サイトにBasic認証かけていると、iosのホーム画面にアイコンが表示できないことを覚えておきたいです。Androidでも表示されないかもしれません。
サイトにBasic認証をかけていた私は、Safariのキャッシュを削除しても、ファビコンを作成しなおしても、埋め込み直しても表示できなくて1時間くらい悩みました。
ファビコンを変更するときは画像を差し替える
ファビコンをHTMLで表示させてみたは良いけど、実際にブラウザのタブに表示させて見ると「なんか作成してみたときよりダセーな..」って思えるときがあります。
そんなときはファビコンを作成し直してファビコンを変更することになります。
ファビコンを変更するときは既存のファビコン画像をローカルに戻すか削除してから、作り直したファビコン画像を同じフォルダにアップするだけですから、パスを指定し直す必要もなくファビコンは変更できます。
ファビコンを変更するときに一緒にiphoneのホーム画面に追加するapple-touch-icon.pngを変更したときハマったことを最後に紹介。
apple-touch-icon.pngを変更後にiphoneのホーム画面で表示確認をするときに、いつまでたっても差し替えた画像の変更を確認できませんでした。
キャッシュが効いていたようです。
そのためapple-touch-icon.pngの画像を差し替えた後の表示確認は、iphoneの設定でSafariから「履歴とWebサイトデータを消去」をすると、変更したファビコンを表示して見ることができるので、確認作業がスムーズに進みます。
