ファビコンの設定をしてみました！

2015/08/24 2015/09/04

ヘッダー画像を設定したら今度は、上にあるタグの部分の画像が気になりました。

STINGER5のマークで、このままでもカッコいいのですが、自分のブログなのでオリジナルのマークを作って設定しようと思います。

この部分の名称はファビコンと言います。他のブログなどではよくファミコン？と言われてネタにされてますね(笑)

スポンサードリンク

ファビコンとは！？

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

（ウィキペディア参照）

なるほどですね～♪

こんな小さなところでも自分で作って、自分のブログを成長させたいですよね！

ファビコンの作成方法

まず設定する前にファビコンを作成しないとですね！

ファビコンを作るのに自分が利用したサイトがあるので紹介しますね。

こちらです⇒x-icon editorさん

このサイトを選んだのは、好きな画像を【ico】に変換する事が出来るので、簡単にファビコンを作成する事が出来るからです。（決して自分で作るのがめんどくさいという訳じゃないよ）もちろん自分で好きなように描いて作成することもできます。

作成する手順はとっても簡単です。

画像を読み込む
読み込んだ画像を編集（しなくてもいい）
プレビュー
書き出し

1.画像を読み込む

まずは右上にある【Import】をクリックします。

好きなように描きたい場合は左にある筆を押して、中央の描画スペースを一マスずつ好きな色で塗っていくだけです。

x-icon2 このような表示になるので、左上の【Upload】からファビコンに使いたい画像を選択します。この時、画像のファビコンにする範囲を好きなように変更する事が出来ます。右側にはサイズのプレビューが表示されます。チェックを外すことでいらないサイズの画像を除く事が出来ます。

そして、最後に【OK】をクリックして読み込み完了です。

2.読み込んだ画像を編集

OKをクリックすると中央の描画スペースに表示されるので、画像を調整、修正する場合はこの時に行います。

3.プレビュー

右側の【Preview】をクリックして、次の画面で表示される【Preview your icon】もクリックします。そうすると上の画像のように、どのように表示されるかが解りやすいプレビューを見る事が出来ます！

4.書き出し

右側の【Export】をクリックして【Export your icon】をクリックします。

これで【ico】のダウンロードが出来ます。

どうですか？かんたんに出来ましたよね！

ファビコンにも色々なサイズがあるよ！

16px × 16px：IEのタブ

24px × 24px：IE9の「ピン留め機能」

32px × 32px：Chrome、Firefox、Safariなどのタブ

64px × 64px：高解像度のWindowsサイトアイコン

などなど、現在では20種類以上のfaviconサイズがあると言われています。

このようにファビコンにもサイズが色々あります。

これを1つのファイルにまとめたアイコン画像のことが、【ico】です。

さきほどのダウンロードしたicoには上の四つのサイズが入っています。（1の作業で、チェックを外していない場合）