Favicon.ico作りましたが

投稿者: | 2012年6月10日

昨日は文字化け対策で一日を使ってしましました。
そんなこんなで本日はfaviconアイコンを作ろう!と考えていました。

う~ん favicon.icoってなんじゃぁ?

これは、URLが表示される左側に小さなアイコンが表示されていると思いますが、これです。
お気に入りで追加した場合にも左端に小さなアイコンが表示されていますが、同じものです。

最初はFireworksででも作るつもりでいましたが、調べたところネット上で作成してくれるところがございました。画像を指定すると256色で大きさも整えてくれます。もちろんico形式にファイルを置き換えてくれます。

使用したサイト⇒ http://www.chami.com/html-kit/services/favicon/

なぜ作ろうと考えたのかと言うと、ロボット検索(多分google)でこのfavicon.icoがあるかどうか確認しているようでhttpdのログでエラー表示となっていました。まぁ大したエラーではないようですが、SEO対策としてはあった方が良いようです。

今回のアイコンは青いPC内部の写真を小さく加工しました。小さ過ぎて元の写真がそれとは思えませんが・・・。無いよりあった方がましということで。

書き忘れました!

ヘッダーに追加が必要になります。<head>と</head>の間にタグを追加してください。

追加したタグ ⇒ <link rel=”shortcut icon” href=”favicon.ico”>

すぐにfaviconが現れない場合があるようです。その場合にはブラウザのキャッシュとか削除すると出てくるようです。出ない場合には、置き場所(私の場合にはApacheで指定してあるwwwのフォルダーに入れてあります。違う場合にはタグでfavicon.icoの前にある<a href=”http:// 置き場所favicon.ico”>で設定してください。

まぁ無いよりもあった方がいいよ。と思います。

◆2014.09.07 記事追加
複数の方から「Faviconはどこに置いたらいいですか?」という質問がありました。
Faviconのファイルは、wordpressであれば、このフォルダーの中に入れてください。
その他、HPであれば、公開しているHPのファイルが置かれているホルダーの / に入れてください。
表示されない場合には、使っているPCのインターネットキャッシュを削除してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください