ファビコンって知ってます？
Favorite iconで、faviconです。
サイトをお気に入りに追加した時に表示されるやつね。
私はChromeのブックマークバーは、
ファビコンのみでお気に入りサイトを表示しています。
こんな感じ
なので、私のサイトもファビコン設定しないと困るのです。
今の時代、
ほとんどのサイトで、ファビコン設定してありますよね？
サイトの信頼性と、
また覚えてもらう為にも、
画像イメージが表示された方がありがたい。
というわけで、ファビコン設定も必須です。
もくじ
ファビコンの作り方。icoファイルを用意する。
当サイトでも早速作ってみました。
画像編集ソフトで、適当に作って下さい。
サイズは 24×24、48×48、64×64、128×128・・・とか？正方形で適当に。
こんな感じにしました。( 128×128サイズ)
※イケてるかイケてないかは、問題ではありません。
で、一般的な画像ファイル（JPEGやGIFやPNG）では、ファビコンに設定できません。
ファビコンはICOファイルに変更する必要があります。
無料で、簡単に変更できれます。
→ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
※フォトショップを持っている方は、そのままICOファイル形式で保存できます。（下の方参照）
ICO形式の画像を用意したら、あとはサイトに設置するのみです。
続いて、ワードプレスの設定です。
WordPressにファビコン画像をアップロード。
まず、ファビコン画像をワードプレスにアップロードします。
ダッシュボードの「メディア」→「新規追加」より、
先ほど作ったICO形式のファビコン画像をアップロードします。
無事アップロードできたら、画像のURLを確認します。
「メディア」→「ライブラリ」より、
アップロードしたファイルをクリックするとURLが確認できます。
右の方に「ファイルのURL」ってあります。
このURLをコピーしておきましょう。
あとは、header.phpファイルにこのURLを書き込みして終了です↓
WordPressの「header.php」を編集する。
ダッシュボードの「外観」→「テーマ編集」より、
右側部分の、「ヘッダー（header.php）」を選択します。
コードが出てきてワケプーですが・・・
表示されたコード内の<head>～</head>間に、下記ソースを挿入すればOK。
<LINK REL=”SHORTCUT ICON” HREF=”先ほどのファビコン画像ファイルのURL” />
※敢えての大文字にしましたが、小文字でも可
※「”」はコピペすると、「”」になってしまう臭い・・・手打ちにて入力し直しましょう。
というわけで、私は</head>の直前に設置しました。
更新で終了です。
どうでしょう？簡単ですか？
英文のコードが出てきて、途中恐ろしいと感じる方。
プラグインでも簡単に設定できます。
ファビコン設置のプラグインは、「Favicon Rotator」
「ヘッダー（header.php）」コードを、いじるのが恐ろしい方。
プラグインでファビコン設定してしまいまっしょい。
Favicon Rotatorです。
☆5つだし、高評価のプラグインですね。
インスコして、有効化すると、
「外観」に「Favicon」が追加されます！！
あとは、Add Iconで、作ったファビコンを選択するだけです。
プラグインで、一瞬で設定できましたね。
それでもファビコンが表示されない場合
こちらも、参考下さい→賢威（ワードプレス）でファビコンが表示されない。
P.S.
「All in one Favicon」ていうプラグインもありました。
PNG、GIF画像も使えて、
管理者画面もファビコン設定できるので、こっちの方が良いかも・・・
フォトショップでICOファイル作成する。
おまけです。
フォトショップで、ファビコンを作る際はプラグインが必要でした。
下記リンクよりプラグインをダウンロード。
→Telegraphics – Free plugins for Photoshop & Illustrator…and other software
ダウンロードしたファイル（ZIP）の中の、
「ICOFormat」をPhotoshopフォルダの「ファイル形式」フォルダに移動するだけです。
私の場合(Windows)は、
Program Files / Adobe / Adobe Photoshop CS / プラグイン / ファイル形式
って感じでした。
無事icoファイルで保存できる様になりました。
フォトショップは、あった方が良いです。
高いですが・・・情報商材買うよりは、間違いなく良いです。
フォトショップは高すぎる・・・
そんな方は、Photoshop Elementsがオススメです。
Adobe Photoshop Elements 12 Windows/Macintosh版
アフィリエイトサイト運営くらいなら、
Photoshop Elementsで、全然問題無いですから。
コメント