このブログにfavicon（ファビコン）をつけました。
faviconとは、ウェブサイトのシンボルマークとして、ブラウザのアドレスバーやブックマークなどに表示されるアイコンです。
faviconを覚えてもらえば、たくさんのタブを開いているときに、自分のサイトを簡単に見つけてもらえるメリットがあります。
今回、自分で一から作ってみましたが、思った以上に苦労したので、ここに書き留めておきます。
デザイン
最初に、どのようなfaviconを作るかを決めなければいけません。
いろいろ試してみたいこともあって、上のようなデザインにしました。
バックの画像は、自分のプロフィール写真の画像の一部を使っています。
ペイントで丸く切り抜く
まず、画像を丸く切り抜くためのツールを探しました。
どうやらWindowsに標準で入っている「ペイント」でできそうだということが分かりました。
ペイントで画像を丸く切り抜く方法は別の記事にまとめました。
ぴったりの大きさで正方形に選択する
faviconにするためには、ペイントで画像を丸く切り抜くときに、できるだけ画像にぴったりに正方形で選択する必要があります。
画像にぴったりでないと、表示されたときに小さくなってしまいます。
正方形でないと、faviconとして表示したときに画像が歪む恐れがあるそうです。これは試していませんが、faviconを作るときにそのようなエラーがでました。
ここが一番めんどうでした。
ペイントでは、選択範囲を後から調整できません。調整しようとしても、画像が歪むだけです。正方形に選択するのにも、選択してから、確認するしかありません。ペイントで選択するときには、「Sift」キーを押しながらドラッグすると正方形になるという技が使えません。
正方形かどうか確認するためには、選択したあとに「イメージ」の「サイズ変更」をクリックするしかないようです。
ここで「単位(B):」の「ピクセル」クリックして、水平方向と垂直方向のピクセル数が同じかどうかを確認します。
このようになっていればＯＫですが、違っていれば、選択からやりなおしです。
ぴったりと正方形に選択できたら、「トリミング」をクリックします。
文字の入力
丸の中に文字を入れました。
文字を入れるためには、「ツール」の「テキスト」を選択します。
「テキスト」を選択した状態で、画像の上をクリックすれば、「テキストツール」が表示され、フォントや文字の大きさ、色を指定できます。
後は、画像の上でドラッグしながら位置を調整します。
サイズの変更
faviconでは、一般に16×16、32×32、48×48の画像を使います。
そこで３種類の画像を作成します。「サイズ変更」で「ピクセル」を確認しながら変更し、名前を変えて保存していきます。画像の形式はPNGにします。
透過PNG画像作成
ペイントで画像を保存すると、PNG形式でも透過でなくなってしまいます。
そのため、次のツールを使って、円の周りを透明にしました。
WEBブラウザ上で簡単に透過PNG画像を作成できるツール – PEKO STEP
faviconの作成
16×16、32×32、48×48の３つの画像をマルチアイコンにするために、次のサイトを使いました。
ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます
faviconのアップロード
faviconをブログにアップロードします。
今は、WordPressのテーマにSimplicity2を使っています。Simplicity2にはファビコンを設定するメニューがありますので、そこから設定しました。
ところが、「.ico」のファイルをアップロードするときに、その形式のファイルはアップロードすることが許されていない旨のエラーメッセージをWordPressが表示します。
FTPで直接アップロードするか、「.ico」のファイルをアップロードできるようにするか、いろいろ考えましたが、あまりいじりたくないと考え、32×32のPNGファイルをアップロードすることにしました。
おわりに
こうしてfaviconが出来上がりました。
ペイントの切り抜きの部分は面倒なので、別のツールを使う方がいいかもしれません。透過PNG画像を直接作れるツールもあります。
faviconのアップロードは、一番簡単な方法で済ませたというところです。
