着せ替えファビコンでブラウザのタブが楽しい【Favicon Rotator】

07.222014

この記事は3分で読めます

02



 

 

ファビコン(favicon)ってご存じですか?


 

ファビコンとは


 

faviconファビコン)は、ウェブサイトのシンボルマーク・イメージとして、
ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

引用:ウィキペディア


 

と、ウィキペディアにありますが、

 

つまりコレですよ↓

 

12

 

 

 

 

 

 

 

このファビコンを自分のサイトにも設置してみましょう。

 

 



 

 

 

ファビコンの呼び出し方


 

 

ファビコンは「favicon.ico」という、ファイルを作成して、

 

サーバーにアップロードして、ファイルの<head>~</head>部分に以下のコードを記述して呼び出します。

 

 

<link rel=”shortcut icon” href=”http://example.com/favicon.ico” >

 

 

WPの場合、「header.php」の</head>の上あたりに入れるといいでしょう。

 

 

 

 

favicon.ico の作成方法


 

 

正方形の画像を用意して、コチラのサイトで作成します。

 

 

サイズの選択は16pxでいいでしょう。

 

 

できたfavicon.icoをPCに保存し、FTPで任意の場所にUPます。

 

 

 

このように、直接コードを書き込む方法の他に、

ファビコンを簡単に設置できるプラグインがあります。

 

 

 

ファビコンを簡単に設置できるプラグイン【Favicon Rotator】


 

1. インスト-ルと有効化


 

この作業はいつものとおりなので、簡単に。

 

 

プラグインの新規追加の検索で「Favicon Rotator」を検索します。

 

「いますぐインストール」→「プラグインを有効化」をクリックで有効化します。

 

 

 

2. favicon.ico 用画像の用意


 

正方形の画像を用意します。

 

 

画像サイズは大きくても自動で変換してくれますが、

あまり大きすぎるのはダメですよ^^;

 

 

100☓100px くらいでいいかなと思います。

 

 

 

3. プラグイン【Favicon Rotator】の設定


 

 

プラグインを有効化すると、「外観」の中に「Favicon」の項目ができています。

 

07

 

 

 

 

 

Browser Icon「Add Icon」をクリックします。


 

07

 

 

 

そうするとこのようにアップローダーが起動しますので、

 

07

 

 

 

 

先ほど作成した「favicon.ico」をアップロードします。

 

13

 

 

 

ボタンを押して設定完了です。

 

12

 

 

これでファビコンの設定ができました。

 

 

着せ替えにしたい場合は、もうひとつファビコンを作って、アップロードします。

 

ブラウザで確認してみましょう。

 

 

ランダムで表示されます。

 

 

07

 

 

 

スマホやiphoneなどにも自分のサイトのアイコンを表示させてみよう


 

Favicon Rotatorの「Touch Icon」は、

スマホやiphoneでHOME画面に登録した時に表示されるアイコンです。

 

 

ファビコンと同じ要領で、画像をアップロードします。

 

 

できたら、スマホなどでアクセスして、ホーム画面に設定してみましょう。

 

 

08

 

 

 

ね。ちょっと、いいでしょ?^^

 

 

 

 

ファビコンがあると、タブをいくつも開いた時に、

自分のサイトを見つけやすいとか、お気に入りをプルダウンした時に、

目立たせることができますね。

 

 

 

自分らしいお気に入りアイコンを作ってくださいね。

 

 

 

スポンサーリンク

HP初心者でも楽々。サイト作成お助けツール


■ 初心者でも自分で更新できる最短ホームページテンプレート
■ サクサクっと綺麗なサイトを作りたいなら=サイト作成システム「SIRIUS」
■ 豊富な素材を組み合わせて簡単にLPが作れる=LP作成用テンプレート【MeVIUS-メビウス-】
■SEOに強い戦略的テンプレート「賢威6.2」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

HPやブログで稼げるようになるためには?


■ブログを育てて未来の資産とする方法=PRIDE(プライド)
■初心者のためのアフィリエイトの教科書=3Mブログサイトアフィリエイト「LUREA plus」ルレアプラス
■もうキーワードで悩まない=オートレンダー 「未来のトレンドキーワードやライバル不在の穴場キーワードがわかるアフィリエイトオールインワンツール!」


関連記事

■スポンサーリンク

■過去記事

ご訪問者様

  • 337View:
  • 234081Total:
  • 4Online:
■オススメできるもの

◎PRIDE(プライド)

trend

◎LUREA(ルレア)

lurea

◎MeVIUS(メビウス)