ファビコンの作成過程
2015/06/02
ファビコン(favicon)は、favorite iconの略で日本語に直訳するとお気に入りアイコンです。
ブラウザでサイトを表示している時にタブのサイト名の横に小さいアイコンが表示されているそのアイコンです。
ファビコンはICO形式またはPNG形式またはGIF形式で作成できます。
ですが、Internet Explorer 10以下はICO形式にしか対応していないのでICO形式で作成するのが無難そうです。
ICO形式は一つのファイルに複数の色数・サイズのアイコン画像を含めることができます。
ICO形式のファイルに複数入れたアイコン画像の内どの色数・サイズの画像が使用されるかはOS,ブラウザ,使用の仕方(デスクトップのショートカットにするかブラウザで表示するか等)で様々です。
自己調査したところ16x16ピクセルのアイコンと32x32ピクセルのアイコンがよく使用されるようです。
Internet Explorer 11では、タブやお気に入りには、16x16ピクセル、新しいタブを開いた時に「よくアクセスするサイト」という画面が開くのですが、そこでは、32x32ピクセルが使用されています。
WindowsのExplorerでのあらゆる表示サイズにも対応させるとかMacにも対応させるとかあらゆる機種のスマートフォンやタブレットでの表示にも対応させるとか考えだすといろんなサイズのアイコンをを用意しなければならず切がなくなってしまいます。
また一つのICO形式のファイルにいくつものサイズのアイコンを入れるとそれだけファイルサイズが大きくなりますのであまり沢山詰め込むのも良くないと自分は考えます。
という分けで、16x16ピクセルと32x32ピクセルの2つのサイズのアイコン画像を含めたICO形式のファイルを作成することにしました。
まず最初に作ってみたアイコンはサイトのタイトルをそのまま入れたものを作ってみました。
次のような感じに。
シコウ
ダス
作ったアイコンをお見せしたいのですが、使用したフォントのライセンスの問題でお見せすることが出来ません。
色は非常口が頭に思い浮かんだのでそのイメージで緑の背景に白い文字です。
前回の記事でフォントのライセンスのことで書いているのですが、このアイコンを作っている時はフォントのライセンスのことは全く頭になかったです。
このアイコンは32x32ピクセルなら問題ないのですが16x16ピクセルのサイズにすると何が書いてあるのかわからないものになってしまいました。
次は他のサイトでもよくあるサイトのタイトルの頭文字をアイコンにしようと考えました。
このサイトですと「シ」になるのですが、縁起の悪いものが連想されてしまいそうですので、漢字の「思」にしました。
アイコンを作っている時は思いつかなかったのですが、今では、「S」という方法もあったなと思っています。
これも、使用したフォントのライセンスの問題でお見せすることが出来ません。
その後文字の大きさを変たりフォントを変えたり「思考」の2文字で作ってみたり何パターンか作ってみました。
どれも、使用したフォントのライセンスの問題でお見せすることが出来ません。
文字以外に絵も考えました。
これです。
16x16
32x32
人の頭部を横から見たもので、頭の中にあるものを出すというイメージで頭の中から外に向かって矢印を描きました。
もちろん物理的なものを出すという意味ではなく論理的なものを出すという意味です。
そんなこんなで全部で6パターン作りその中からいいのを選ぼうと思って決まったのが漢字の「思」のアイコンです。
ですが決定してから気になったことがあり調べたのが前回の記事で、フォントのライセンス的に使っていいかどうか分からないので、フリーフォントに変更して作り直しました。
これです。
16x16
32x32
「源柔ゴシック」というフリーフォントを使用させていただきました。
フリーフォントに変更する前も丸ゴシックのフォントでそれが気に入っていたので丸ゴシックから離れられませんでした。
文字を太字にしたり背景色を変えたり微妙に変えた4パターン作りその中からこれに決定しました。
これで画像は決まりましたので次はICO形式のファイル作成です。
ここまで自分はPNG形式で画像を作成してきました。
PNG形式の画像をICO形式のファイルにする必要があります。
今回こちらのサービスを使用させていただきました。
http://ao-system.net/favicon/index.php
これでICO形式のファイルの完成です。
次にICOファイルをサーバーにアップロードするのですが、独自ドメインの場合ドキュメントルートにfavicon.icoのファイル名でアップロードするとInternet Explorerを含め一部のブラウザはそれだけでファビコンが表示されるようになります。
独自ドメインでない場合やドキュメントルートのfavicon.icoのファイルに対応していないブラウザでもファビコンを表示させるにはHTMLドキュメントの<head>と</head>の間に次のlinkタグを追加します。
<link rel="shortcut icon" href="[ICOファイルのURL]" type="image/vnd.microsoft.icon" />
<link rel="icon" href="[ICOファイルのURL]" type="image/vnd.microsoft.icon" />
[ICOファイルのURL]という個所は自分がアップロードしたICOファイルのURLに書き換えます。
WordPressでは管理画面で [外観]→[テーマの編集]→[ヘッダー] でこれらのタグが既にある場合はICOファイルのURLを表示させたいICOファイルのURLに変更、ない場合は追加します。
2015年5月18日現在のウィキペディアによると2つのlinkタグ「両方指定するのが望ましい」とありますが、このサイトでは使用しているテーマのSTINGER5のデフォルトの状態がrel="shortcut icon"の方し使用していませんでしたのでそれに準じています。