ファビコンの作り方とブログへの設定方法: BFuture

2014年12月16日

ファビコンの作り方とブログへの設定方法

こんばんわ、もんじです。

日々、ブログのカスタマイズを行っています。

このブログ【BFuture】も、なかなか機能が充実してきました。

本日もその中から１つご紹介します。

本日は「ファビコンの作り方とブログへの設定方法」をご紹介したいと思います。
ファビコンとは、Webサイトやブログを象徴するアイコンのことです。
ブラウザではURLやタブの左端に表示されます。
また、お気に入りに登録するとブックマークアイコンとして表示されます。

Chrome などの多段タブ機能のないブラウザで、ページをたくさん開くと、タブが小さくなりすぎて何のページなのか全くわからなくなります。
そんなときにファビコンを設定しておくと、1文字分あれば何のサイトかが判るので目立ちます！(笑)
そして何よりもサイトを見てくれているユーザーに優しいサイトになりますよ(≧▽≦)

ちなみに、このブログ【BFuture】では虹のアイコンを設定しています。

実は【BFuture】とは「Bridge to the Future」（未来への架橋）の略なんですね、だから「虹」です。
そう、なんとなくです(笑)

さて、ファビコンの名前の由来はご存知ですか？

過去記事の
「お気に入り（ブックマーク）のサイトアイコンを簡単に保存する方法: BFuture」
でもご紹介しましたが

「favorite」（お気に入り） ＋ 「icon」（アイコン） ＝ 「favicon」（ファビコン）

単純です(笑)

それでは実際に作成して、自サイトに登録してみましょう！
（※以下、画像はクリックで拡大します。）

スポンサードリンク

ファビコンの作り方

ファイル形式について
ファビコンはもちろん画像ファイルですが、どんなファイル形式にすればいいかと言うと、一般的にはICO（アイコン形式）となりますが、最近では、GIFやPNGも使えるようになり、扱いやすくなりました。

ただし！IEだけはICO形式でないと表示されません。

ったく、いつもいつも IE だけは・・・。

ちなみに、【BFuture】ではPNG形式を使用しています(笑)

ICO形式を作成するにしても、まずは PNG 、GIF、 JPG のどれかで画像ファイルを作成しましょう。

画像サイズについて
用意する画像サイズは、最大で3種類になります。用途に応じて必要なサイズを用意してください。

16x16：ブラウザ上のタブやお気に入りに登録した時に、左端に表示されるアイコンです。

32x32：デスクトップ上にショートカットを置いた時に表示されるアイコンです。

48x48：エクスプローラーでショートカットを表示した際に表示されるアイコンです。

GIFやPNG 形式をファビコンとして設定するのであれば、画像を作成した時点で、次の設定のステップに進んで下さい。

ICO形式で作成する方は、このまま読み進めて下さい。

ICO 形式ファイルの作り方
ファビコンはICO形式であれば、複数のサイズのアイコンを1つの ICO 形式のファイルに格納する事が出来ます。
この複数サイズのアイコンは、それぞれが全然違う画像のアイコンでも大丈夫です。

この複数サイズの詰まったアイコンはマルチアイコンと言います。

それでは PNG 、GIF、 JPG のどれかの形式で画像を用意したら、ICO 形式のファイルを作成しましょう！

ICO 形式のマルチアイコンは以下のサイトで作成出来ます。
favicon.ico を作ろう！

では、実際の作成方法です。

【ファイルを選択】ボタンがそれぞれの画像サイズ別に用意されていますので、それぞれのサイズ毎にボタンを押して指定して下さい。

【ファイルを選択】ボタンにてそれぞれの画像ファイルを選択すると、選択した画像ファイル名が表示されるので、確認してＯＫであれば、【favicon.ico 作成】ボタンをクリックして下さい。

選択した画像のプレビューが表示され、画面下部に「マルチアイコンが作成されました」と表示されます。これで全て問題なければ、【ダウンロード】ボタンを押下して下さい。

以上でファビコンの作成は完了となります。

続いて、ファビコンをブログへの設定しましょう！

ファビコンの設定方法

ファビコンをサーバーへアップロード
作成したファビコンをお使いのサーバーへアップロードして下さい。
私が使用している、このFAN ブログではICO 形式のファイルもアップロード可能ですが、もしアップロード出来ない場合は、DropBox や GoogleDrive にアップロードして下さい。

HTMLの修正
HTML の <head> セクション内に以下の記述を追記して下さい。

16×16サイズのファビコンだけの場合は、2行目の指定だけで大丈夫です。

ちなみに【BFuture】では以下のように設定しています。

以上でファビコンの設定は完了となります。

自分のサイトを確認して、設定したファビコンが表示されることを確認してみて下さい。

もし表示されない場合は、何度かリロードしたり、キャッシュを削除したりしてみて下さい。
最初はなかなか表示されません (；´∀｀)

これでまた一つあなたのサイトが進化しましたね！(ﾟ∀ﾟ)

でわでわ (´∀｀*)ﾉｼ

スポンサードリンク

タグ：ファビコン