ファビコン設置方法

ファビコン(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で表示されるようになりました^^

 


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

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