ブランド (サイト) ロゴは Favicon はもちろん Facebook、Twitter、Google+ などのプロフィール画像などさまざまな場所、さまざまなサイズで必要です。そこで、プロフィール画像・アイコンのサイズをまとめてみました。
- Favicon
- 48 x 48 px, 32 x 32 px, 16 x 16 px
- Web クリップ
- 144 × 144 px
- 180 x 180 px
- Google+
- 250 × 250 px 以上
- 400 x 400 px
Favicon
Favicon は、ブラウサーのアドレスの左側やブックマークしたときのアイコンに使用される画像です。サーバーのルートに favicon.ico というファイル名で保存するか、次のメタタグを HTML に記述します。
<link rel="shortcut icon" href="ファイルのアドレス" />Web クリップ
Web クリップとは、iPhone、iPod touch、iPad の Safari のブックマーク機能の一つです。
お気に入りの Web ページをホーム画面に追加すると、ホーム画面に表示中のページを縮小した画像が、アイコンとなって保存されます。apple-touch-icon が設置されているサイトは、そのアイコンがホーム画面に登録されます。
Web クリップ用アイコン (iPhone 用アイコン) を HTML に記述する
アイコンに自動的に陰を追加する場合
<link rel="apple-touch-icon" href="ファイルのアドレス" />アイコンに自動的に陰をつけない場合
<link rel="apple-touch-icon-precomposed" href="ファイルのアドレス" />メタタグを省略するには
Web クリップ用アイコンを、サーバーのルートに設置する場合は、html の記述を省略することができます。
アイコンに自動的に陰を追加する場合は、ファイル名を apple-touch-icon.png にします。アイコンに自動的に陰をつけない場合はファイル名を apple-touch-icon-precomposed.png にします。
