iPhone/iPod touch 用の favicon 的なものを作る


ネットワークは断然有線派!の元弱電屋の私ですが、車の運転がいつしかオートマばかりになったように、先日我が家も有線 LAN と別れを告げました。昔は設定が面倒だったような気がした無線 LAN の構築ですが、もうホントあっちゅー間に出来ました。

AirMac Express ベースステーション

を買って来て、LAN ケーブルさして、ネットワーク環境の設定をちょちょいのちょいと。ものの 5 分程度で快適な無線 LAN 接続完了です。ひとつ難点を挙げるなら、夜眩しいってことくらいでしょうか。

さて、無線 LAN 環境を構築したのを機に、音楽プレーヤー+写真のビューアでしかなかった iPod touch で色々遊ぶことにしました。有料のアップデート(ソフトウェア 2.0)をして、アプリを色々入れてみたり。入れたアプリについてはまた今度。

そんな中で、Safari のブックマーク的なものをデスクトップ的なところに置くことが出来る「Web クリップ」という機能がありました。

  • Safari でサイトを開く
  • ”+”ボタンを押す
  • ホーム画面に追加

こんな手順で、クリップ出来るのですが、アイコンが…キャプチャ?みたいなので萌えないというか、なんと言うか。favicon みたいなことしたい!と当然思う訳ですが(ようやく本題)、探したらあっさり見つかりました。

  • 60×60 px の apple-touch-icon.png というファイルを用意し、サイトのドキュメントルートに置く。
  • head タグ内に <link rel=“apple-touch-icon” href=“/apple-touch-icon.png” /> と記述。

もっと詳しくは、「ありがとうiPod さん」をご覧になってくださいませ。

60×60 px の png をどうやって用意しようか悩みました。

百式さんの idea x idea で紹介されていた「iConvert」を試しに使ってみましたが、(これは便利。でも、)サイズが小さくなりすぎて使えませんでした。どうしようかなーと思っていたんですが、普通に Mac に標準装備されている「プレビュー」で簡単に作れました。

私が持っていたのは、120×120 px の jpg ですが、これを 60×60 px の png にするには、

  • 元画像をプレビューで開く。
  • 「ツール > サイズを調整」で 60×60 に。
  • 「ファイル>別名で保存」でファイルタイプを png にする

で OK デス。そんな感じでこんなん出来ました〜!

iPod touch no

アイコン出来た!

自己満足ですが、何か?良かったら皆さんもご自分のサイトの iPhone/iTouch 的 favicon 設定してみてくださいねー☆

コメントをどうぞ