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

      2016/11/27

logo-plate-1024-s

newcars.jpのオリジナルロゴマークを作成したので記録しておきます。

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

SPONSORED LINK

オリジナルロゴマーク

logo-512

「newcars」という文字を使ってオープンカーを表現してみました。Wの部分は畳んだ幌です。幌車大好きですから。

eを逆にしたらちょうど顔みたいになってくれたり、うまいことデザインできたかなぁと自画自賛です。幌閉めたら頭はみ出しちゃうけど気にしません。 作成はAdobe Illustratorを使いました。あまり慣れないので苦労しましたが、アイコン作りのお陰で基本機能がだいたい使えるようになりました。

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

ファビコン(お気に入りやタブに表示されるアイコン)も昔デザインしたのをそのまま使っていましたが、今回のロゴマークで作り直しました。

mini-icon-n-256

タブに表示される小さなアイコンはロゴ全体だとごちゃっとするので、ピラー部分の「n」だけにしました。

ios-cut

iOSやAndroid向けにはホーム画面に登録した際に使われるアイコンも作っておきました。こっちはロゴマーク全体です。

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○
-preconposed.png
120×120
152×152
180×180
/icon
apple-touch-icon.png 180×180 /icon
apple-touch-icon
-preconposed.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, 196四方を全て用意しました。36と48は「n」のみ、72~196はフルデザインのロゴです。

それに対応する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のタイルデザインに合わせてグラデーションの無いアイコンを使っています。

mstile-orig

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=newcars.jp />

確認

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

favicon

すべて問題無いようです。タブには小さなロゴ(nマーク)、タイルやスマートフォンのホーム画面にはフルデザインのロゴ(車マーク)が表示されています。

まとめ

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

そもそもこのサイトのファビコンを作っていないので……早めに作ります作りました

itjo レスポンシブ 本文下

 - Web , , , , ,