ほんっとにはじめてのHTML5とCSS3：[42-4] link要素でショートカットアイコン（favicon）を表示させよう

[42-4] link要素でショートカットアイコン（favicon）を表示させよう

最終更新日：2019年07月05日　（初回投稿日：2012年07月12日）

今回はウェブページのショートカットアイコンを <link>要素で表示させましょう。

ショートカットアイコンとは、ウェブページのタイトルと共に表示されるアイコン。
ちなみに、favicon は、Favourite（お気に入り）+ Icon（アイコン）という造語です。

本日のINDEX

デスクトップブラウザのショートカットアイコン
スマホ・タブレットのショートカットアイコン
1. iOS Android で共用できる apple-touch-icon
2. Android-Chrome の manifest.json
apple-touch-icon・favicon.png・favicon.ico だけでも
「Favicon Generator」で全部簡単に作れます

[42-1] link要素で外部CSSファイルの読み込み・グループ化をしよう: <link>要素全体の話と、外部CSSファイルの読み込み方法
[42-2] link要素の media属性で外部CSSをメディア別に切り替えよう: media属性で外部CSSファイルを切り替えます。
（ちょっとメモ）CSSの @import と @media（メディアクエリ）: CSSファイル上で CSSを切り替える方法です。
[42-3] link要素の「rel属性」の値（リンクタイプ）: たくさんの言語に対応したサイトの場合、<link>要素で言語の切り替えができます。
[42-4] link要素でショートカットアイコン（favicon）を表示させよう　←今日はココ: ショートカットアイコンを設定します。

● 2017年11月：このページは大幅に書き換えました。
初回投稿時（2012年）とは ショートカットアイコンの状況がまったく異なるため、新しい情報に更新しました。

デスクトップブラウザのショートカットアイコン

デスクトップブラウザでのショートカットアイコンは、かつては「favicon.ico」だけでしたが、PNGファイルも使えるようになったり、Windowsでタイルアイコンができたり、MacOS の Safari で SVGが採用になったり、とにかく種類が増えているので、頭の整理も兼ねてまとめます。

favicon.ico がショートカットアイコンの元祖

「favicon.ico」は、元々 Windows の仕様ですが、ほとんどのブラウザで、もちろん今も使えて、iOS や Android でも表示できます。

ICO形式は FavIcon from Pics などのサービスで他の画像形式から作ることができます。最小サイズは16×16pxです。

IE8、9 が「rel="shortcut icon"」「favicon.ico」のみの対応だったので、IE9が現役のときはこの書き方が主流でした。<link>要素で指定します。

<head>
  <link rel="shortcut icon" href="favicon.ico">
</head>

「favicon.ico」のパス（href属性）は、ファイルを置いた位置のパスを書きます。
（絶対パスでも相対パスで書いてもOKです）

HTML5 から、<link rel="icon"> と書けるようになり、ICO形式のほかに「gif（gifアニメーション形式も含む）」「jpg」「png」「svg」なども指定できるようになりました。
24ビットカラー（約1677万色）で「透過」も使える「PNG形式」が主流で、「gif」や「jpg」はあまり使われていないのが現状です。

<head>
  <link rel="icon" href="/favicon.png">
</head>

GIF、JPEG、PNG の違いnについては、 [14-2] 画像形式について（GIF、JPEG、PNG の違い）をご覧ください。

上のソースで「href="/favicon.png"」の先頭の「/」はルートディレクトリを示します。「サイトルート相対パス」という書き方です。（絶対パスや相対パスで書いてもOKです）

絶対パス・相対パス・サイトルート相対パスについては、
[10] 絶対URL と相対URL（絶対パスと相対パス）をご覧ください。

favicon.png は、IE11、Edge を始めほとんどのブラウザで使えますが、iOS Safari では使えません。iOS Safari は apple-touch-icon.png 。名前だけの問題なんだけどね。

たくさんのサイズを同時に指定するときは sizes属性を使います

デバイスやブラウザに合わせて、<link>要素で複数サイズのアイコンを指定できます。
その場合、<link>要素の「sizes属性」で、どのファイルをどのサイズで使用するかをブラウザに支持することができます。

<head>
  <link rel="icon" href="/favicon16.png" sizes="16x16">
  <link rel="icon" href="/favicon32.png" sizes="32x32">
  <link rel="icon" href="/favicon48.png" sizes="48x48">
  <link rel="icon" href="/favicon96.png" sizes="96x96">
  <link rel="icon" href="/favicon192.png" sizes="192x192">
</head>

「sizes属性」は、<link>要素の rel属性が「icon」のときしか使えません。
値は「◯x◯」という数値指定のほかに「any」というキーワードも使えて、SVG形式のようにスケーラブルなアイコンを含んでいることを示します。

<head>
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
  <link rel="icon" href="iphone.png" sizes="57x57" type="image/png">
  <link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">
</head>

