ホーム / ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえる

2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！

2021年06月04日金曜日 10:30

2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！
ファビコン(favicon.ico)編
アイコン編("apple-touch-icon"と"icon"と"icons")編
スプラッシュ画面("apple-startup-image")編

1.1 はじめに

自身の SPA フレームワークでは、テンプレートから index.html を書き出すこととしました。SPA だけあって <body> 下は <noscript> が入っているだけでほぼ空なのですが、<head> 下などに思いの他、大量の要素が必要なことが判りました。しかもこの <head> 下の内容は時代とともに更新を迫られます。

検索エンジンの変化への対応。<meta name="keywords"> の有無等。
PWA 過渡期の iOS の独自拡張、現在も使用されていて新端末のディスプレイサイズが増えるごとに増える。
各ブラウザの独自拡張タグ。詳しくは joshbuchea/HEAD を参照ください。
SNS 用に Open Graph protocol と Twitter Card。
検索のリッチリザルト用の JSON-LD。
Windows 8.1 + モダン IE 11 のライブタイルに関する指定。僕は大好きで Windows 10 でサポートしないのはややショックでした。

本記事シリーズではこの内の、ファビコン、タッチアイコン、Web マニフェストに書くアイコン、スプラッシュ画面といった、<body> の外の画像について纏めます。また調査にあたってのサポートブラウザのポリシーにつては『Web文書のグレースフルデグラデーションをムキになってやってみる』を確認ください。

<head> 下に入れるべき内容について詳しくは joshbuchea/HEAD が頼りになります。また HEAD が参照している「UCBrowser_U3_API.doc」の翻訳を当ブログで公開しています。

僕が採用したタグ

`favicon.ico`

次の <link> に加えて、条件付きコメントと rel="icon" に非対応の IE 10用に javascript が必要です。

<!-- Just Microsoft Internet Explorer -->
<!--[if IE]><link rel="shortcut icon" href="icon/multi.ico"><![endif]-->

<script>
if( document.documentMode === 10 ){
  document.write( '<link rel="shortcut icon" href="icon/multi.ico">' );
};
</script>

PNG アイコン(`rel="icon"`)、タッチアイコン(`rel="apple-touch-icon"`)、ウェブマニフェストの `"icons"`

要素の記述順の背景や、対応ブラウザについては後の記事で。

PNG アイコン

<!-- Other browsers -->
<link rel="icon" type="image/png" href="icon/032x032.png" sizes="32x32">
<link rel="icon" type="image/png" href="icon/192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="icon/048x048.png" sizes="48x48">
<link rel="icon" type="image/png" href="icon/096x096.png" sizes="96x96">
<link rel="icon" type="image/png" href="icon/016x016.png" sizes="16x16">

<!-- for iOS 4.2+ -->
<link rel="apple-touch-icon" href="icon/180x180.png" sizes="180x180">
<link rel="apple-touch-icon" href="icon/167x167.png" sizes="167x167">
<link rel="apple-touch-icon" href="icon/152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="icon/144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="icon/120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="icon/114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="icon/076x076.png" sizes="76x76">
<link rel="apple-touch-icon" href="icon/072x072.png" sizes="72x72">
<link rel="apple-touch-icon" href="icon/060x060.png" sizes="60x60">
<link rel="apple-touch-icon" href="icon/057x057.png" sizes="57x57">
<!-- for iOS 2.0+, AOSP 2.1+ -->
<link rel="apple-touch-icon-precomposed" href="icon/057x057.png">
<!-- for iOS 1.2.2+, AOSP 2.2+ -->
<link rel="apple-touch-icon" href="icon/057x057.png">

ウェブマニフェスト

