ブラウザでページを開くと、その多くはタブの左側にアイコンがついています。
これは「ファビコン」と呼ばれ、サイトのシンボルやイメージを表すために設置されています。
例えば、任天堂ではマリオのドット絵など、誰もがひと目で分かるようなものになっています。
この他にも、登録したブックマークなどに使われるので、小さいけれど意外に大切な要素です。
今回の手順を参考に、Webサイトの顔であるファビコンの作成、設置をしていきましょう。
目次
元データを用意
作成にはIllustratorを使いますが、パソコンに入っているペイントソフトでもOK。
アートボードを「512×512」のサイズで用意してください。
後ほど背景色をFavicon Generatorで指定するので、設定不要です。
次に文字ツールでテキストを入力したり、アイコンを入れて上下左右中央に配置。
アイコンを使いたいときは、Font Awesomeなどを利用すると時短になりますよ。
最後に「スクリーン用に書き出し」でアートボードをPNG形式で保存します。
アートボードの代わりに長方形ツールで土台を作ると、サイズがズレることがあります。
その場合は、以下手順で調整してください。
ファビコンを生成
Favicon Generatorの「Select your Favicon image」をクリックして、画像をアップ。
ブラウザ表示
検索結果などのブラウザ表示を確認し、ファビコンの背景色、角丸、サイズを調整します。
For iOS – Web Clip
iPhone、iPadの設定では、Webサイトをホーム画面に追加したときの表示を設定します。
左側にあるスマホ画面中央を確認しながら、背景色を変更します。余白はそのままでOK。
現在の「Settings」タブの横にある「Assets」「Dedicated picture」については、飛ばしても問題ありません。
元データとは別にiOSに適した画像を用意したときに項目からデータをアップ。
For Android Chrome
こちらは、Androidのホーム画面にWebサイトを追加したときの表示設定。iOSと同じように、背景色、余白を調整します。
赤枠の下にあるのは、影の効果、アプリ名、テーマカラーの任意項目です。
陰影はGoogleアプリのように適用されますが、背景がないときは色が設定できないので注意。
開始URL（ブックマークされたページのURLも上書き）と画面の向きを強制する設定。
Android Chrome 39以降、38以前で使用するアイコンの作成方法を調整する設定。
元データとは別にAndroidに適した画像を用意したときに項目からデータをアップ。
Windows Metro
デスクトップにWebサイトを追加したときのタイル表示を、背景色、シルエットで整えます。
シルエットはデフォルトの黒か、選択肢にある白のいずれか。
Windowsのバージョンごとにサイズ、形を調整する必要があれば、項目をチェック。
元データとは別にMetro UIに適した画像を用意したときに項目からデータをアップ。
MacOS Safari
Safariの固定タブやMacのTouch Barにかかわる設定をしていきます。
大まかには元データのシルエットを使うかどうか。2つ目まではアイコンを使用し、背景色を選びます。
最後の選択肢のみ、アイコンに代わってドメインの最初の文字を使い、背景色なしになります。
元データとは別にSafariに適した画像を用意したときに項目からデータをアップ。
オプション設定
基本的に変更する必要はありません。ルートにファビコンを設置しないなど、仕様によって調整します。
| Path | ファビコンデータまでのパス |
| Version/Refresh | ファビコンデータのバージョン |
| Compression | ファビコンデータの圧縮率 |
| Scaling algorithm | ファビコンデータのリサイズ方法 |
| App name | ページタイトルを変更（iOSとWindows8のみ上書き可） |
| Additional files | README.md（手順書）とhtml_code.html（生成コード） |
設定が終わったら「Generate your Favicons and HTML code」でファビコンとHTMLコードを生成します。
ファビコンを設置
生成後の画面で「Favicon package」をクリックし、データを一括ダウンロード。
以下のようにサイトのルートに各ファイルを設置してください。
├─android-chrome-192x192.png ├─apple-touch-icon.png ├─browserconfig.xml ├─favicon.ico ├─favicon-16x16 ├─favicon-32x32.png ├─mstile-150x150.png ├─safari-pinned-tab.svg └─site.webmanifest
つづいて「Install your favicon」で表示されているコードをheadに貼り付けます。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <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="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffe500"> <meta name="msapplication-TileColor" content="#ffe500"> <meta name="theme-color" content="#ffe500">
パスは全てルートパスになっているため、相対パスに書き換えたものがこちらです。
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"> <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="./site.webmanifest"> <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#ffe500"> <meta name="msapplication-TileColor" content="#ffe500"> <meta name="theme-color" content="#ffe500">
おわりに
ファビコンの作成からサイトへの設置手順は以上になります。
元データ自体はペイントソフトでも簡単に作成できるので、あとはツールに読み込ませるだけ。
各ブラウザ、デバイスの項目があることで設定が多く感じますが、必須ではありません。
よく分からないときは背景色だけ指定して生成してみてください。
今回はHTMLサイトに合わせていますが、WordPressなどに一部のデータを使うという方法でもOK。
サイトの構成に応じてオプションを調整したり、データを使い分けたりと試してみてください。
iOS7以降、iOS6以前に対応した、全てのアイコンを作るときに項目をチェック。