Favicon(ファビコン)

イメージ画
ここで、ちょっと触れたのですが、Favicon(ファビコン)の設定について触れてみます。

Favicon(ファビコン)とは・・・。
Favicon – Wikipedia

URLの左側やタブの左側が
イメージ画になっていると思いますがどうでしょう?
このことをいいます。

さらに、このサイトをお気に入り(ブックマーク)に登録して下さっている方、イメージ画が変わっているかと思います。

設定方法は

favicon.icoファイルを作って、ルートディレクトリに置いただけで
ブラウザによっては、表示されました。
「.ico」というのも、普通に「.jpg」などを書き換えただけです。
それでもブラウザによっては、表示されました。
(前のバージョンのfirefoxでは、表示しましたが、新しいものでは未確認です。)

でも、この方法では、IEは間違いなく表示しません。
すべてのブラウザで表示するには、
ちゃんと、「ICO形式」になっている、ファイルでなくてはいけないようです。

ICO形式とは・・・。
ICO (ファイルフォーマット) – Wikipedia

っと、難しく考えなくても、簡単に無料作成してくれるサイトがありました。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

私もここで作成しました。とても簡単に作れます。

作成したら、名前を「favicon.ico」として
可能ならば、ルートディレクトリにアップします。
(場所は、違ってもOKです。このブログはルートにおいていません。)
それで、Wikipediaにあるように、<head>~</head>内に以下のように
記述します。(ソースはこのサイトの場合)

<link rel="shortcut icon" href="http://matai.main.jp/wp/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://matai.main.jp/wp/favicon.ico" type="image/vnd.microsoft.icon">

これで、ほとんどのブラウザで、表示されると思います。

ブログサービスによっては、設定されたファビコンが標準で表示される場合があります。
ファビコンの変更が設定でできる場合は、そのとおりに行えばよいのですが、自動的に上記ソースを記述してしまうブログもあります。
私の経験で、確かな証拠はないのですが、
ブログで自動生成した後に、もう一度、自分が表示したいファビコンで上記ソースを書くと、後に書かれたほうを表示してくれるようでした。
(私の場合bloggerで試しました。)
なので、<head>~</head>内でも、なるべく</head>に近いほうが良いかもしれません。

話が変わってしまうのですが、SEO的に有利なmetaの記述として、
(mataiの持論ですが)
1.文字コード関連(エンコードや言語指定)
2.title
3.KeywordsやDescriptionなど、検索に関するもの
4.その他、サイトの解説
5.検索ボットへの説明(<meta name=”robots” content=”INDEX” />)
6.css、JavaScriptの形式の指定
7.css、JavaScriptの外部ファイルの指定
8.その他

1.2.3は確実にこの順番にして、残りはそれほどこだわらず
という感じです。
この辺は、いろいろ考えがあるので、これが正しいとはいえません。
(順序が変わっても、あまり影響がない。)
ここでは、wordpressの自動生成に任せて、こだわりを捨てています。

このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録
ボタンの色が白ならば、クリックし+1 を付けてください。
カテゴリー: CSS, HTML, SEO   パーマリンク

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" target="" rel="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <br> <cite> <code> <del datetime=""> <em> <i> <li> <ol> <p class="" align="" dir="" lang="" style=""> <span class="" dir="" align="" lang="" style="" title=""> <q cite=""> <strike> <strong> <sub> <sup> <u> <ul> <hr align="" class="" noshade="" size="" width=""> <img alt="" align="" border="" class="" height="" hspace="" longdesc="" vspace="" src="" style="" width="" localsrc="">

コメント大歓迎。ぜひよろしくお願いします。
Wordpressプラグイン「nofollow free」を利用して、ウェブサイトで入力されたURL、コメント内リンクのすべてに対してnofollow属性を取り外しています。
関連記事⇒コメントのリンクタグの「rel=nofollow」について
プラグインの取得は⇒nofollow free
このカスタマイズ文章の作り方の記事⇒nofollow freeカスタマイズ
↓スパムコメント対策
Comments on this blog, 'Akismet' is protected by.