{
    "name"             : "/*__APP_TITLE__*/",
    "short_name"       : "/*__APP_TITLE_SHORT__*/",
    "start_url"        : "./?a2hs=1",
    "display"          : "fullscreen",
    "theme_color"      : "/*__THEME_COLOR__*/",
    "background_color" : "/*__BACKGROUND_COLOR__*/",
    "description"      : "/*__DESCRIPTION__*/",
    "icons"            : [
        {
            "src"   : "icon/512x512.png",
            "sizes" : "512x512",
            "type"  : "image/png"
        },{
            "src"   : "icon/384x384.png",
            "sizes" : "384x384",
            "type"  : "image/png"
        },{
            "src"   : "icon/256x256.png",
            "sizes" : "256x256",
            "type"  : "image/png"
        },{
            "src"   : "icon/192x192.png",
            "sizes" : "192x192",
            "type"  : "image/png"
        },{
            "src"   : "icon/144x144.png",
            "sizes" : "144x144",
            "type"  : "image/png"
        },{
            "src"   : "icon/096x096.png",
            "sizes" : "96x96",
            "type"  : "image/png"
        },{
            "src"   : "icon/072x072.png",
            "sizes" : "72x72",
            "type"  : "image/png"
        },{
            "src"   : "icon/048x048.png",
            "sizes" : "48x48",
            "type"  : "image/png"
        },{
            "src"   : "icon/036x036.png",
            "sizes" : "36x36",
            "type"  : "image/png"
        }
    ]
}

スプラッシュ画面(`rel="apple-startup-image"`)

iOS 端末でホームに追加された Web サイトの起動時に表示される全画面画像です。詳しくは後の記事で。

<!-- iPhone 1th, 3G, 3GS, iPod touch 1~3th, 320x480 -->
<link rel="apple-touch-startup-image" href="startup-img/320x480.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/480x320.png" media="(device-width: 480px) and (device-height: 320px) and (orientation: landscape)">

<!-- iPhone 4, 4S, iPod touch 4th, 640x960 -->
<link rel="apple-touch-startup-image" href="startup-img/640x960.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/960x640.png" media="(device-width: 480px) and (device-height: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPod touch 5~7th, iPhone 5, 5C, 5s, SE 1th, 640x1136 -->
<link rel="apple-touch-startup-image" href="startup-img/640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/1136x640.png" media="(device-width: 568px) and (device-height: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPhone 6, 6s, 7, 8, SE 2th, 750x1334 -->
<link rel="apple-touch-startup-image" href="startup-img/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/1334x750.png" media="(device-width: 667px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad 1, 2, mini 1, 768x1024 -->
<link rel="apple-touch-startup-image" href="startup-img/768x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/1024x768.png" media="(device-width: 1024px) and (device-height: 768px) and (orientation: landscape)">

<!-- iPhone XR, 11, 828x1792 -->
<link rel="apple-touch-startup-image" href="startup-img/828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/1792x828.png" media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPhone 12 mini, 1080x2340 -->
<link rel="apple-touch-startup-image" href="startup-img/1080x2340.png" media="(device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2340x1080.png" media="(device-width: 780px) and (device-height: 360px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPhone X, XS, 11 Pro, 1125x2436 -->
<link rel="apple-touch-startup-image" href="startup-img/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2436x1125.png" media="(device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPhone 12, 12 Pro, 1170x2532 -->
<link rel="apple-touch-startup-image" href="startup-img/1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2532x1170.png" media="(device-width: 844px) and (device-height: 390px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPhone 6 plus, 6s plus, 7 plus, 8 plus, 1242x2208 -->
<link rel="apple-touch-startup-image" href="startup-img/1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2208x1242.png" media="(device-width: 736px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPhone XS Max, 11 Pro Max, 1242x2688 -->
<link rel="apple-touch-startup-image" href="startup-img/1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2688x1242.png" media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPhone 12 Pro Max, 1284x2778 -->
<link rel="apple-touch-startup-image" href="startup-img/1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2778x1284.png" media="(device-width: 926px) and (device-height: 428px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">

