URLの横のアイコン画像、ファビコンの作り方
ファビコン(Fabicon)って知ってますか?ブラウザーなどのURLに表示されているアイコンの事です。ここを変更することでサイトやブログをより目立たせる事ができます。お気に入り内でも目立ちリピート率向上しますよー
2010年12月記事更新
⇒新しい記事はこちらです。
IEにも表示可能なファビコン(favicon)の設置方法!
ファビコンの重要性
ファビコンは、通常IEの場合は「e」のマークで表示されます。
↓
ファビコンを変更すると、「e」の部分が画像に変更されます。
ここを変更する事で確実にインパクトを与えることができます!
そして一番効果が発揮するのが、お気に入りリストの中なんです。
これなら一目瞭然!
お気に入りリストの中にあったら目立ちますよね。
また行ってみたいと思いませんか?
ブックマーク数が多くなっても探しやすいし、リピート率は確実に向上します。
ファビコンの設置方法
ファビコン設置にあたって、まずは表示したい画像を作ります。
まずはそれほど大きくない正方形の画像を作ります。
お使いも画像編集ソフトでOKです。
私は64×64で作成しました。
もし画像編集ソフトが無ぇーよ!って方は↓なんかを使って見てください。
画像編集ソフト
- フリーの画像編集ソフト→GIMP
- ブラウザー上で作成するツール→Favicon Editor
画像を作成したら、ファビコン用に縮小(16×16)します。
ファビコンキングを使用します。
ファビコンキングを使用して、
ファビコンとして読み込みたい画像をアップロードします。
イメージができますので、右クリックして名前を付けて保存を選択します。
保存の名前を「favicon.ico」にしてデスクトップなどに保存します。
favicon.icoができましたら、トップディレクトリにアップロードします。
ブログなどのトップディレクトリにアップロードできない場合は、
なるべくトップから近い場所にアップロードします。
IEなどうまく表示出来ない場合があり、近ければ近いほどエラー回避できます。
アップロードしたら、正確に設置できたか確認します。
絶対URL(http://ドメイン/favicon.ico)を入力して確認します。
私のブログでのファビコン絶対URL
http://seo.siyo.org/wp-content/themes/keniwp_white100315/images/favicon.ico
↑のような感じで表示されます。
うまく表示されたら、
後は、headタグ内にfaviconへのリンクを記述します。
<head>~</head>の中に下記タグを記述しましょう。
<link rel=”shortcut icon” href=”/設置したディレクトリ/favicon.ico” >
トップディレクトリにアップロードした場合
<link rel=”shortcut icon” href=”/favicon.ico” >
私のブログの場合
<link rel=”shortcut icon” href=”/wp-content/themes/keniwp_white100315/images/favicon.ico”>
これで設置は完成です。
IEの場合は、キャッシュなどで表示されない場合があるので、
「ツール → インターネットオプション → 削除 → ファイル・履歴の削除」を実行して見て下さい。
それでも表示されない場合は、ブラウザーを再起動、PCも再起動しましょう!
できたかどうか確認したい人は、Firefox使うとすぐ確認できますよ。
この記事はあなたのお役に立てましたか?
あなたの応援のおかげで明日も頑張って記事が書けます
本日のランキング応援クリックありがとうございました(*'-'*)
マメボーwの無料メルマガ購読のご案内
ブ、ブログじゃとても言え無い・・・ マメボーwの稼ぐ裏話をご紹介します。
私自身が壮絶な遠回りと多くの失敗の末に、
現在では、安定して月収100万円以上を稼げるようになったのか?
その戦略的思考を包み隠さず、あなたにお伝えしていきます。
トップページへ戻る⇒アフィリエイトで稼ぐ!アクセスアップSEO術
あわせていっしょに読みたい関連記事:
- IEにも表示可能なファビコン(favicon)の設置方法!
- ブラウザー上から簡単にWeb2.0風のボタン作成ツール、しかも無料
- 賢威5.0のテンプレート5種類のイメージサイトを公開します。
- 第一印象で「このブログ見やすい!」と思わせるブログテクニック集
- link要素集!metaタグよりSEO効果あり?
タグ
SEO対策、デザイン、ボタン、素材2010年4月18日 | コメント/トラックバック(3)|
カテゴリー:SEO対策(内部対策)
トラックバック&コメント
トラックバック
-
[...] ファビコンについての参考 ⇒URLの横のアイコン画像、ファビコンの作り方 [...]
-
[...] ファビコンについての参考 ⇒URLの横のアイコン画像、ファビコンの作り方 [...]
コメント




























この記事を読んで「憧れの」ファビコンがやっと設置できました。
「IEで表示されない!? favicon.ico を完璧に表示する方法」
を読んで何度もやってみたのですが、上手くいかずほとんど諦めて
おりました。
本日、再挑戦と思い、検索でこのブログを見つけることが出来、感激です。
ありがとうございました。
今後ともよろしくお願いいたします。