にほんブログ村 IT技術ブログ WordPressへ

今回はファビコンの作成設置について説明いたします。

 

ファビコンとは、

1983年7月15日に任天堂より発売された家庭用ゲーム機。メーカー希望小売価格は14,800円。型番はHVC-001。HVCはHome Video Computerの略である。日本国内での略称・略記は・・・

あ、違った・・待ってください!呆れて別のページに移動するのはちょっと待っていただきたい!!

 

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

 

要するにサイトのアイコンですね。

faviconrei

こんな感じでお気に入りとかサイト表示中に、サイト名の左のとこに表示されるのがそうです。
僕のサイトでは、faviconを利用しております。

 

ただのサイトの飾りじゃん??・・・と僕も思っていたのですが、
お気に入りに登録してもらっている場合、その中でアイコンが目立つことができるため
少しでもアクセスアップに繋がるものであるとは思います。

細かいところではあるのですが、あるとないとでは印象もだいぶ違ってきます。
もし自分のサイトにもっと味を持たせたいという方はぜひ。

 

 

では、早速作成方法です。

まずは画像を用意してください!!
こればっかりは自分で決めないといけません。

基本的にかなり小さい画像になってしまうので、写真とかにしたいとかはわかるのですが
何の写真だかわからなくなる可能性があるので、単純な画像が良いです。
僕はwindowsにデフォルトでついてるペイントのソフトで適当に作りましたw

画像を決めましたら、
FaviconConverter

ここのサイトで画像を入れれば勝手にアイコンのサイズにしてくれてダウンロードできます。
オプションがありますが、特にいじらなくていいと思います。

ダウンロードしたファイルは「favicon.ico」にしておきましょう。

参考までに、自分で作るのがメンドクサイ!!って方はフリー素材もあります。
こういうところとか

 

では自分のサイトに導入してみましょう!

まずファビコンの画像をサーバーにアップロードします。
WordPressの場合は、管理画面から
メディア → 新規追加 でfavicon.icoを選択してアップロードしてください。
そしてアップロードしたファイルの編集画面にいくと

favicon2

上の画像の画面になりますので、画像右部の赤の楕円で囲んだ部分のURLをコピーして置いてください。
この部分がアップロードしたファビコンの画像のURLになります。

 

続いて、アップロードした画像をサイト内でこれがファビコンの画像ですと指定してあげます。
外観 → テーマ編集 から ヘッダー(header.php)を編集します。

このヘッダーの中に
<head> ・・・ </head>で囲まれた部分がありますので(結構長いと思います)
その中のどこかに下の一行追加してください。
(わかりやすいように、</head>の一つ上の行に入れると後からわかりやすいかもしれません。)

<link rel="shortcut icon" href="ファビコン画像のURL" />

ファビコンの画像URLの部分のところに先ほどコピーしたURLを入れればokです。
入れ終わったらファイル更新をして記録します。

favicon3
この画像はあくまで例ですが、こんな感じです。

 

では、最後にファビコンがきちんと表示されるかどうか見てみましょう。
自分のサイトにアクセスしてみて下さい。

favicon4
バッチリ表示されましたね!!

 

お疲れ様でした!!

今回の記事いかがだったでしょうか。

パソコン関係のほんの些細なことや、
ちょっと難しいトラブル、パソコン買い換えたいけどわからない
などなど、自分でわかる範囲であればなんでもお答えいたしますので

コメント・メール等でお気軽に御連絡くださいませ。

メールはこちら
animenya@hotmail.com