faviconを設置しよう!

January 15, 2015

今回はファビコンを設置するよ!!

ファビコンはブラウザのタイトル部分の左側に表示されているサイトのマークみたいなものだよ、何も設置してないと何も表示されないので、サイトのイメージアップにもぜひ付けよう!

サイズはいろんなサイト見るとちゃんとやりたい人は全部のサイズ作るべし!ってあるのだがサイズもでかくなるし、現状IE用に16pxそれ以外用に32px、Apple製品用に256pxがあれば事足りるのではないだろうか。
古いブラウザやRetina等に関しては、別途検討が必要になるかもしれません。

favicon.ico : 16px x 16px、32px x 32px
apple-touch-icon.png : 256px x 256px

favicon.ico自体は、上記サイズのPNGを複数作成して下記サイト様にてicoファイルを作成する、必ずしも同じデザインである必要はありません。
ちゃんと透過させないと背景白くなってカッコ悪いので注意してくださいな。

半透過マルチアイコン、favicon.icoを作ろう!

apple-touch-iconは、iPhoneやiPadのSafariでホーム画面にショートカットを作成した際に利用されるアイコンです。こちらもfaviconと同じデザインである必要はありません。

作成したアイコンは、サイトのドキュメントルートやimageディレクトリ等環境に応じて設置します。

HTML上ではheaderに以下のような記述を追記することで表示されるようになります。

IE用に別途設定記載しているところも多いんだけど、上記でChrome(39.0.2171.95)、FireFox(35.0)、IE(11.0.9600.17498)、iPhone6では動作確認済。

テストする際はブラウザのキャッシュを削除しないと表示確認できないこともあるので注意しましょう。

追記:最近は下記のサービスに260x260のpngを投入するとプラットフォーム毎に必要なfaviconを作ってくれるのでよく利用しています。おすすめ!

RealFaviconGenerator.net

ではではまたね、アデューノシ