Webサイト制作最後のひと手間!favicon(ファビコン)を作ろう! | Second Floor

Second Floor

このブログは株式会社セカンドフロアの忘備録です。ご自由にご閲覧ください♪

こんにちは!
いのっこです(^∇^)

今回はWEBサイトを作成するうえで必要な要素の一つ。
「favicon(ファビコン)」について!

faviconは、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称で、 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものです。(wikipediaより引用)

あなたが今見ているこのアメーバブログでも、ブラウザウィンドの上部のタグの中に、アイコンとページタイトルがついているのが確認できると思います。
このアイコンがfavicon(ファビコン)です

favicon(ファビコン)はブックマークや複数タブを開いている状態などでも、ユーザーが目的のサイトを見つけやすくするための、言わば目印のようなものです。

今回はこちらを作成する方法をお教えします。

①まずはfavicon(ファビコン)にしたい正方形画像を用意します。
jpeg、gif、pngならOK!
※複雑な画像やグラデーションのかかった画像はあまりお勧めしません・・・

②ファビコン作成です。
こちらからfavicon.ico 無料で透過マルチアイコンが作れます。
ここに、用意したファビコン画像をアップロードし、左側のサイズを16×16を選択します。

③「favicon.ico作成」ボタンをクリック!
変換が成功すると、生成されたファビコンファイルがダウンロードされます。

④ファイルを開くと「****.ico」といった拡張子になっていると思います。
あとはこれをHTMLの中に組み込めばOK!
位置は<head>の中に



※***は画像nameです。

ファビコンはタブやブックマークの中でも埋もれないことで多少なりともアクセスアップにも寄与すると考えられています。
また、SEO的な効果はないと考えてしまいますが、あながちそうとも言い切れません。
サイトを閲覧した際にブラウザはfavicon.icoを要求しています。
なので、ファビコンが有る無しだけでユーザーの閲覧数は変動するとも考えられます。

是非皆さんもファビコン、作ってみてください!(-^□^-)