ブックマークアイコン(ファビコン)を設定する方法 | YouTubeで月100万稼ぐための教科書

ブックマークアイコン(ファビコン)を設定する方法

Baidu IME_2013-6-30_15-5-0

favicon(ファビコン)とは、下図のようにページウィンドウを開いた時に

表示されるホームページ独自のアイコンでです。
お気に入り等にブックマークした場合も表示されます。

Baidu IME_2013-6-30_15-5-0

faviconの効果

faviconは単なる飾りではなく、クリック率をUPさせる効果もあると言われています。
Webサイトの仕組みを全くわからない一般ユーザーには、
faviconがあるだけで「ちゃんとしたサイト」というイメージを抱きやすいようですので、
ライバルと差をつけるちょっとしたテクニックです。
そのファビコンの設置の仕方を教えます。

1.favicon用の画像を作成する。

画像作成ソフトなどを使ってgifやjpeg形式で作成します。

※大きさは問わないが、正方形で作成すること。

2.作成した画像をfaviconの形式に変換する。

変換後の拡張子は「ico」となります。

【変換方法】
Favicon From Picsにアクセスし、fabicon用の画像をアップロードし、変換したzipファイルをダウンロードする。
手順は以下の通り。

Baidu IME_2013-6-30_15-14-14

サイトにアクセスし、「参照」をクリック ⇒ 画像を選択し、「Generate Favicon.ico」をクリック。

Baidu IME_2013-6-30_15-15-19

すると、ページが切り替わるので、「Download Favicon Package」をクリックし、対象を好きなとこに保存する。

zipファイルを解凍し、ファイルを開くと、3つのファイルが入っています。

Baidu IME_2013-6-30_15-24-3

3.ファビコンファイルをwordpressにアップロードする。

※ここではWordPress格納フォルダ直下にアップします。
(WordPress本体を、「wp」というフォルダに格納している場合、wpフォルダ内にアップロードします。

アップロードする場所が間違っていたらファビコンは反映されませんのでお気を付けください。

4.ファビコンをアップするプラグインをインストールする。

プラグインを使えばややこしい設定は必要ないので、ここではプラグインを使った方法をお教えします。

ワードプレスのプラグインである「All in one Favicon Settings」をインストールしてください。

wordpress管理画面の「プラグイン」⇒「新規作成」⇒検索で「All in one Favicon Settings」と検索

Baidu IME_2013-6-30_15-31-30

一番上に出てくる「All in one Favicon」をインストールし、有効化します。

Baidu IME_2013-6-30_15-33-9

プラグインの「All in one Favicon」の「Settings」をクリック。

5.先ほどFavicon用に変換した画像をアップロードします。

Baidu IME_2013-6-30_15-39-55

「ICO Frontend:」に先ほどダウンロードした3つのファイルのうちの「favicon」という画像をアップし、変更を保存します。

Baidu IME_2013-6-30_15-35-24

以上で完了です!!

wordpressのページを更新して確認してみてください^^

もしファビコンが反映されないという場合のやり方

もしプラグインを使って反映されないという場合は、

FFFTPを使って手動で行います。

1.Favicon用画像をwordpressをインストールしている階層と同じ階層にアップロードする。

(WordPress本体を、「wp」というフォルダに格納している場合、「wp」フォルダ内にアップロードする。)

2.次にWordPress管理画面でhead内に次のソースを挿入する。
<LINK REL=”SHORTCUT ICON” HREF=”http://ドメイン名/wp/favicon.ico” />

手順は
「外観」 → 「テーマ編集」 → 「ヘッダー(header.php)」をクリック。

<head>~</head>間に、下記ソースを挿入する。
<LINK REL=”SHORTCUT ICON” HREF=”http://ドメイン名/wp/favicon.ico” />

※ドメイン名はご自身のドメインに変更してください。
このブログの場合、<LINK REL=”SHORTCUT ICON” HREF=”http://kakurajunji.com/wp/favicon.ico” />に変更します。

この場合、</head>の上に入れるとわかりやすいと思います。

Baidu IME_2013-6-30_15-53-4

挿入したら「ファイルを更新」して、アイコンが出るか確認してください。

それでも反映されないという場合の原因

●faviconが表示されていない場合、最新の情報に更新してみる。

●favicon.icoをアップロードした場所が違っていないか

●<LINK REL=”SHORTCUT ICON” HREF=”http://ドメイン名/wp/favicon.ico” />の記述が誤っていないか
また、挿入する場所が間違っていないか

●favicon.icoを変換サイトでちゃんと変換したかどうか
gifやjpeg画像の拡張子をただ変更しただけでは、faviconとして機能しないので注意。

lgi01a201403140200 YouTubeアドセンスでガチで稼ぐための特別メルマガ

↑↑YouTubeマル秘テクニックを
メルマガだけで公開中!↑↑

lgi01a201403140200 30日間最新ネットビジネスノウハウ講座
月10万を手堅く稼ぐ方法&SNSツールプレゼント中!

↑↑ブログでは書けない秘密の稼ぎを公開します!↑↑

初心者の方でもわかりやすく丁寧に解説しています。

今ならアメブロやmixi最強集客ツールや優良画像素材など様々なプレゼントを差し上げています。

合わせて読みたい記事

シェアする

フォローする

コメントをどうぞ

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>