マルチアイコンでPCとスマホ両対応のfaviconを作る

マルチアイコンでPCとスマホ両対応のfaviconを作る
WEB制作全般

設定すると、一気にサイトの完成度が上がったような気がするのがそう…favicon(ファビコン)。ブラウザタブに設置されたオリジナルマークが、サイズに見合わない存在感を放ちます。 デバイスが増えた昨今はサイズもいろいろあるようで、どう作ったらいいか悩みますよね。 今回私は4サイズをマルチアイコン化して、PCとスマホで表示を確認してみました。

ファビコンとその拡張子

ファビコンとは【favorite icon】の略。ブックマークした時の表示用アイコンですね。拡張子は【.ico】が一般的です。
実はたいていのブラウザではpng/gif/jpegでも問題ない上に、ブラウザによってはgifアニメに対応しているのですが、IE10以下が.icoしか認識しないようです。んん。。
icoファイルにはpngやgifなどで作った複数の画像を格納することができ、XPの時代から透過にも対応しています。 サイズの違う画像をicoに収めると、場所によって適切なサイズのアイコンがあてがわれます。これがマルチアイコンです。

マルチアイコンを設定しよう

サイズについて

サイズを決めるにあたり、こちらのサイトを参考にさせて頂きました。とても見やすく表にまとまっています。

…種類が多すぎますねー。これ全部作るのは大変なことです。サイズも膨らむし。 ので今回は、

  • 必須であろう16px×16px、32px×32px
  • IEが勧めている48px×48px
  • スマホできれいに表示されるよう152px×152px
の4種類を作りたいと思います。

便利サイトで簡単にマルチアイコンを作る

こちらのサイトで透過した.icoファイルを作れます。

作り方は、複数の画像ファイルを選択し「アイコン作成」をクリックするだけ。 背景透過させたpngファイルを4枚放り込み…

01

できました!

02

モチーフは、オリジナルキャラクターのぶちねこはっちちゃんです。 48px以下の3枚ははっちちゃんの顔だけ、152pxは全身が入るデザインにしました。 OKなら「アイコンダウンロード」よりダウンロードしてください。

アイコンを設定する

できあがったファビコンをアップロードしましょう。 そして<head></head>で以下のように指定し、ファビコンへのパスをつなげてください。 今回はWordpressブログに貼るので、テーマフォルダ直下にアップロードし、URLはphpで出力してます。

<link rel="Shortcut Icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />

表示を確認。スマホでは152pxが採用される

表示を確認します。PCはWindows8、スマホはAndroid4.0で見てます。(りんご製品がないです、ごめんなさい。。)

PC表示

ブラウザタブのファビコン。IEです、アドレスバーにも表示されるんですねー(かわいい!)。サイズは16px×16pxです。

03

こちらはchromeの履歴一覧です。ボケてますね。適正サイズは、用意しなかった24px×24pxのようです。

04

windowsのデスクトップにピン留めです。48px×48pxがはっきり表示されています。

05

スマホ表示

スマホ用chromeでのブックマーク一覧。こんなに小さいのですが、はっちちゃんの全身アイコンが表示されています。

05

履歴一覧も。

06

壁紙上にピン留めした画面です。Retina画面に152px×152pxのアイコンがきれいに表示され、愛しさこみ上げます。しっぽが入るように調節すればよかった…。

07

ちょっとつまづいたところ&まとめ

faviconは、やたらキャッシュが残る?ようです。最初間違って無透過の画像を上げてしまったのですが、何度上げなおしてもブラウザ表示が更新されなくて焦りました。 特にchrome、お前はシークレットモードでもダメ、キャッシュの消去とハード再読み込み(F12押してから左上の更新マーク長押し)してもダメ。なんのための機能だよ。

画像の重さもやや課題です。今回何も考えずpng24で作ってしまったため、109kbもあります。今後サイズを増やす場合は、gifやpng8の透過でもきれいに見えるよう工夫して画像制作したほうがいいかもしれません。

ファビコン、設置しましょう。サイトへの愛着度が一気に増しますよ。

  • このエントリーをはてなブックマークに追加