スマホのfavicon作成について。




そういえば、このblogで技術的なことを書いたことが無かったです…
一部の方にしか通じない今日の記事。

ご覧になる方によって、不慣れかもしれない言葉が多々あります。
まぁ、普段こんな事しているんだということで許してください。





そういえば、iPhoneのfaviconってどうやって作るんだろう?
何て、いまさらながら思ってみます。
(いくつかスマホサイトも作ってるのにと反省…)


調べたら、設定自体は非常にシンプル。実験的に作成してみました。


iPhoneなら、57×57ピクセル。
iPadなんかを意識したら、144×144ピクセルの画像を準備します。
なので、144ピクセル以上の画像なら問題ないかと。

大きさ・角丸は、自動的に処理されるみたいです。
フラットにするなり、グラデーションをつけるなり。


保存形式は、jpg /gif / png のお好みで。
僕の場合は、今回jpg形式で作成してみました。


出来たら、表示させるファイルの<head>内に以下の一行を追加。


<link rel="apple-touch-icon" href="画像の名前" />


画像指定は拡張子をお忘れなく。
あとは、ファイルと画像をrootフォルダにアップロードです。


これで、ブックマークをホーム画面に追加したときに、
上の画面のようにアイコンが表示されます。


ついでにPC用画面のblogも作成。右の黒い方です。
EvernoteとBBC Newsに挟まれる、U-beって(笑)
色合いバランスはもう少し改善の余地ありかな。


iPhoneだとアイコン画像を変更するたびに、そのサイトにアクセスした時、
追加したアイコンは変更されました。


古いAndroidを引っ張り出してきて、ホーム画面に追加しても
表示は大丈夫でした。


他にも色々カスタマイズできるみたいなので、気になる方は同様のことに触れてる他のサイトも要チェックです!
(ここは投げやりです。)


山口県宇部市のホームページ制作U-be【ユービー】