いまからはじめてみるブログ

日記とか趣味のこととか、いろいろ書いてみようと思っているブログです。とりあえず何かやってみます。

スポンサーサイト

--.--.-- (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ファビコンとは?ファビコンの作り方と設定方法 [初心者向け]

2013.02.05 (Tue)

■ファビコンとは?


ファビコン(Favicon)とは、Webブラウザのアドレスバーやタブに表示されるアイコンのことです。

下の画像は、IEでの表示例ですが…
ファビコン(Favicon)とは
URLやタブの左側に、Googleの「g」の画像が表示されていますね。
色々なサイトで、ロゴマークやキャラクターのアイコンが表示されているのを、目にしたことはありませんか?

ファビコンは、初歩的な画像作成とhtmlの知識があれば、案外簡単に設定ができます。

だからなんだ、という話でもあるのですが、個性をアピールできる部分でもあるので、独自のファビコンが設定されていると、ブログやサイトのイメージが変わったりもします。

また、ブックマーク時にもファビコンが表示されますので、
ファビコンとは
他のサイトと区別しやすくなるのも、メリットの一つです。

当ブログも、最初はFC2のユニコーンが表示されていました。
ファビコンとは
これを他の画像に変更しつつ、その過程を記事にしておこうと思います。

■ファビコンの作り方


ファビコンとして使用する画像は、下記の形式である必要があります。
画像のサイズは、16×16ピクセル
画像の種類は、ICO形式

ICOって何?という方もいらっしゃると思いますが、普段は使用しない形式ですので、知らなくて当然です。
まずは、gifやjpg、png形式の画像を用意して下さい。
これを、後でICO形式に変換します。

PCに最初からインストールされている、簡単なペイントソフトでも作成できると思います。
縦16ピクセル、横16ピクセルのサイズで画像を作成し、gifやpng形式で、保存しましょう。

ちなみに当ブログでは、こんな感じの画像を用意しました。
ファビコンの作り方
特に意味はありませんが、レトロなRPGに登場しそうな宝箱のgif画像です。

以前は変換ソフトを使用していましたが、今はWeb上でICO形式に変換してくれるサイトがあります。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
当ブログでもお世話になりました。
ページ左側の「小画像(16×16)」から画像を選択して、「favicon.ico作成」ボタンを押しましょう。
変換が成功すれば、ファイルをダウンロードできます。

ペイント関連のソフトが一切ない方、ソフトを開くのが面倒だ、という方はこちら。
Favicon Editor
英語サイトですが、Web上で、直感的にドットを打つことができます。
画面右下の「Create Favicon」ボタンを押すと、ダウンロード画面へ移ります。

ICO形式のファイルを用意できた方は、次に進みましょう。

※実は、16ピクセル以外のサイズや、ブラウザによってはICO形式以外も設定できるのですが、基本に沿った方法ということで、省略しています。


■ファビコンの設定方法


用意したICOファイルを、自分のブログやサイトにアップロードして下さい。
次に、ファビコンを設定するためのタグをhtmlに追加します。
追加するタグは、下記の形式になります。

<link rel="shortcut icon" href="xxx.ico" type="image/vnd.microsoft.icon" />

※くれぐれも、このままコピペしないで下さい。
赤字のxxx.ico部分を、先程アップロードした自分のサイトのURLと画像のファイル名に置き換える必要があります。

タグの追加位置は、<head>から</head>の間です。
よく分からない方は、</head>の上の行に追加して下さい。
かなり単純化しましたが、以下のような形になるものと思います。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サイト名・ブログ名</title>
<link rel="shortcut icon" href="xxx.ico" type="image/vnd.microsoft.icon" />
</head>
<body>



■FC2 BLOGの場合


大変申し訳ないのですが、FC2ブログ限定の説明です。
アップロードした画像ファイルの、URLの探し方です。

アップロードができたのであれば問題ないと思いますが、管理画面の左側、「ホーム」の「ファイルアップロード」をクリックすると、ファイル一覧を見ることができます。

先程アップした、ファビコンのファイルを探しましょう。
ICO形式のため、一覧にサムネイルが表示れない場合があります。
ここで、ファイルを確認すると、
http://blog-imgs-xx.fc2.com/x/x/x/xxxxxxxx/xxx.ico
という様なURLを見ることができると思います。
このURLを、ファビコン用のlinkタグ内、href="xxx.ico"の部分に記述して下さい。

次に「環境設定」の「テンプレートの設定」をクリックして、HTML編集の画面に移動します。
この画面で、テンプレートにタグを追加します。
編集作業に不安な方は、念のため、一度テンプレートを複製して、バックアップを取っておいた方が良いと思います。

HTML編集画面から</head>の部分を探し出しましょう。
ソース全体から見ると、かなり上の方に記述されているはずです。
上記の『ファビコンの設定方法』の通りにファビコン用のlinkタグを追加し、テンプレートの「更新」ボタンを押して下さい。

以上で設定は完了です。


■Webブラウザで確認


ファビコンは無事に表示されたでしょうか?
設定が完了しても、すぐに反映されない場合もあります。

ファビコンに変化がない時は、まずhtmlを見直し、ブラウザのキャッシュをクリアする、ブラウザを再起動する、一定時間後にアクセスする、等で確かめてみましょう。
関連記事

コメント

承認待ちコメント
このコメントは管理者の承認待ちです

管理者のみに表示

トラックバック

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。