ちなみに「favicon.ico」は無くなったわけではなく、デスクトップブラウザ、iOS、Android ブラウザでも使えます。複数サイズも使えます。

また、「rel="shortcut icon"」という書き方も、最新のブラウザでもエラーにならず表示されます。ただしこの場合「sizes属性」は使えません。

Windows のタイルアイコンに browserconfig.xml を使う方法

Windows 8・ IE 11 はスタート画面にサイトをピン留めできる機能があります。
その「タイルアイコン」を表示するために「browserconfig.xml」が使えます。
「browserconfig.xml」内でアイコンファイルを指定します。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#ad181f</TileColor>
        </tile>
    </msapplication>
</browserconfig>

XMLは、終了タグの無いものは最後に「/」が必要。（5行目）

複数のサイズのタイルも指定できます。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#ad181f</TileColor>
        </tile>
    </msapplication>
</browserconfig>

この「browserconfig.xml」をルートディレクトリに置くことで自動的にタイルアイコンが表示されます。

browserconfig.xml 無しで Windows のタイルアイコンを表示する

Windows8・ IE11 でサイトの「タイルアイコン」を作るとき、「browserconfig.xml」を使わない方法もあります。

Microsoft の Build a site tile で簡単に作れます。

サイトタイトル、タイルの背景色などを入力し、画像もアップロードすれば、コードが表示されるので、それを<head>要素内にコピペするだけ。
「browserconfig.xml」内に記述するメタデータを、直接 <head>要素内に<meta>要素で書く方式らしいです。

生成されたコードを<head>要素内に入れた例です。（画像をアップした場合）

<head>
  <meta name="application-name" content="入力したタイトル">
  <meta name="msapplication-square70x70logo" content="small.jpg">
  <meta name="msapplication-square150x150logo" content="medium.jpg">
  <meta name="msapplication-wide310x150logo" content="wide.jpg">
  <meta name="msapplication-square310x310logo" content="large.jpg">
  <meta name="msapplication-TileColor" content="#ad181f"> <!--入力した背景色-->
</head>

さらに、「Download images」ボタンで生成された画像ファイルをダウンロードし、上記のコードのままなら HTMLファイルと同じ階層に置きます。
画像を置く階層を変えるなら、上記のコードのパスも変更します。

El Capitan Safari 9 からのページピンアイコンは SVG

Mac OS El Capitan の Safari 9 からタブを固定する「ページピン」が利用できます。
そこで使用するページピンアイコン（Pinned Tab Icons）は「SVGファイル」です。

Apple の Creating Pinned Tab Icons によると、
・透明背景に黒（#000000）の「モノクロ画像」の SVGファイルであること
・SVGファイルはレイヤー1つ
・viewBox属性は "0 0 16 16"に設定する
ということです。

SVGファイルの作り方は（Illustrator を使う方法ですが）
[70-1] svg要素でベクターグラフィクスを埋め込もうをご覧ください。
または、モノクロ（白黒）の画像ファイルから書き出すサービスも後半で紹介します。

例えば、こんな SVGを作ったとして、

<head>
  <link rel="mask-icon" href="/icon.svg" color="#ad181f">
</head>

このように表示されるはず。

Safari でリロードしても新しいアイコンが表示されない場合は、古いアイコンのキャッシュをクリアします。
「~/Library/Safari/Template Icons」フォルダの中身を全部消去し、Safariのタブを閉じて再起動。再度読み込めば新しいアイコンで表示されます。

スマホ・タブレットのショートカットアイコン

iOS Android で共用できる apple-touch-icon

apple-touch-icon.png は、iOS だけでなく Android Chrome でも使われます。
（Android標準ブラウザ（webview）は、favicon.ico、favicon.png を使います）
名前が「apple-touch-icon.png」の PNGファイル。サイズは 180×180px の1コでOK。

iOS の場合は、この PNGファイルをルートディレクトリに置けば何もしなくても良いのですが、Android のために下記のコードを書きます。

<head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

ルートディレクトリに置かずに、ほかのディレクトリに置くなら、href属性のパスを変えればOK。

ちなみに、「apple-touch-icon-precomposed.png」というのもありましたが、これはかつて iOSが勝手にアイコンを立体的（ハイライトやシャドウを付ける）にする仕様だったため、その立体化をさせないためのファイル名でした。
今はそのまま表示してくれるので、この「-precomposed」付きのものは不要です。

Android-Chrome の manifest.json

Google「Chrome」では、「apple-touch-icon.png」「favicon.ico」も使えますが、ウェブアプリマニフェストというJSONファイルでアイコンを指定する方法も使えるようです。
ウェブアプリマニフェスト | Web | Google Developers によると、
下記のような「manifest.json」を作り、PNGのアイコンを指定します。

