ウェブページごとに異なる独自アイコンを表示するためのHTMLソース
前ページでは、ウェブサイト全体に一括して独自アイコンを適用する方法をご紹介いたしました。しかし、それ以外の方法を使いたい場合もあります。例えば、以下のような場合です。- ページやコーナーごとに異なるアイコンを使いたい場合
- ウェブサイトの最上階層には任意のファイルを置けない場合
- 既定の画像形式ではない別の形式でアイコン画像を用意したい場合
上記のような場合には、HTMLのhead要素内にlink要素を記述することで対処できます。具体的には以下のように記述して、アイコンファイルの所在を示します。
<link rel="shortcut icon" href="/icons/favicon.ico"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">rel属性でアイコンの種類を指定し、href属性でアイコンファイルの場所を指定します。
■ファビコンの指定には「rel="shortcut icon"」を使う
上記の1行目では、iconsフォルダにある「favicon.ico」というアイコンファイルを、そのウェブページに対するファビコンだと指定しています。「rel="shortcut icon"」の「shortcut」と「icon」の間には空白文字がありますので注意して下さい。
■apple-touch-iconの指定には「rel="apple-touch-icon"」を使う
上記の2行目では、iconsフォルダにある「apple-touch-icon.png」というアイコンファイルを、そのウェブページに対するモバイル用アイコン(apple touch icon)画像だと指定しています。
上記のようにlink要素を使ってファイルの位置が指定されている場合は、ウェブサイトの最上階層にあるファイルよりも優先して使われます。
■記述例：
もし、ファビコンにはGIF形式の「iconimage.gif」ファイルを指定し、apple touch icon画像にはJPEG形式の「ati.jpg」ファイルを指定したいのなら、以下のように記述します。
<link rel="shortcut icon" href="iconimage.gif"> <link rel="apple-touch-icon" href="ati.jpg">
タブやブックマークなどでのアイコン表示確認用サンプルページ
タブやブックマーク項目に独自アイコンがどのように表示されるのかを確認できるサンプル
→ タブやブックマークにアイコンを掲載するサンプルページ
※どちらのアイコン画像が表示に使われているのかが分かりやすいように、「favicon.ico」はピンク色のアイコン画像で、「apple-touch-icon.png」は青色のアイコン画像になっています。
タブやブックマークにサイト独自のアイコンを表示する方法
今回は、ブックマークアイコンやショートカットアイコンとして、ウェブサイト独自の画像を表示する方法をご紹介いたしました。PC用ブラウザの「タブ」や「アドレスバー」、スマホ用ブラウザの「ブックマーク」や「ホーム画面」などに、ぜひ自作アイコンを表示させてみて下さい。【関連記事】
