ファビコン=Favorite Icon

Webサイトの上部のタブに表示されたり、お気に入りのブックマークで保存した場合に表示されたり、デスクトップにショートカットとして表示されるアイコンです。

作成

私は、イラレかフォトショで作成しています。それにプラスしてicoに変換するのに以下のサイトを利用しています。フォトショの場合はプラグインを入れてicoに変換することも可能です。

画像形式

GIFアニメーション
現在は、Firefoxでしか対応していません。あまり重くならないように気をつけてください。

サイズ

下記は基本的な値で、カスタマイズされた場合等はサイズが異なる場合があります。*大きめの画像で作成すると画像が自動で縮小されるので、画質が悪くなる場合があります。

webでの設定の仕方

<ヘッダー></ヘッダー>内に、
<link rel="shortcut icon" href="ファビコン名.ico">
を記述。

ウェブクリップアイコン＝スマホ用のファビコン

スマホ、iPadでウェブのブックマークをホーム画面に保存した時に表示されるアイコン。

作成

私は、イラレかフォトショで作成しています。

画像形式

サイズ

iOS7から「152×152 px」
iPhone 114×114
iPod touch 114×114
iPad 144×144

webでの設定の仕方 Android

ファビコンの設定と同じように<ヘッダー></ヘッダー>内に、
<link rel="apple-touch-icon-precomposed" href="アイコン名.png">
を記述。

*Androidでは光沢の設定は出来ない。
*透過部分はAndroidでは白く表示される。
*角が自動的に角丸になる。

webでの設定の仕方 iPhone/iPad

ルートの階層に、
光沢アリ:「apple-touch-icon.png」
光沢ナシ:「apple-touch-icon-precomposed.png」
でPNG画像をアップをすると自動的に拾ってくれる。

*透過部分はiphoneでは黒く表示される。
*角が自動的に角丸になる。