faviconやホーム画面アイコンの指定方法2017

まめわざでの設定方法も

faviconの設定方法をネット検索すると、大量の情報が表示されます。
矛盾する情報もあり、新旧の情報が混在し、情報の取捨選択に難儀します。
ここでは、そうしたネット上の情報から一旦離れ、独自のテストを行った結果をご紹介いたします。
スマホのタブ選択時のアイコンなど調査対象を広げ、2017年7月の現時点で「結局どうしたらいいの？」にお答えします。

また最後に、まめわざでのfavicon設定方法をご紹介いたします。

調査の条件

faviconとは？

faviconはブラウザ（ホームページ閲覧ソフト）で表示されるホームページ毎のアイコンです。
上部タブ・お気に入り・履歴のサイト名の左側に表示されます。
また、スマホでブックマーク（お気に入り）をホーム画面に設置すると、アプリと同じようにアイコンが表示されます。このホーム画面アイコンも広義のfaviconとして扱われます。
以下、ここでは総称して「favicon」と呼んでいます。

調査する環境（端末・ブラウザ）と表示位置

現在、主に利用されている端末・ブラウザのfaviconの表示位置の全て（下記）について調査を行います。

iOS(iPhone / iPad)のSafari

１．ホーム画面
２．お気に入り（ブックマーク内のフォルダの1つで、空のタブを開いた際にアイコン表示）

iOSのChrome

３．ブックマーク
４．タブ選択時

ホーム画面への追加はできないようです。

AndroidのChrome

５．ホーム画面
６．ブックマーク
７．タブ選択時

Androidの標準ブラウザ(webview)

８．ホーム画面
９．URLの左
補足説明）ホーム画面アイコンの追加方法

ブックマークは必ずキャプチャ画像になるため、今回の調査からは除外しています。
尚、補足説明の画像にあるように、ブックマークへの登録時に「追加先指定」にするとホーム画面にアイコンが設置できます。

パソコン(Windows・Mac OSX)

１０．IE11
１１．Edge
１２．Chrome
１３．Firefox
１４．Safari(OSX)

調査するfaviconの種類と指定方法

次の3つfavicon・ホーム画面アイコンを調査します。

  • favion.ico
    古くからPC用として用意されている、拡張子がicoのfavicon
  • apple-touch-icon.png
    初代iPhoneから使用されているiOSのホーム画面アイコン
  • favicon.png
    favicon.icoのpng版（Android用という解説もあり）

各faviconについて、下記の複数の指定方法を調査します（headタグ内にlinkタグで設置する場合は複数のサイズ、またルート直下に特定のファイル名で置いた場合）。
尚、faviconは基本的に正方形のため、16×16pxを16pxと省略表記しています。

faviconの種類指定方法
favion.ico・以下のタグ（16・32・48・64px）
<link rel="icon" href="/favicon16.ico" type="image/x-icon">
<link rel="icon" href="/favicon32.ico" type="image/x-icon">
<link rel="icon" href="/favicon48.ico" type="image/x-icon">
<link rel="icon" href="/favicon64.ico" type="image/x-icon">

・ルート直下にファイル名favicon.icoとして直置き（64px）　
apple-touch-icon.png・以下のタグ（57～180pxの各サイズ）
<link rel="apple-touch-icon" href="apple-touch-icon57.png" sizes="57x57">
<link rel="apple-touch-icon" href="apple-touch-icon60.png" sizes="60x60">
<link rel="apple-touch-icon" href="apple-touch-icon72.png" sizes="72x72">
<link rel="apple-touch-icon" href="apple-touch-icon76.png" sizes="76x76">
<link rel="apple-touch-icon" href="apple-touch-icon114.png" sizes="114x114">
<link rel="apple-touch-icon" href="apple-touch-icon120.png" sizes="120x120">
<link rel="apple-touch-icon" href="apple-touch-icon144.png" sizes="144x144">
<link rel="apple-touch-icon" href="apple-touch-icon152.png" sizes="152x152">
<link rel="apple-touch-icon" href="apple-touch-icon180.png" sizes="180x180">

・ルート直下にファイル名apple-touch-icon.pngとして直置き（180px）　
favicon.png・以下のタグ（16～192pxの各サイズ）
<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">　

faviconの種類別の調査結果

faviconの種類別の調査結果を表にまとめました。
実際には、下で紹介する指定方法（タグorルート直置き、など）別にそれぞれを調査をしています。

favicon.ico・apple-touch-icon.png・favicon.pngの調査結果
環境・表示位置faviconの種類
OSブラウザ表示位置favicon.icoapple-touch-icon.pngfavicon.png
iOSSafariホーム画面×○×
お気に入り○○（優先）×
Chromeブックマーク○（優先）○×
タブ選択○○（優先）×
AndroidChromeホーム×○×
ブックマーク○（優先）○×
タブ選択○（優先）○×
標準(webview)ホーム○×○
URLの左○×○
WindowsIE11ブックマーク・タブ○×○
Edgeブックマーク・タブ○×○
Chromeブックマーク・タブ○×○
Firefoxブックマーク・タブ○×○
OSXSafariブックマーク○×○

