アイコン・プロフィール画像のサイズ

ブランド (サイト) ロゴは Favicon はもちろん Facebook、Twitter、Google+ などのプロフィール画像などさまざまな場所、さまざまなサイズで必要です。そこで、プロフィール画像・アイコンのサイズをまとめてみました。

Favicon
48 x 48 px, 32 x 32 px, 16 x 16 px
Web クリップ
144 × 144 px
Facebook
180 x 180 px
Google+
250 × 250 px 以上
Twitter
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 にします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です