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

最終更新日:2017年11月26日  (初回投稿日:2012年07月12日)

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

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

本日のINDEX
  1. デスクトップ ブラウザの ショートカットアイコン
    1. favicon.ico がショートカットアイコンの元祖
    2. たくさんのサイズを同時に指定するときは sizes属性を使います
    3. Windows のタイルアイコンに browserconfig.xml を使う方法
    4. browserconfig.xml 無しで Windows のタイルアイコンを表示する
    5. El Capitan Safari9 からのページピン アイコンは SVG
  2. スマホ・タブレットのショートカットアイコン
    1. iOS Android で共用できる apple-touch-icon
    2. Android-Chrome の manifest.json
  3. apple-touch-icon・favicon.png・favicon.ico だけでも
  4. 「Favicon Generator」で全部簡単に作れます
    1. 大きめの画像を用意してアップロード
    2. Safari9 のピンタブアイコンはモノクロ画像が必要
    3. ダウンロードファイルとコードをゲット

<link>要素は内容が多いため 記事を分けています。

[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を作ったとして、

<link>要素の「color」属性で表示色を指定すると、

<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>要素を使います。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.