<!-- iPad 3~6, mini 2~5, iPad Pro 1th "9.7", iPad Air 3, 4, 1536x2048 -->
<link rel="apple-touch-startup-image" href="startup-img/1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2048x1536.png" media="(device-width: 1024px) and (device-height: 768px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad 7~8, 1620x2160-->
<link rel="apple-touch-startup-image" href="startup-img/1620x2160.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2160x1620.png" media="(device-width: 1080px) and (device-height: 810px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad Pro 2th "10.5", iPad Air 3, 1668x2224 -->
<link rel="apple-touch-startup-image" href="startup-img/1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2224x1668.png" media="(device-width: 1112px) and (device-height: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad Air 4, 1640x2360 -->
<link rel="apple-touch-startup-image" href="startup-img/1640x2360.png" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2360x1640.png" media="(device-width: 1180px) and (device-height: 820px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad Pro 3~4th "11", 1668x2388 -->
<link rel="apple-touch-startup-image" href="startup-img/1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2388x1668.png" media="(device-width: 1194px) and (device-height: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

<!-- iPad Pro 1~4th "12.9", 2048x2732 -->
<link rel="apple-touch-startup-image" href="startup-img/2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="startup-img/2732x2048.png" media="(device-width: 1366px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

この他のアイコン関連

本記事シリーズでは扱いませんでしたが IE 10~11 用のスタート画面用のアイコン指定と、Mac OSX 用 Safari のタブアイコン指定もお忘れなく。

<meta name="msapplication-TileImage" content="icons/png_144.png">
<link rel="mask-icon" color="orange" href="icon/safari-pinned-tab.svg">

参考記事

本記事執筆にあたって参考にした英文記事の一つです。オリジナルはインターネットアーカイブに収録されてます。

完璧なファビコンを作成する

written by jonathantneal, 2013年1月16日
本日、Five Simple Steps から出版された Jon Hicks の待望の『Icon Handbook』が発売されます。ファビコンの作成に関する独占的な抜粋を提示します

これは、Jon Hicks による『The Icon Handbook』の第3章からの編集された抜粋です。
これまでに他の種類のアイコンを作成したことがない場合でも、これを読んでいるすべての人がいつかファビコンを作成したことは間違いありません。大多数の人にとって、それはおそらく通常の作業です。小さなサイズで pixel-crisp なアートワークと鮮明さを実現する方法を検討できるため、これらは開始するのに理想的な場所です。
「ロゴは旗、署名、護衛、道路標識です。ロゴは（直接）販売されません、それは識別します。」
Paul Rand
ファビコン（ショートカットアイコンとも呼ばれます）は、Internet Explorer 5で最初に登場しました。HTML を必要とせずに favicon.ico アイコンを Web サイトのルートに配置すると、アドレスバーとブックマークリストの URL の横に16ピクセルの正方形の画像が表示されます。当初、これにはファビコンのリクエストをカウントすることでサイトがブックマークされた回数を推定するという追加の利点がありましたが、ブラウザがブックマーク以外のファビコンをサポートし始めたため、これは信頼できなくなりました。
ファビコンと、アプリケーションアイコンの章で取り組むアイコンの種類との違いは、ここでは正しいメタファーについての議論がないことです。彼らの目的は、行動を要約したり、言語の壁を克服したりすることではなく、サイトを道標として表現し、そのブランドをブラウザに拡張することです。そのため、ほとんどの場合、サイトのロゴの小さいバージョンになります。幸い、一般的に、アプリケーションアイコンよりも16ピクセルでロゴを再作成する方が簡単です。
最近でははるかに大きなサイズも使用できますが、アイコンのデザインに慣れていない場合は、16ピクセルバージョンが不可欠であり、開始するのに理想的な場所です。それらを作成することで習得したスキルは、後で検討する他のタイプの基礎として役立ちます。このサイズで透明度を達成できれば、残りは所定の位置に収まります！
この本で説明されている他の種類のアイコンを作成したことがない場合でも、これを読んでいるすべての人がいつかファビコンを作成し、大多数の人にとっては通常の作業であることは間違いありません。
始める前に

アイコンの作成を開始する前に、アイコンの作成方法と展開方法に影響を与えるため、アイコンの使用方法と使用場所を知る必要があります。以下のサブセクションでは、さまざまな考慮事項について説明します。

コンテキストは何ですか？
どのサイズが必要ですか？
どのフォーマットが必要ですか？

コンテキストは何ですか？

ファビコンはさまざまな背景に表示される可能性があるため、すべてに適合する最適なオプションを取得するには、透明度を使用する必要があります。常に白いアドレスバーの背景に表示されるとは限りません。Windows Aero ガラス、灰色の Mac OS X UI、または暗いブラウザテーマに表示される場合があります。 Firefox 4は、アドレスバーのファビコンに灰色のボタンの背景も追加します。少し大きく設定されているため、常にファビコンに隣接します。
どのサイズが必要ですか？

考えられるすべての用途にファビコンを作成する場合、作成する必要のあるサイズは次のとおりです。

16px
すべてのブラウザで一般的に使用するために、アドレスバー、タブ、またはブックマークビューに表示できます。
24px
Internet Explorer 9で固定されたサイト
32px
Internet Explorer の新しいタブページ、Windows 7以降のタスクバーボタン、Safari の[後で読む]サイドバー
57px
標準の iOS ホーム画面（iPod Touch、iPhone 第1世代から 3G）
72px
iPad のホーム画面アイコン
96px
GoogleTV プラットフォームで使用されるファビコン
114px
iPhone 4+のホーム画面アイコン（Retina ディスプレイの標準サイズの2倍）
128px
Chrome ウェブストア
195px
Opera スピードダイヤル

Opera スピードダイヤル

Chrome ウェブストア

本当にこれらすべてを供給する必要がありますか？いつものように、それは文脈に依存します。 Mac および iOS ソフトウェア会社のサイトは、さまざまな iPad および iPhone 固有のアイコンの恩恵を受けますが、Internet Explorer でのみ表示されるイントラネットサイトは、マルチ解像度の ICO ファイルを使用した方がよいでしょう。モバイルとデスクトップで表示するように設計された Web アプリは、これらすべてのサイズの作成に時間を費やすことでメリットが得られます。
50％縮小して16pxにできる32pxアイコンを使用することは可能ですが（たとえば、2pxストロークを使用して1pxにきれいに縮小することにより）、これはブラウザに依存して拡大縮小し、代わりにトリミングする場合があります。また、ファイルが大きくなるため、ファビコンファイルはできるだけ小さくしたいと考えています。
ただし、本当に良い妥協案は、16pxのアイコンと128pxなどの1つの大きなサイズのアイコンを提供することです。これは、Chrome ウェブストアや Opera のスピードダイヤルなどの大規模な用途に最適です。57pxにサイズ変更された128pxの画像は、特注の最適化された57pxの画像ほど見栄えがよくありませんが（均等に縮小されないため –44.5％）、ニーズには十分かもしれません。実際、これはまさに Apple が行っていることです。ファビコン以外のアイコンをもう1つだけ提供します。これは、129pxのサイズの apple-touch-icon.png アイコンです。Apple にとって何が十分か...
何をするにしても、ブラウザのデフォルトアイコンを回避するには、少なくとも16pxのアイコンが不可欠です。 Safari は魅力的な青い地球を表示しますが、ほとんどの場合、空白のドキュメントアイコンが表示されます。
基本的な16pxのファビコンを含めないと、ページ自体を超えてサイトのブランドを拡張する機会が失われます。サーバーが最初のリクエストごとに404エラーを生成するため、favicon.ico ファイルが欠落していると、トラフィックの多いサイトでも問題が発生します。 Firefox は、ファビコンが欠落しているサイトを記憶し、それらを再要求しませんが、これを行う唯一のブラウザです。
どのようなフォーマットが必要ですか？

Windows ICO 形式がサポートされている唯一のファイルタイプであった初期の頃は、ファビコンを16×16 GIF として保存し、名前を変更して .ico ファイル拡張子を付けるという、少し時間を節約するトリックがありました。それはハックでしたが、うまくいきました！ICO ファイルを作成するためのツールがオンラインでより簡単かつ自由に利用できるようになったため、現在、この方法を使用する必要はなく、使用すべきではありません。さらに、ファビコンの使用では他の形式がサポートされるようになりましたが、検討する価値のある形式は基本的に2つだけです。

ICO ファイルは今でも最も広くサポートされています。 PNG とは異なり、複数の解像度とビット深度を含めることができます。これは Windows で非常に便利です。Internet Explorer は、Windows 7タスクバーの32ピクセルアイコンなど、さまざまなサイズのファビコンを使用します。これらを提供する唯一の方法は ICO です。また、<link> 要素を使用せずに検出される唯一の形式です。
PNG の方が便利ですが、作成に特別なツールを必要としないため、アルファ透明度をサポートし、ファイルサイズを可能な限り小さくします。その唯一の欠点は、Internet Explorer がそれをサポートしていないことです（ICO のみを受け入れます）。

他のオプションについて：

GIF とアニメーション GIF には、非常に古いブラウザのサポート以外の利点はありません。
画像が写真であっても、JPG が選択される可能性はほとんどありません。それは PNG の鮮明さを欠いており、そのような小さなサイズでのより良いブレンドからの利益は見られません。
より多くのブラウザがファビコンの使用のために SVG をサポートしていれば、SVG は優れていますが、現在は Opera のみがサポートしています。
Firefox と Opera でサポートされている PNG の生意気な小さなサブフォーマットである APNG（アニメーション PNG）もありますが、その有用性には疑問があります。アニメーション化されたファビコンは、イライラして困窮しているように見えます！

16ピクセルで描画

これで、ファビコンを作成するための背景情報と準備について見てきました。手を汚して、いくつかのアイコンを描き始めましょう。
ツール

ツールは非常に個人的な選択であるため、このハンドブックでは、使用するグラフィックエディタを想定していません。私にとってうまくいくことは、必ずしもあなたにとってうまくいくとは限りません！ただし、どのアプリを使用する場合でも、高解像度をスムーズにするだけでなく、ピクセルプレビューを使用してベクターアートワークを作成できる必要があります。また、ピクセルグリッドを表示して、アイコンの描画と計画を簡単に行えるようにすると便利です。特に16pxのアイコンの場合、途中でアイコンがぼやけて見えるため、直線のエッジがグリッド内に保持されていることを確認する必要があります。

ケーススタディ：Five Details のファビコン

Five Details は、Mac, iPhone, iPad用のソフトウェアを設計および開発しています。Flow と Seamless のユーザーが10万人を超え、Apple Design Award を受賞したこの会社のために、Hicksdesign は Five Details のロゴ、ブランド、ウェブサイトを作成しました。
ワークフローの例では、元のベクターファイルを取得し、そこから16pxのファビコンと、ウェブサイトの他のサイズを作成します。Five Details は Mac ソフトウェアに焦点を当てているため、このコンテキストは Mac デスクトップブラウザと iOS モバイルデバイスに重点を置くことを意味します。したがって、時間をかけて、最適化された Apple Touch アイコンの全範囲も作成されていることを確認してください。iPhone と iPod Touch の場合は57ピクセル、iPad の場合は72ピクセル、iPhone4 の Retina ディスプレイの場合は114ピクセルです。

Illustrator では、アイコンサイズごとにアートボードを設定しました。それぞれに個別のファイルを用意するよりも、各サイズを並べて表示できる方が好きです。アートボードには、goodies パックに含まれているスクリプトを使用してエクスポートするときに使用されるため、目的のファイル名(「favicon」や「apple-touch-icon-114x114-precomposed」など)で名前が付けられます。
まず、アートワークのサイズを16ピクセルに変更し、何が得られるかを確認します。オリジナルが16のきちんとした倍数である場合は、良いスタートを切ることができますが、おそらくピクセルアート（各ピクセルを個別に描画する）としても、微調整するか、最初から再描画する必要があります。明確にするために。ただし、それは思ったほど難しくも時間もかかりません。
画像に背景を含める必要がある場合（[Five Details]アイコンのように）、必要なパディングにより、実際のロゴのサイズがさらに小さくなります。アイコンには背景は必要ありませんが、さまざまな環境でアイコンのコントラストを制御するのに役立つ場合があります。シンプルな灰色のファビコンは、白いアドレスバー（右下）では見栄えがよく微妙に見えますが、Firefox などの Mac ブラウザの灰色のタブに表示すると簡単に失われます（右上）。
これに対する2つの解決策は、（灰色ではなく）透明な黒を使用して、背景に比例して暗くするか、すべての状況に合うようにファビコンに色付きの背景を追加することです。この場合、明るい灰色のボックスの背景の上に、両側に3ピクセルのパディングがあり、実際のロゴサイズがわずか10ピクセルに縮小されるため、強度が増すと感じました。

残念ながら、エッジは完全なピクセルにきちんと収まらず、ロゴの2つの部分の間のギャップはほぼ閉じられています。場合によっては、パスのアンカーポイントを微調整して、パスがピクセルグリッド上に適切に配置されるようにすることができます。選択したグラフィックエディタがピクセルスナップ（編集中のパスをピクセルグリッドにスナップする）をサポートしている場合は、さまざまなタスクでこれをオンとオフに切り替える必要があることがわかります。直線エッジをスナップする場合は非常に便利ですが、カーブ（ロゴの右側など）をオフにすると、編集が簡単になります。曲線だけでなく、シャドウなどの要素のエッジを意図的に柔らかくするために、パスをピクセルの中間に配置したい場合があります。
ただし、この場合、単純な形状を最初からベクトルで再作成する方が簡単です。これにより、少なくとも、再現に役立つ適切な比率が得られます。縮小したアートワークを別々のレイヤーに配置してロックすると、ガイドとして使用し、その上で作業することができます。

それを機能させるには、ロゴの比率にある程度の自由を持たなければならないかもしれませんが、16pxは非常に寛容であり、鮮明なアートワークは精度よりも見栄えがします。それでも形状が機能しない場合は、鉛筆などのビットマップツールを使用するか、できればベクトル長方形を使用して、単一ピクセルで再描画し、単一ピクセルの不透明度を変更して独自のアンチエイリアシングを作成できます（この場合）。必要な場所に1pxの正方形のベクトル長方形）
滑らかなエッジ：

これにより、曲線の滑らかさを非常に細かく制御できますが、明らかにかなり面倒です。効果が実際のサイズでどのように見えるかを確認するには、頻繁にズームアウトする必要があります。これで、くっきりとしたシルエットができました。次に、内側のシャドウや下端の白いハイライトなど、他の微妙な要素を追加して、エッジを視覚的にシャープにすることができます。

内側のハイライトを追加することで境界線が強調されています。50％の白いストロークはコントラストを提供するのに十分であり、エッジをより鮮明に感じさせます。 Illustrator や Opacity などの一部のアプリケーションでは、同じベクターオブジェクトに複数のストロークを追加できます。そうでない場合は、それに合わせて角の丸い半径を小さくする必要があります。たとえば、外側の境界線の半径が4pxの場合、正しく表示するには、内側のハイライトの半径を3pxにする必要があります。
ICO ファイルと PNG ファイルの両方が透明性をサポートしているため、透明性は検討する価値があります。このファビコンが常に白い背景で表示されると仮定すると、Five Details ファビコンに明るい灰色の境界線を指定することを意味します。

ボーダーの明るさは、それが主要な要素であるロゴからあまりにも気を散らさないようにします。ただし、これを常に白い背景で表示するとは限りません。他の背景で表示すると、境界線がひどく震えます。
20％の灰色の代わりに、20％の不透明度で黒を使用すると、境界線が背景に溶け込み、より快適に座ることができます。
その他のファビコンの落とし穴

これでファビコンアートワークは完成しましたが、避けるべき他の落とし穴があります。アイコンの視覚的な重みを減らし、アンチエイリアス処理されたピクセルを増やす必要があり、エッジがくっきりと見えなくなるため、遠近法を再現しようとしないことをお勧めします。Reeder アプリの Web サイトが、ファビコンにサイドオンパースペクティブを使用するようにアイソメボックスのロゴを変更する方法に注目してください。明確でありながら、Reeder アプリとして認識されています。

ロゴの比率が正方形ではなく16pxで再現するには複雑すぎる場合もあります。これを回避するには、全体を表示するのではなく、ロゴの強力な要素を選択します。Mailchimp は、チンパンジー全体やロゴタイプではなく、チンパンジーの頭のフレディに焦点を当ててこれを行います。

ただし、常に例外があり、最善の努力にもかかわらず、ロゴと制限されたサイズは最初からあなたに反対です。BBC は、ファビコンに簡単に拡大縮小できないロゴの良い例ですが、ブランドを失うことなく、選択した要素に縮小することもできません。上部と下部の空白は、他のファビコンと比較して視覚的な重みを減らし、それによってその重要性を薄めます。

ただし、この特定のファビコンは、複数の ICO ファイルに関する別の潜在的な問題を浮き彫りにします。 favicon.ico ファイルには16pxと32pxの両方の最適化されたアイコンが含まれていますが、Safari や Chrome などの Webkit ブラウザーは32pxアイコンのみを表示し、16pxに縮小して、認識できないマッシュを作成します。

ただし、Safari は32pxバージョンを16pxアイコンとして表示しようとします。

Firefox は正しいサイズのファビコンが表示される

これを回避する唯一の方法は、16pxの PNG ファビコンも追加し、HTML に <link> 要素を追加することです。
エクスポート

PNG を作成するだけの場合、この段階は簡単ですが、ICO の作成にはさらにいくつかの手順が必要です。 PNG を取得して ICO を作成する無料のオンラインツールが多数あります（付録を参照）。または、Photoshop から直接エクスポートすることもできます。

Iconbuilder Windows テンプレートには、アプリケーションアイコンに必要なすべてのサイズが付属していますが、これらを削除して、16pxと（オプションで）32pxを使用することができます。

ただし、Windows 7がタスクバーに使用する32pxなど、複数の解像度で ICO を作成する場合は、Photoshop や Fireworks で使用する Iconfactory のプラグインである Iconbuilder などのより専門的なソフトウェアが必要になります。Iconbuilder には、画像の Windows のように、アートワークを配置する準備ができたテンプレートが付属しています。
アイコンレイヤーの正しいボックスにすべてのアートワークが表示されたら、(フィルターを介して)Iconbuilder に移動し、Windows プリセットを選択できます。 [ビルド]を押して、プレビューウィンドウで各サイズが正しく表示されることを確認します。

不要なサイズや色深度は、サイドバーで削除できます。すべてが良さそうな場合は、ICO として保存できます。Iconbuilder は、解像度ごとの PNG のセットなど、他の形式で同時にエクスポートすることもできます。これは非常に便利です。

実装

ICO 以外の形式の場合、各ページの <head> にある <link> 要素を使用して、適切な rel 属性と <type> 属性を使用してそれを指す必要があります。
<link rel="icon" type="image/png" href="/pathto/favicon.png" />
これにより、Tumblr や Blogger など、ホストしていないサイトのファビコンを変更することもできます。ファビコンに favicon.ico という名前を付けたり、サイトやアプリケーションのルートに保持したりする必要はありませんが、必ず <link> 要素を使用してください。そうしないと、ブラウザが複数のリクエストを送信して検索を試みます。
他のタイプのファビコンを作成する

ファビコンは最後の最後まで残される傾向があるため、リストに大きなサイズを作成する時間はないと感じるかもしれません。ただし、ファビコンを大きくすることでメリットを得るプラットフォームが増えているため、少なくとももう1つ追加することを検討する価値があります。このセクションでは、16ピクセルのファビコンを超える方法について説明し、Five Details の例のケーススタディ用に拡張されたアイコンセットを完成させます。
Apple タッチアイコン

最初の iPhone 以来、iOS(iPhone / iPod / iPad オペレーティングシステムが知られるようになった）は、サイトがホーム画面に追加されるときに使用されるより大きなファビコンである Apple タッチアイコンをサポートしてきました。

Apple タッチアイコン、デフォルト（左）および合成済み（右）で光沢オーバーレイを防止

サイトに1つを指定しない場合、iOS は代わりにページの縮小スクリーンショットを使用するだけであり、これはほとんど望ましくありません。
favicon.ico ファイルの場合と同様に、apple-touch-icon.png という名前のファイルをサイトのルートに追加できます。iOSは、<link> 要素を介した参照を必要とせずにファイルを検出します。また、apple-touch-icon-precomposed.png という名前のアイコンをルートに追加することもできます。そうすれば、iOS は光沢オーバーレイを追加せずにそれを使用し、より多くの制御を可能にします。

iOSは、最初にデバイスに適したサイズのアイコンも探します。 iPad のモバイル Safari は、次のような名前のアイコンを探します。
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-72x72.png
時間があれば、これらのアイコンを提供する必要があります。
したがって、追加の HTML を使用せずに、さまざまな iOS デバイスにさまざまなサイズのアイコンを指定できます。 Android OS（2.1以降）はこれをサポートしていませんが、<link> 要素を使用してそれらを指すと、合成済みの Apple タッチアイコンを利用できます。
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Android 2.2以降は、合成済みだけでなく、すべての Apple タッチアイコンをサポートしています。
ここでの rel 属性の値は Apple 独自のものですが、他のすべての人はアイコンのみを使用します。sizes 属性と並行して、iPad および iPhone4 の Retina ディスプレイに他のサイズを指定することもできます。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png”>

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon- 72x72-precomposed.png”>
アイコンは最初に最も大きく表示されるため、バージョン4.2より前の iOS(sizes 属性をサポートしていません)は正しいアイコンを取得します。Android 以外にも、Apple タッチアイコンは iPad の Reeder などのアプリでも使用されています。
Opera スピードダイヤル

Apple タッチアイコンの使用をサポートするアプリの別の例は、Opera ブラウザのスピードダイヤル機能です。Opera は、ユーザーが新しいタブを開いたときに、ユーザーのお気に入りの Web サイトのサムネイルを表示する最初のブラウザーでした(デフォルトでは9つですが、設定を変更してさらに表示することができます)。
バージョン11では、これがさらに拡張され、Web サイトの所有者は、<link> タグとファイル名を使用して、最小114×114pxから最大256×160pxまでの任意のサイズのアイコンを指定できるようになりました(横向きの形状を使用)。

<link rel="icon" type="image/png" href="195x195image.png">
繰り返しになりますが、これはサイトのサムネイルよりも望ましい場合があり、見事に見えます。最後に、テストするときは、スピードダイヤルを右クリックし、[再読み込み]を選択して、Opera に最新バージョンを取得できることを知っておく価値があります。常に白い枠線で表示され、ウィンドウサイズとスピードダイヤルの数によっては、アイコン自体が常にフルサイズで表示されるとは限りません。
大きなアイコンを描く

Illustrator のアートボードに戻り、最大のものから始めて、114pxのアイコンを作成します。これは、iPhone 4の Retina ディスプレイの半分のサイズで表示されます。これは、元の iPhone 画面の2倍の解像度ですが、物理的な寸法は同じです。したがって、ストロークを画面上で1ピクセルとして表示する場合は、2ピクセルとして描画する必要があります。ただし、1pxは引き続き表示されるため、状況によっては線の太さを薄くすることをお勧めします。または、Photoshop で作業している場合は、Photoshop を1pxに保ち、ストロークカラーの50％の内側の輝きを追加して、妥協点を見つけることができます。
確認する唯一の方法は、デバイスでテストすることです。これを簡単にテストするには、iOS アプリのレビューをお勧めしますが、画像のキャンバスサイズを640×960pxに増やし、組み込みの写真アプリを介して iPhone にインポートすることでもテストできます。
アートワークの透明な領域は黒く表示されることにも注意してください（したがって、カスタム iOS の背景は透けて見えません）。これらは iOS によって追加されるため、アートワークに丸みを帯びた角を含めないでください。ただし、コーナーの半径とそれらがコーナーにどのように影響するかを知っておくと役立つ場合があります。さまざまなサイズについては、付録のアイコン参照チャートを参照してください。ダウンロード可能なパックの iOS アイコンテンプレートを参照して、角が丸く、光沢のあるオーバーレイでアイコンをプレビューしてください。
このアートワークは、50％にサイズ変更して、57pxのアートワークのベースとして使用できます。計算が正しければ、これを最適化する必要はなく、ピクセルグリッドに正確に当てはまるはずです。伝統的に、アイコンのサイズは互いにきちんと2倍になっています：16px→32px(×2)→64px(×2)など。これは、72pxの iPad アイコンには当てはまりません。繰り返しになりますが、最良の結果を得るには、最大サイズを使用し、これをサイズ変更して最適化します。その逆ではありません。
プロセスのこの部分は、さまざまな OS のアプリケーションアイコンを作成する部分と似ています。これについては、第7章で詳しく説明します。
最後に、各アートボードを PNG としてエクスポートするには、goodies パックで提供されているスクリプトを使用します。これで、サイトのルートに4つの正しい名前とサイズの PNG ファイルができました。
概要

最低限、デフォルトのアイコンを使用するためにブラウザに任せるのではなく、常に16pxの favicon.ico ファイルを Web サイトに含める必要があります。見た目が良いだけでなく、ブランディングも強化され、ICO 形式に固執することで、Internet Explorer がアイコンを利用できるようになります。
16pxファビコンが含まれていないということは、ブラウザのデフォルトが代わりにサイトに関連付けられていることを意味し、HTTP リクエストが増加します。これは、トラフィックの多いサイトで増幅される問題です。
この章で提案されているすべてのアイコンサイズを作成する必要はないかもしれませんが、128pxなどの大きなバージョンのファビコンも作成する価値があります。ファビコンのサイズを変更して、iPhone 4などのさまざまなデバイスにアイコンを提供することもできます。 Chrome ウェブストアや Opera のスピードダイヤルなどの適切な用途として。