考察

  • 一般的には、スマホはapple-touch-icon.png、PCはfavicon.icoという分類ですが、スマホでも多くの箇所でfavicon.icoが利用されます。
  • apple-touch-icon.pngとfavicon.icoが重複した場合、ブラウザによって優先度が異なります。
  • favicon.pngはfavicon.icoに含まれます。favicon.pngはAndroid標準(webview)以外は無効です。

指定方法（タグ・直置き・faviconのサイズ）別の調査結果

faviconの種類別に、上の調査するfaviconの種類と指定方法で紹介した複数の指定方法で調査した結果を表にまとめます。

favicon.ico

環境・表示位置favicon.icoの指定方法
OSブラウザ表示位置タグ(複数サイズ)タグ(64pxを1つ)タグ(128pxを1つ)ルートに直置き
iOSiOS10 Safariホーム画面××××
お気に入り最初のタグ○○○
Chromeブックマーク×○×○
タブ選択16px○○○
AndroidChromeホーム××××
ブックマーク最後のタグ○○○
タブ選択最後のタグ○×○
標準(webview)ホーム最後のタグ
（32px以上？）		○○○
URLの左最後のタグ
（32px以上？）		○○○
WindowsIE11ブックマーク・タブ最初のタグ○○○
Edgeブックマーク・タブ最初のタグ○○○
Chromeブックマーク・タブ32px○○○
Firefoxブックマーク・タブ最後のタグ○○○
OSXSafariブックマーク最大サイズのタグ○○○

apple-touch-icon.png

環境・表示位置apple-touch-icon.pngの指定方法
OSブラウザ表示箇所タグ(複数サイズ)タグ(180pxを1つ)ルートに直置き
iOSiOS10 Safariホーム画面120(iPadは152)○○
お気に入り最後のタグ○○
Chromeブックマーク最初のタグ○×
タブ選択最初のタグ○×
AndroidChromeホーム144○×
ブックマーク144○×
タブ選択144○×
標準(webview)ホーム×××
URLの左×××
WindowsIE11ブックマーク・タブ×××
Edgeブックマーク・タブ×××
Chromeブックマーク・タブ×××
Firefoxブックマーク・タブ×××
OSXSafariブックマーク×××

favicon.png

環境・表示位置favicon.pngの指定方法
OSブラウザ表示位置タグ(複数サイズ)タグ(192pxを1つ)
iOSiOS10 Safariホーム画面××
お気に入り××
Chromeブックマーク××
タブ選択××
AndroidChromeホーム××
ブックマーク××
タブ選択××
標準(webview)ホーム最初のタグ○
URLの左最初のタグ○
WindowsIE11ブックマーク・タブ最初のタグ○
Edgeブックマーク・タブ最初のタグ○
Chromeブックマーク・タブ32px○
Firefoxブックマーク・タブ最後のタグ○
OSXSafariブックマーク最大サイズのタグ○

タグとルート直置きの優先度

タグとルート直置きの両方を指定した場合の優先度はタグが上です。
favicon.ico・apple-touch-icon.pngのいずれも、あらゆる環境・表示箇所で同様の評価でした。

考察

  • タグで複数サイズを指定した場合、最初 or 最後 or 規定サイズとブラウザによって採用ルールが異なります。
    バージョンの古いブラウザを考慮しなければ、タグで複数サイズを指定することは、問題の元凶と成り得ます。
  • ルート直置きだけが対応する環境・表示位置はありません。タグを指定する限りルート直置きは不要です。
  • 128pxのfavicon.icoは表示されない場合があります。
  • 64pxのfavicon.ico、180pxのapple-touch-icon.png、192pxのfavicon.pngは対応している表示位置でいずれも表示可です。

結論

まずは上記の考察をまとめてみます。

  • favicon.pngはfavicon.icoに含まれます。
  • タグで複数サイズ指定は不要です。
    64pxのfavicon.ico、180pxのapple-touch-icon.png、192pxのfavicon.pngは対応している表示位置でいずれも表示可です。
  • タグで指定すればルート直置きは不要です。
  • favicon.icoとapple-touch-icon.pngが重複した場合、ブラウザによって優先度が異なります。

以上から、推奨される指定方法は以下です。

  • 64×64pxのfavicon.icoと180×180pxのapple-touch-icon.pngを用意します（favicon.icoはスマホにも表示され得るので16・32pxより64pxを推奨、apple-touch-iconは120・152pxなどでも構いません）
  • 以下のタグをheadタグ内に設置します。
    直置きは不要なので、ファイル名を変えたり、フォルダ内に設置しても構いません。その際はhrefを変更してください。
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">　

まめわざでのfavicon設定方法

faviconを設置するには、元となるアイコン画像の作成が必要です。アイコン画像の作成には、イラストレーターやWindows附属のペイントなど、画像処理のソフトとそれを利用する知識が必要です。
元となるアイコン画像が用意できたら、以下の方法でまめわざに設定が可能です。

  • アイコン画像が出来上がったら、64x64pxと180×180pxのPNG形式で保存します。
    2つのサイズのアイコン画像を別々に用意しても構いません。
  • 以下のサイトなど、「ico」形式に変換できるサービスで64x64pxのアイコンの保存形式（拡張子）を変換します。
    https://www.icoconverter.com/
  • まめわざにログイン後、「右上の三本線アイコン」→「その他の設定」→「favicon」タブ、と進んで、画像をアップロードします。

8月1日現在、favicon.pngが登録可能になっていますが、近々除去予定です。

2017/8/1