favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方

あなたのホームページ、ブログにはfaviconは設定されていますか?

ユーザーがお気に入りに追加した際や他ホームページでリンクされた際などデフォルトのIEアイコン(IEの場合)となってしまうので、ぜひfaviconで目立ちましょう。w

さて、faviconを無料でサクっと作ってくれるサイトがあるのでそれの紹介をします。

※あくまで私のやり方のメモです。

手順1:16×16サイズのfavicon用の画像を用意

私の場合、サイト名のたぬぞう~~~から頭の文字「た」一文字の画像を用意しました。

手順2:アイコン作成サイト「FavIcon from Pics」で画像をアップロード

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方:アイコン画像アップロード

Image to Use部分の「参照」ボタンをクリックして、手順1で作成した画像を選択しアップロードします。

手順3:生成されたfaviconのダウンロード

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方:アイコン画像のダウンロード

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方:アイコン画像のダウンロード

生成されたfavicon画像が表示されます。
内容がOKなら「Download FavIcon Package」をクリックしてダウンロードします。

手順4:自分のホームページ、ブログにfavicon用のタグを挿入

<link rel=”shortcut icon” href=”favicon.ico”>とタグを<head></head>内に挿入します。
以下のように表示されれば設定完了です。(IE8の場合)

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方:faviconの表示確認

favicon(ファビコン・お気に入りアイコン)の作り方・設定の仕方:faviconの表示確認

ABOUTこの記事をかいた人

たぬぞう

好奇心旺盛な40歳児「たぬぞう」です。 2000年よりWebディレクター/営業をやっています。 シゴトやプライベートで役に立ったものなどを紹介している個人ブログです。皆様のご参考になれば幸いです。