iPad・iPhone・iPod touch 用の WebClipアイコンを設定。ファビコンについても

2010年6月3日

デザクロブログのWebClipアイコンキャプチャー

ウェブブラウザー用のファビコンの設定を修繕し、
iPad・iPhone・iPod touch 用の WebClipアイコン(ウェブクリップアイコン)を設定してみました。

ファビコンの作成・設定については、ホームページ作成の際、
可能な限り行っていますが、
ファビコンの見え具合やファビコン内のレイヤー設定などで
どうも納得できないでいました。

現状、ファビコンは
ひとつのファイル「favicon.ico」の中に、
16×16px、32×32px、48×48pxの3つのサイズを埋め込んだものが望ましいと考えられています。

  16×16px … 通常のブラウザー用
  32×32px … 一部のブラウザー用
  48×48px … ショートカットアイコン用

これら3つを含む3層のファビコンを生成してくれるウェブサイトや
無料アプリケーションもありますが、
取り込める元ファイルの重さに制限があったり、
pngファイルが読めなかったりで、
なかなか良い方法が見つからないでいました。
(ファビコン制作に余り時間は掛けたくはないところです。)

プロのウェブデザイナーならファビコンの元となるデータは
基本、Fireworks のベクトルデータ(png形式)ではないでしょうか。

pngデータなら透過ファイルを作成するのは簡単です。
実はこれが厄介な事態を引き起こすことになっていました。

png透過データからfavicon.icoファイルを作成すると、
透過部分の背景が真っ黒になってしまいます。

規格上、背景は透過のままであるべきなのですが、
ブラウザー上で黒になるのだから、仕方ありません。
(ウェブ制作上、何もファビコンに限ったことではありません。)

納得できないまま、
試しに透過pngファイルを透過gifファイルにしてみました。

透過gifファイルを元にfavicon.icoファイルを作ると
あっけなく上手く行きました。

キレイなものを作るためには、元データはより質の良いpngファイルで、
という気持ちが却って上手くいかない結果を招いていたんですね。


また、元ファイルのアイコンの形状によっては、
16×16pxのキレイなアイコンを作るのは困難な場合もあります。
実は、弊社のロゴがそれに当てはまります。

16×16pxファビコンではカーブをキレイに表現できないんですね。
なんども試してみて、結局今回は16×16pxファビコンの層を無くして
32×32pxと48×48pxの2層のファビコンにすることにしました。
(結果的にこれが一番キレイに見えたからです。)

もっとも、現時点で透過ファビコンが一番問題になるのは Firefox です。
特にMac版は透過部分のブラウザー背景となる灰色が濃いので、
キレイに透過しないと見栄えが良くありません。

他のブラウザーは背景が白色なので、問題はありません。
実のところ透過にしないで、ファビコンの背景を白色にしてもOKです。


なお今回、様々なファビコン作成ウェブ・サービスを試してみましたが、
次のサイトがベストだと思います。
(機会があれば操作手順も解説できればとも思いますが。。。)

  ▶ FavIcon from Pics(英語)


このウェブサイトでは、同時に
iPad・iPhone・iPod touch 用の WebClipアイコンも作成できますが、
ウェブクリップアイコンのフォーマットは png なので、
Fireworks などのベクトルデータのままでOKです。
ファイル名は「apple-touch-icon.png」にします。

pngのファイルの大きさを57×57pxにすればいいだけのことです。
(後は勝手に iPad・iPhone・iPod touch がキレイにアレンジして表示してくれます。)

注意点は、pngファイルを透過にすると、
iPad・iPhone・iPod touch の透過の背景のデフォルトが黒色だということです。
ウェブクリップアイコンの背景は透過にしないほうがいいでしょう。

後は(X)HTML内のhead内に以下の2行を追加すればOKです。
(例のURLは弊社の場合。ブログ表示用に括弧には全角文字を使用。)

<link rel="shortcut icon" type="image/x-icon" href="http://www.designcross.org/favicon.ico" />
<link rel="apple-touch-icon" type="image/png" href="http://www.designcross.org/apple-touch-icon.png" />

特別な意図がなければ、トップページのあるサーバーの階層に
ファビコンとウェブクリップアイコンをアップロードします。

デザクロブログのWebClipアイコン


ちなみに iPhone・iPod touch の画面のキャプチャーは
「ホームボタン」を押したままの状態で「電源ボタン」を押して
おこないます。

Mac の場合、
iPhoto 経由でパソコンにキャプチャー画像を取り込めます。


*********************


後日(6月5日)、実際に iPad が届いたので、
自社のウェブクリップアイコンを確認すると、
アイコン画像が明らかに甘い(=ぼやけている)。
(まあ、なんとなくは予想していました . . . )

改めてWebClipアイコンについて調べてみると、
以下のことが判明しましたので追記しておきます。

  57×57px(公式サイズ)
  60×60px(標準クオリティ)
  129×129px(最高クオリティ)

これからのこと(iPad対応)を考えると、129×129px が無難だと思われます。(実際にはどんなサイズでも表示されます。)

デザクロブログのWebClipアイコンキャプチャーiPad

早速デザクロのアイコンも129×129px に変更しました。
ベースがベクトルデータで作ってあれば、
比較的簡単に変更できます。

57pxか60pxのどちらが最適かという問題については、
アイコンにする元画像の性質によって異なります。
  「階調が多く直線が少ない画像」では60px
  「細い直線が多い画像」では57px
のほうが一般にはキレイに表示されます。

最終的には実際に試してキレイなほうを選ぶことをオススメします。


*********************


日本時間6月8日、新しいiPhoneが発表されました。
それを受けて追記。

今度のiPhoneの画面解像度は、
これまでの480×320pxから
960×640pxへと、大幅に高くなっています。
写真で見る限り、ウェブクリップアイコンの見た目の大きさは変わりありませんから、
解像度的には、これまでの57×57pxの2倍相当になっているものと考えられます。
だとすると、129pxあれば充分だと判断つきます。

逆に57pxのウェブクリップアイコンのままだと、
相当ボケボケのアイコンになってしまうでしょう。


ラベル:



▲このページの先頭へ