favicon(ファビコン)の作り方

ブログ

このブログにfavicon(ファビコン)をつけました。

faviconとは、ウェブサイトのシンボルマークとして、ブラウザのアドレスバーやブックマークなどに表示されるアイコンです。

favicon

faviconを覚えてもらえば、たくさんのタブを開いているときに、自分のサイトを簡単に見つけてもらえるメリットがあります。

今回、自分で一から作ってみましたが、思った以上に苦労したので、ここに書き留めておきます。

デザイン

最初に、どのようなfaviconを作るかを決めなければいけません。

いろいろ試してみたいこともあって、上のようなデザインにしました。

バックの画像は、自分のプロフィール写真の画像の一部を使っています。

ペイントで丸く切り抜く

まず、画像を丸く切り抜くためのツールを探しました。

どうやらWindowsに標準で入っている「ペイント」でできそうだということが分かりました。

ペイントで画像を丸く切り抜く方法は別の記事にまとめました。

ペイントで画像を丸く切り抜く方法

ぴったりの大きさで正方形に選択する

faviconにするためには、ペイントで画像を丸く切り抜くときに、できるだけ画像にぴったりに正方形で選択する必要があります。

画像にぴったりでないと、表示されたときに小さくなってしまいます。

正方形でないと、faviconとして表示したときに画像が歪む恐れがあるそうです。これは試していませんが、faviconを作るときにそのようなエラーがでました。

ここが一番めんどうでした。

ペイントでは、選択範囲を後から調整できません。調整しようとしても、画像が歪むだけです。正方形に選択するのにも、選択してから、確認するしかありません。ペイントで選択するときには、「Sift」キーを押しながらドラッグすると正方形になるという技が使えません。

正方形かどうか確認するためには、選択したあとに「イメージ」の「サイズ変更」をクリックするしかないようです。

サイズ変更

サイズ変更

ここで「単位(B):」の「ピクセル」クリックして、水平方向と垂直方向のピクセル数が同じかどうかを確認します。

正方形

このようになっていればOKですが、違っていれば、選択からやりなおしです。

ぴったりと正方形に選択できたら、「トリミング」をクリックします。

文字の入力

丸の中に文字を入れました。

文字を入れるためには、「ツール」の「テキスト」を選択します。

テキスト

「テキスト」を選択した状態で、画像の上をクリックすれば、「テキストツール」が表示され、フォントや文字の大きさ、色を指定できます。

テキストツール

後は、画像の上でドラッグしながら位置を調整します。

サイズの変更

faviconでは、一般に16×16、32×32、48×48の画像を使います。

そこで3種類の画像を作成します。「サイズ変更」で「ピクセル」を確認しながら変更し、名前を変えて保存していきます。画像の形式はPNGにします。

透過PNG画像作成

ペイントで画像を保存すると、PNG形式でも透過でなくなってしまいます。

そのため、次のツールを使って、円の周りを透明にしました。

WEBブラウザ上で簡単に透過PNG画像を作成できるツール – PEKO STEP

faviconの作成

16×16、32×32、48×48の3つの画像をマルチアイコンにするために、次のサイトを使いました。

ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

faviconのアップロード

faviconをブログにアップロードします。

今は、WordPressのテーマにSimplicity2を使っています。Simplicity2にはファビコンを設定するメニューがありますので、そこから設定しました。

ところが、「.ico」のファイルをアップロードするときに、その形式のファイルはアップロードすることが許されていない旨のエラーメッセージをWordPressが表示します。

FTPで直接アップロードするか、「.ico」のファイルをアップロードできるようにするか、いろいろ考えましたが、あまりいじりたくないと考え、32×32のPNGファイルをアップロードすることにしました。

おわりに

こうしてfaviconが出来上がりました。

ペイントの切り抜きの部分は面倒なので、別のツールを使う方がいいかもしれません。透過PNG画像を直接作れるツールもあります。

faviconのアップロードは、一番簡単な方法で済ませたというところです。

  • このエントリーをはてなブックマークに追加

フォローはこちらからお願いします。

会社勤めから起業するためのウェブ集客セミナー
会社勤めから起業するための7つのステップ