[2016年版] ファビコンに必要な全27ファイルまとめ

      2018/06/04

Webサイトにアイコンを設定する方法を記録しておきます。

2016年現在のファビコン群の置き方についても調べて、必要な全27ファイルを置きました。各種ブラウザ・iOS・Android・Windows・macOSに対応しています。Favicon checkerすべてに通ります。

SPONSORED LINK

オリジナルロゴマーク

とあるフォントの「IT」の文字デザインが気に入ったので、それに合わせて「ジョー」もデザインしました。作成はAdobe Illustratorを使いました。

ファビコンやiOS向けアイコンも作成

ファビコン（お気に入りやタブに表示されるアイコン）は、「ジョ」の部分だけを切り出しました。

正方形に収めないといけないので、拗音の「ョ」を小さくしました。幸い「ジ」は右下にスペースがあるので、そこに格納しました。

SVG化は断念

ロゴマークやトップ画像をSVG（ベクトル画像）に差し替えようかと思ったのですが、IEでうまく表示できなかったり、iOSで一部ぼやけたりしたので今回は見送りました。

デザインを統一

ついでにヘッダー・フッターのデザインを変更し、一部の色も調整しました。 まだまだ改善したい箇所があるので、追い追い直していきたいですね。

SPONSORED LINK

ファビコン関連は全23ファイル

画像は3種・14サイズ・19ファイル、その他に4ファイル用意しました。表中の「大」はフルデザインのロゴマーク、「小」は「n」だけのロゴマークです。

favicon generator をで作ったファイル群をベースに、一部差し替えや取捨を行いました。favicon.ico と browserconfig.xml だけルートディレクトリ、他は /icon に置きました。すべてルートに置いてもいいのですが、ルートを荒らしたくなかったので。

ファイル名 デザイン サイズ 場所
デスクトップブラウザ
favicon.ico 小 16×16 (1bit)
16×16
24×24
32×32
を内部に入れる		 /
iOS
apple-touch-icon-○x○.png 大 120×120
152×152
180×180		 /icon
apple-touch-icon-○x○
-precomposed.png		 大 120×120
152×152
180×180		 /icon
apple-touch-icon.png 大 180×180 /icon
apple-touch-icon
-precomposed.png		 大 180×180 /icon
Android
android-chrome-○x○.png 小 36×36
48×48		 /icon
android-chrome-○x○.png 大 72×72
96×96
144×144
192×192		 /icon
manifest.json － － /icon
Windows
mstile-○x○.png 大
（非グラデーション）		 70×70
144×144
150×150
310×150
310×310		 /icon
browserconfig.xml － － /
macOS
mask-icon.svg 小
（単色）		 － /icon

favicon

まず favicon.ico。内部は1bit色の16×16と、32bit色の16×16、24×24、32×32、48×48、64×64を入れました。どれも「n」のみのアイコンです。内部ファイルの構成はYahoo! JAPANの favicon.ico と同一です。

1bit色アイコンはペイントで単色（白とオレンジのみ）のアイコンを作ってPNGで保存、それをPictBearで開いて1bitインデックスカラーで保存しました。

.icoファイルの作成はいつも「@icon変換」を使っています。

favicon-○x○.pngのような各サイズのPNGを用意して link タグ指定すると、IEが大サイズのアイコンを表示しようとする（フルデザインのアイコンを縮小してごちゃっとする）ので外しました。最新のIE/Chrome/Firefoxで問題が無くなったのでこれ以上の追及はしていません。

iOS

iOSは現在使われている画面サイズを考慮して、120×120、152×152、180×180を作成しました。どれもフルデザインのロゴマークです。 この3つでiPhone 5s～7（Plus含む）とRetinaなiPadが使うサイズをサポートできます。RetinaでないiPadは120×120を縮小表示するので問題ありません。他デバイスでも縮小を許容するなら180×180だけで十分なんですけどね。

いずれも「apple-touch-icon-180x180.png」と「apple-touch-icon-180x180-precomposed.png」を両方を作ってあります。同一ファイルですが。それに加えて180×180のファイルを「apple-touch-icon.png」「apple-touch-icon-precomposed.png」の名前でも用意してあります。iOS用で8ファイルですね。

ホーム画面に登録した際のアイコン名は apple-mobile-web-app-title で指定（後述）できます。表示できる文字数が限られているので簡潔な名前にしましょう。

Android

Androidはサイズが色々ありすぎるので、36, 48, 72, 96, 144, 192四方を全て用意しました。36と48は「n」のみ、72～192はフルデザインのロゴです。（初出時196になっていました。192の間違いです。すみません。）

それに対応するmanifest.jsonも用意してあります。Android用は7ファイルです。

pngを /icon 以下に置く場合は、manifest.json を一部書き換える必要があります。"\/android-chrome-○x○.png" をすべて "\/icon\/android-chrome-○x○.png" に変更します。

Windows

Windowsのスタートメニューにタイルを登録する際に使われるアイコンです。 70×70、144×144、150×150、310×150、310×310の5サイズを用意しました。Windows用だけはWindowsのタイルデザインに合わせてグラデーションの無いアイコンを使っています。

browserconfig.xmlも用意してルートディレクトリに置きました。pngを /icon 以下に置く場合は、browserconfig.xml も書き換えが必要です。"/mstile-○x○.png" をすべて "/icon/mstile-○x○.png" に変更します。

macOS

一番のくせものです。

macOSはEl Capitan以降、Safariのページピンに特別な単色アイコンを使うようになりました。これを用意します。

必要なのは白（#FFFFFF）と黒（#000000）のみで作られたSVG画像です。今回はIllustratorで作っていたので良かったんですが、PNGしかない場合はSVGに変換するソフト/サービスが必要になります。

SVGファイルを置いたら、黒の部分を塗りつぶす色をHTMLで指定します。

HTMLの指定

<head>と</head>の間に記述します。

<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon-180x180.png">
<link rel="mask-icon" href="/icon/mask-icon.svg" color="#EA7926">
<link rel="manifest" href="/icon/manifest.json">
<meta name="msapplication-TileColor" content="#EA7926">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="apple-mobile-web-app-title" content="ITジョー">

確認

Favicon checkerにURLを入力してチェックします。

すべて問題無いようです。

まとめ

ファビコン界隈はかなり複雑になっている様子ですが、一括生成やチェックのサービスがあるお陰で簡単に対応できますね。

itjo レスポンシブ 本文下

 - Web
 - , , , , ,