ファビコン設置方法

ファビコン（favicon）表示完全版！IEでも表示可能なファビコンの設置方法をご紹介します。当ブログもやっとIEで表示するようになりましたのでその方法をご紹介します。

 

こんにちは、マメボーです。

今までFirefoxとchromeなどIE以外のブラウザーでは、
ファビコンが表示されてましたが、ついにIEでも表示させる事が出来ました＾＾

これでガンガン目立つようになります＾＾

ファビコンって何？
って方は、この下の画像を見てください。

ファビコン

良くURLの横にある画像です。
通常は、『e』などのブラウザーマークが付いていますが、

ここを自分の画像に変更する事が出来ます！

「でっ、このファビコン設置して、なんかメリットあるの？」

そんな方は、
お気に入りフォルダーの中身を見たら一目瞭然ですよ。

お気に入り内のファビコン

せっかく、後で読もうと思ってお気に入りに登録されても、
他のサイトの中に埋もれてしまっては、もう訪問してくれないかもしれません。。。

こうやってファビコンを設置すれば、どうですか！？
目立つでしょ＾＾

リピート率が格段に上がる事間違い無しですね！！

これは、うちのサイトでも取り入れないとって思って、
以前に他のサイトを参考に設定して、無事に出ていたのですが、

ふと気がつくとなぜかIEだけ表示されなかったんです。。

原因がわからず、見なかった事にしていたのですが・・・
なんだかんだ言っても、ブラウザー界では IEがシェアNO1だし・・

そのIEで表示されなければ、
ファビコンを設置した意味が無いと思い

もう一度再挑戦してみましたm9っ`Д´)

今回はその方法をご紹介していこうと思います。

 

IEにも表示可能なファビコン（favicon）の設置方法！

早速調べて、今回参考にさせて頂いたサイトはコチラです。

caraldo_Kさんのブログ
⇒IEで表示されない！？favicon.icoを完璧に表示する方法

結構気合いを入れて調べようと思ったら、
意外と簡単でした(￣▽￣)

前回はicoを強制変換しましたが、
アプリやツールがたくさん出ているのですね＾＾
便利な世の中です( ﾟДﾟ)y─┛~~

それでは、IE完全設置方法を
ご紹介していきます～！！

①まずは、ファビコンに設置する画像を作成する！

まずは、ファビコンに表示させた画像を用意します。

お持ちの画像加工ソフトやWindows付属のペイントでも作成可能です。
ファビコン専用の画像作成サイトもたくさんあるので、
使いやすそうなところを探しても大丈夫です。

ファビコン専用の画像作成サイト例

ファビコンの表示は縦16px×横16pxで表示されますが、
32px×32pxでの作成をオススメします。

32pxで作成すると

デスクトップのファビコン

デスクトップなどに表示された際にも、
画像が拡大される事が無く綺麗に表示されます。

②Windows標準のicon形式を作成する

前回間違っていたのは、この部分でした。
IEは非常にデリケート(‘A`)なので、
ちゃんとしたWindow標準のicon形式が必要でした。。

そこでこんな便利なサイトがあるのでご紹介します。
画像をリサイズしてicon形式に変換し、
さらにイメージ表示でどんな感じになるかプレビューも表示してくれます＾＾

screenshot_45

http://ao-system.net/favicon/index.php

 

それでは、早速使い方を説明します。

ファビコン作成方法

ファビコンに変換したい画像を選び「favicon.ico作成」をクリックします。

大きな画像でも、自動的にリサイズしてくれますが、
画像縮小で荒れた状態になるので、できればピッタリなサイズがオススメです！

 

ファビコンプレビュー

できあがりをプレビューで確認出来ますので、
良ければ「ダウンロード」をクリックします。

 

完成

自動的に、名前が「favicon.ico」に変換されます。
これでファビコンは完成です！

 

favicon.icoをアップロードする

作成したファビコンを、FFFTPなどでアップロードする。

ファビコンアップロード

必ずindexファイルと同じ場所の
ルートディレクトリに配置します。

/www
├index.html
├bbs
│ └bbs.html
└favicon.ico

WordPressなどでも、WPフォルダー内のindex.phpがある場所

ルートディレクトリに正しく設置ができると、

ブラウザーに
http://あなたのURL/favicon.ico
で設置した画像が表示されるか確認して見てください。

例：https://siyo.org/favicon.ico

完成テスト

このように表示されれば、設置は完了し、
自動的にファビコンとして認識されますが

念のため、<head>～</head>内に記述する事で
古いブラウザーなどでも確実にファビコン表示が可能になります。

<link rel=”shortcut icon” href=”http://あなたのURL/favicon.ico type=”image/vnd.microsoft.icon”>

※赤字の部分を変更してくださいね。

WordPressなどでは、
ダッシュボード⇒テーマ編集⇒header.php内に記載します。

WordPressの設置例

 

はい！これでファビコン設置完了です！
お疲れ様でした。

ファビコン設置完了

このサイトもIEで表示されるようになりました＾＾

 

どんな些細な事でも良いです。
こんな事聞いて良いの？と思うぐらい些細な事でも構いません。
アクセスアップの悩み・・・
アフィリエイトの悩み・・・
いつでもマメボーにご相談くださいね。

マメボーへのメール相談はこちらです。