Faviconの作成・設定方法

ページ概要

ファビコンの作成方法
ファビコンの設定方法
ファビコンの設置方法

ファビコンの作成方法

ファビコン？聞き慣れない単語ですよね。

ホームページ初心者の方なら尚さら何のことだかサッパリかと思います。
誰でも最初はサッパリですので、気にせず付いて来て下さい。

ウェブブラウザを開くとウィンドウタブが上段に表示されますが、ファビコンとは、このタブの左端に表示されるアイコンのことです。
お気に入りに登録するとブックマークアイコンとして表示されるアレです。
以下は、Google MapをGoogle Chromeで開いた時の例です。
スマホでは気付かないうちに当たり前のように使っている方も大勢いらっしゃるのではないでしょうか。

因みにfavorite icon（お気に入りのアイコン）が短くなってfavicon（ファビコン）、だそうですよ。

それでは、作成方法をご紹介します。

作成自体は、いたって簡単。「え？これで終わり？」っていうほど簡単です。
専用のホームページがありますので、そこで作成します。

ブラウザで https://ao/system.net/favicon/ へアクセスして下さい。
以下のような画面が表示されたかと思います。

次に、ファビコンにする画像を用意します。

画像フォーマットは、PNG、GIF、JPG(JPEG)、BMPならOKです。
拡張子（ファイル名の後にくっ付いているドット以降の文字列（例：.pngとか.jpg）を確認すれば、どのフォーマットかが分かる筈です。
なお、ファイル容量は200KB以下が条件になっています。

では、早速、作成してみましょう！

例として、以下の画像ファイルを用意しました。

そうです、私サイト管理者のアバター画像です。
大きさは200×200ピクセルで容量は約26KBです。

作成するファビコンは、マルチアイコンにします。

マルチアイコンというのは、一つのファイルの中に、複数の画像サイズが混在するファイルのことです。

ウェブブラウザでの表示では16×16サイズ（単位：ピクセル）、デスクトップにショートカットを置いた場合は32×32サイズ、エクスプローラーでアイコン表示にした場合は48×48サイズが必要になりますので、本説明では、とりあえず、この３つのサイズから構成されるマルチアイコンを作成してみることにします。

「16×16用画像ファイルを選択」をクリックして下さい。

画像ファイル選択のダイアログが表示されますので、対象のファイルをクリックして選択し、「開く」をクリックします。

すると、選択したファイルがページに表示されました。

以降、「32×32用画像ファイルを選択」と「48×48用画像ファイルを選択」も同様に行って下さい。

そうすると、以下のようになっている筈ですので、下段の「favicon.ico作成」をクリックして下さい。

以下のような画面になりますので、「ダウンロード」をクリックして、自身のパソコン内の適当な場所に保存して下さい。

なお、プレビュー画像も同時に表示されているかと思います。実際の表示の具合を確認できるのは有り難いですね。

作成は、これで終了です。お疲れ様でした。

このページのトップへ

ファビコンの設定方法

お次は、ファビコンの設定方法です。

作成したファビコン・ファイル（favicon.ico）を、FFFTPなどのFTPソフトを使って自身のパソコンからサイトのルートディレクトリに転送（設置）します。

ルートディレクトリというのは、サイトフォルダの直下のことです。
ホームページ（サイト）は、htmlファイル、phpファイル、画像等のイメージファイルから構成されていて、基本的に一つのフォルダに全てが格納されています。
このフォルダのことをサイトフォルダと呼んでいます。

以下の画像は、サイトフォルダ「softhikaku」を開いた例です。

ここにファビコン・ファイル（favicon.ico）を保存すればOKです。

最後に、サイトフォルダ内のindex.htmlやその他のHTMLファイル内に以下のソースを記述します。
上段と下段の違いは、rel属性に”shortcut icon”の記述が有るか無いかです。
それぞれtypeから改行されていますが、実際は一つながりのソースです。
https://example.comの部分は、ご自身のサイトのURLに読み替えて下さい。

”shortcut icon”と記述するのは、ブラウザのInternet Explorer（IE）8以前のバージョンに対応する場合だそうで、現状ではIE8を使っている人は殆どいないため不要かと思いますが、記述しておいても害は無いこと、また閲覧者側でどのブラウザを使用しているか分からないため、念のため、２つとも記述しておかれた方が良いようです。

なお、上記のソースは、ファビコンを表示させたいページのHTMLファイル全てに記述する必要がありますので、ご注意下さい。

記述する場所は、<head>セクション内なら何処でも良いことになっているようですが、</head>の直前に記述するようにすれば間違いないでしょう。