サイトを作ったらFavicon（ファビコン）を設定しよう！

WEB-LABO

WEB-LABOにもFaviconを設定してみました。 ということで、今日はFaviconについてサクッと書いてみます。

Faviconとは？

Faviconとは、ページを開いたときタイトルの横に表示されるアレです。 favorite icon の略だと思われますので、お気に入りに登録した時のタイトルの横にも表示されます。

Favicon（ファビコン）

設定は簡単でlinkタグで記述します。また、タイトルやブックマークに表示されるサイズは、16ピクセルなのであまり詰め込まずシンプルなものが良いようです。

記述の方法は、<head> ～ </head> の間に次のlinkタグを記載します。但し、ファイルのパスはサイトによって異なりますので各自変更が必要です。

　
<link rel="shortcut icon" href="ファイルのパス/favicon.ico">
　

なお、PNGファイルを設定したところ表示されましたので、他の画像形式も表示されると思われます。 GIFアニメーションで制作したらアニメーションのFaviconを作れそうです。 アイコンの形式（.ico）で作成すれば背景の透明化も可能です。もちろんですが、作成したFaviconのアップロードも忘れないようにしましょう！

WEB-LABOのFaviconはPhotoshopで作成しましたが、ペイントなどでも作成できますのでチャレンジしてみてください。

作成したFaviconをアイコン形式に変換するには、下のサイトを使うと便利です。アップロードした画像をアイコン形式（.ico）に変換してくれます。探せば他にもありますが、勝手に余白をトリミングしたり透明化できなかったりしたので、WEB-LABOでは下のサイトを使わせて頂きました。

 

WordPressでは

WordPressでテンプレートフォルダにFaviconをアップロードした場合、次のような記述になります。（テンプレートフォルダの中の「images」というフォルダにアップロードした場合）

　
<link rel="shortcut icon" href="<?php bloginfo( 'template_url' ); ?>/images/favicon.ico">
　

関連記事