2018/06/04Webサイトにアイコンを設定する方法を記録しておきます。2016年現在のファビコン群の置き方についても調べて、必要な全27ファイルを置きました。各種ブラウザ・iOS・Android・Windows・macOSに対応しています。checkerすべてに通ります。まとめオリジナルロゴマークとあるフォントの「IT」の文字デザインが気に入ったので、それに合わせて「ジョー」もデザインしました。Illustratorを使いました。ファビコンやiOS向けアイコンも作成ファビコン(お気に入りやタブに表示されるアイコン)は、「ジョ」の部分だけを切り出しました。正方形に収めないといけないので、拗音の「ョ」を小さくしました。「ジ」は右下にスペースがあるので、そこに格納しました。SVG化は断念ロゴマークやトップ画像をSVG(ベクトル画像)に差し替えようかと思ったのですが、IEでうまく表示できなかったり、iOSで一部ぼやけたりしたので今回は見送りました。デザインを統一ついでにヘッダー・フッターのデザインを変更し、一部の色も調整しました。改善したい箇所があるので、追い追い直していきたいですね。LINKファビコン関連は全23ファイル画像は3種・14サイズ・19ファイル、その他に4ファイル用意しました。表中の「大」はフルデザインのロゴマーク、「小」は「n」だけのロゴマークです。作ったファイル群をベースに、一部差し替えや取捨を行いました。すべてルートに置いてもいいのですが、ルートを荒らしたくなかったので。favicon.ico。内部は1bit色の16×16と、32bit色の16×16、24×24、32×32、48×48、64×64を入れました。どれも「n」のみのアイコンです。1bit色アイコンはペイントで単色(白とオレンジのみ)のアイコンを作ってPNGで保存、それをPictBearで開いて1bitインデックスカラーで保存しました。.icoファイルの作成はいつも「@icon変換」を使っています。タグ指定すると、IEが大サイズのアイコンを表示しようとする(フルデザインのアイコンを縮小してごちゃっとする)ので外しました。最新のIE/Chrome/Firefoxで問題が無くなったのでこれ以上の追及はしていません。iOSiOSは現在使われている画面サイズを考慮して、120×120、152×152、180×180を作成しました。どれもフルデザインのロゴマークです。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ファイルですね。指定(後述)できます。表示できる文字数が限られているので簡潔な名前にしましょう。192四方を全て用意しました。36と48は「n」のみ、72~192はフルデザインのロゴです。(初出時196になっていました。