{
  "short_name": "◯◯◯",
  "name": "◯◯◯◯◯◯◯◯",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

「short_name（ホーム画面でテキストになる）」と「name（ウェブアプリのインストールバナーになる）」は必須とのことです。

この「manifest.json」を <link>要素で指定します。

<head>
  <link rel="manifest" href="/manifest.json">
</head>

また、<meta name="theme-color"> でタブ色も変えることができます。

<head>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#eceff1">
</head>

ウェブアプリマニフェスト（Web App Manifest）は、W3C で草案になっている技術です。今後、Chrome だけでなく、他のブラウザでも使われる技術かもしれません。

apple-touch-icon・favicon.png・favicon.ico だけでも

apple-touch-icon・favicon.png・favicon.ico だけでも、そこそこの種類のブラウザをカバーできます。
できないのは、Windowsのタイルアイコン、Safari 9 のピンページアイコン。

apple-touch-icon は、180pxのもの1つで iOS Safari、iOS Chrome、Android Chrome で有効。
favicon.png は、192pxでデスクトップのブラウザと、Android標準（webview）で有効。
favicon.ico は、64pxでデスクトップ・iOS・Android で有効（ただしホーム画面のアイコン以外）

サーバにあげるファイルは下の3つです。
・apple-touch-icon.png（180×180px）
・favicon-192x192.png（192×192px）
・favicon.ico（64×64px）

<head>要素内に書くコードはこんなかんじ。
ファイルのURLはルートディレクトリに置かないなら正しいパスに直します。

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

「Favicon Generator」で全部簡単に作れます

「xml、svg、json、なんかめんどくさ〜い」と思っていたら見つけました！
画像を用意するだけで、何もかも作ってくれるサイトを。
Favicon Generator

XMLも SVGも JSONも一式作ってくれて、まとめてダウンロードして、ソースコードをコピぺするだけです。
以下、Favicon Generator の使い方です。

大きめの画像を用意してアップロード

トップページで、画像をアップロードします。

260×260px 以上のサイズで、PNG・JPG・SVG が使えます。

ここでは、この画像をアップロードした例で解説します。
実サイズは512×512px の PNGファイルをアップロードしました。

しばし待つと、プレビューが表示されます。
iOS と Android Chrome のアイコンは、何も調整しなくて大丈夫でした。

Windows のタイルは、色がマッチしないのでちょっと調整しました。
タイルの背景がグラデーションなので、背景透明のPNGファイルを「Dedicated picture」でアップロードするのがベストでしょう。

Safari9 のページピンアイコンはモノクロ画像が必要

Safari9 のページピンアイコンは、最初にアップしたPNGファイルでこんなかんじ。

濃い色（赤）を黒に変換しているようなので、反転した白黒の PNGファイルを作ってアップロードしました。
「Dedicated picture」タブで「Pick picture ...」ボタンを押してアップロードし、表示された画像を選択すると、プレビューも変化します。

「Settings」タブに戻って、「Theme color（テーマカラー）」を調整して終わりです。

ダウンロードファイルとコードをゲット

最後に Favicon の解像度を選んで、一番下の「Generate ...」ボタンを押します。

ダウンロードページになります。
「Favicon Package」ボタンをクリックすると、ファイル一式ダウンロードできます。
表示されているコードは <head>要素内にコピペします。

こんなコードが生成されました。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!--iOS-->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json"> <!--Android Chrome-->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ad181f"> <!--Safari9-->
<meta name="theme-color" content="#ffffff"> <!--Android Chromeでタブ色を変える-->

このコードは、ダウンロードしたファイルをすべて ルートディレクトリ に置いた場合のもの。
「browserconfig.xml」とそれに伴う「mstile-150x150.png」は ルートディレクトリ に置くしかありませんが、その他のファイルは他のディレクトリに置いてもOK。
その場合はコード内のパスも書き直します。

ダウンロードファイルは、ZIPを解凍すると以下のものが入っていました。

サーバに設置できたら、Favicon Generator のトップに戻って、アイコンがちゃんと効いているかチェックできます。

ブログシステムなどでは全部そのまま使えるとは限らない

こうして生成してもらったコードとファイルですが、レンタルブログを使っている場合などでは、
・ルートディレクトリに置けない
・「svg」「json」ファイルをアップロードできない
などの制約があるサービスもあります。

そんなとき、Win のタイルアイコンは、browserconfig.xml 無しの方法で作ったり、
Android Chrome の JSON、Safari 9 の SVG は、別のサーバにあげて呼び出すなど工夫が必要です。

別サーバに上げる場合、読み込む側が SSL化（https）していると、ファイルを揚げたサーバも SSL化されていなければ、読み込まれない場合もあります。

次回予告

アイコンを自分で全部作るより、Favicon Generator を使ったほうが気楽ですね。
<link>要素は今回で終わりです。

次回は <style>要素を使ってみましょう。
<style>要素は、HTMLファイル上に直接スタイルシートを書くための要素です。
外部スタイルシートを読み込む時は<link>要素、HTMLに直接CSSを書く時は<style>要素を使います。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-07-05（Fri）│
投稿日：2012-07-12（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