nlog(n): Favicon 追加でスマホ対応

Sat September 10, 2016

Favicon 追加でスマホ対応

ブログサイトの favicon を追加することにした。iOS, Android, Windows 8/10 に対応させる。

■ ■ ■

はじめに

かつてウェブサイトのファビコンと言えば favicon.ico だけであった。その後時代とともに OS やアプリが増えたため一つのファビコンでは足りなくなってきた。大抵の場合は昔のファビコンが代用されるが，それぞれに対応した解像度の画像ファイルを用意したほうが綺麗に見える。

さて，見直しをしようと思ってはいたのだが腰が重かったのには理由がある。それは21個のファビコンを用意しなければならないと聞いていたからである (Webサイトに必要なfaviconが21個になっていた - IT探検記)。そして，今回再度チェックしてみると何と26個に増えているではないか (FAQ)。自動生成してくれるとは言え，気が重い。そして腰も重かったのである。

しかし，実際に作ってみると26個も用意する必要はなく，7個に減っていた。これなら現実的な範囲だと言える (それでも多いけど)。

動作環境

動作環境としては，ウェブサイトは Vine Linux 6.3, Apache 2.2.31，画像ファイル作成は Mac OS X 10.11.6 El Capitan, GIMP 2.8.16 である。ファビコンと関連ファイルの自動生成，および動作チェックにはオンラインサービスを利用した (Favicon Generator for all platforms: iOS, Android, PC/Mac...)。

方針

ファビコン作成の方針としては，まず favicon.ico の解像度 48x48 の画像から GIMP の拡大機能で 260x260 の PNG ファイルを作成する。これを Favicon Generator に送ってファビコン関連ファイル一式を生成してもらい，ダウンロードする。必要に応じて GIMP で作った画像ファイルで自動生成された画像ファイルを上書きする。最後の「必要に応じて」というのは，260x260 から縮小生成された画像はエッジがぼやけるので，気になる場合はやればいいということである。

生成されたファイル

Favicon Generator で生成されたファイルは以下のものだった。

favicon.ico: 16x16, 32x32, 48x48 のマルチアイコン
favicon-16x16.png: タブ表示用
favicon-32x32.png: Mac OS Safari 用
android-chrome-192x192.png: Android Chrome M39+ 解像度 4.0 用
mstile-150x150.png: Windows 8, 10 / IE11 用
apple-touch-icon.png: iOS 用 180x180 画像ファイル
safari-pinned-tab.svg: Mac OS Safari ピン留め用
browserconfig.xml: IE 11 用 XML ファイルで mstile-150x150.png を参照する
manifest.json: Android Chrome 用 JSON ファイルで android-chrome-192x192.png を参照する

manifest.json は W3C によって定義されたファイルだが，現時点で対応しているのは Android Chrome のみとのこと (FAQ)。

GIMP を使う場合

GIMP を使って拡大縮小する場合，元画像が直線で構成されているのであれば，補完なしに拡大縮小を行うと綺麗な仕上がりになる。「画像」メニュー→「画像の拡大・縮小」で「補完方法」を「補完しない」にすればよい。

favicon.ico は3つの解像度を持つ画像ファイルなので注意が必要。GIMP ではレイヤーを3つ作り，レイヤーのサイズをそれぞれ 16x16, 32x32, 48x48 に設定する。拡張子 .ico でエクスポートすれば形式も自動的に ICO になる。

GIMP では，ファイルを「保存」する場合は XCF 形式になり，その他の画像形式で保存したい場合は「エクスポート」することになる。

サイトへの反映

画像ファイルをサイトにアップロードした後，ブログのソースにファビコンの場所を記述する。Favicon Generator は HTML5, XHTML, Jade, Grunt, Gulp, Node CLI, Ruby on Rails, Google Web Starter Kit, RFG API 用のコードを生成してくれる。このサイトは XHTML なので，これを選択。ファビコン画像ディレクトリを /images/icons にしたので，追加するソースは次のようになった。

favicon.ico は従来通りのトップディレクトリ /favicon.ico とファビコン用ディレクトリ /images/icons/favicon.ico に同一のものを置いた。

動作チェック

動作確認は Favicon checker でブログトップの URL を指定することで可能である。

Posted by n at 2016-09-10 18:33 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments