ファビコンを作ってみよう

ファビコン（Favicon）とは・・・

ブラウザのタブのタイトルの左側に表示されるアイコンで、お気に入りに追加した際もサイトのシンボルとしてタイトルの前に表示される。

つまり、お気に入りアイコン「Favorite icon」という意味なのです。

今回は、WordPressサイトにファビコンを追加する方法を説明します。

アイコンにする画像を作る

画像の種類

WordPressのプラグインで「.gif」「.png」なども選択できるのですが、WindowsのIEなどでも正常に表示させるため「.ico」という拡張子を持つファイルタイプで作成するほうが良いでしょう。

画像の解像度

ファビコンに使用する画像は、16×16・32×32・24×24・48×48・64×64・128×128など複数の解像度と、16色・256色・1600色など複数の色数を持つマルチデータ「.ico」として保存します。

HTMLサイトの場合も、これからの説明と同じ方法で作ります。今回は多くのブラウザに対応できる「favicon.ico」というファイルを作ることにしましょう。

用意するもの

画像は自分で書いたものでも、写真の画像からでも作成できます。

なので、画像が変換出来て自分でもテキストなど加工のできるツールであれば何でもOKです。

ちなみに、このHoxmoのブログのfaviconは、「Illustrator」で書き「Photoshop」で調整をした後、「@icon変換」で変換して作っています。

Windowsであれば「ペイント」でも作れますし、高度な加工をする場合は「GIMP」などの無料ソフトで作れます。

MACの場合はプレビューだけで元画像を加工することも可能です。

画像は標準のアプリケーションを使い、無料のアイコン作成ソフトはダウンロードして使用します。「@icon変換」「アイコンウィザード」「Wety's Icon」「IcoFX」など検索すると色々ありますのでお好きなモノを利用してください。

元画像をつくる

写真の画像を元にする場合は、「アイコンウィザード」を使うと簡単にできます。

例えば、スマホで撮影した様な横長の写真を「アイコンウィザード」のアイコンにドラッグ＆ドロップすると下のように写真サイズの縦横比で画面が開きます。

「余白なしまで拡大」にチェックを入れると・・・

正方形に切り抜きたい部分を選ぶことが出来ます。

余白の白部分を透過にする事もできます。

あとは画面の指示通りに進んでいき保存すると「.ico」の出来上がりです。

ペイント等で自分で文字などを書く場合、ペイントツールで作成できます。

新規作成でピクセルを48×48にしてパレットを一旦作り、ここに文字や絵を書いていくのですが、パレットが小さくて書きづらいのでサイズを400%とか大きくして絵を描いてから再度サイズ変更で25％に縮小すると、作りたいサイズの48×48が出来上がります。

絵や文字を描いて・・・

「.png」などで保存します。

この「.png」画像を、「@icon変換」などで、「.ico」に変換して出来上がりです。

きれいな画像を作成する場合は「GIMP」等の無料ドローソフトを利用すると良いでしょう。

また、「.ico」への変換は、『http://ao-system.net/favicon/index.php』などのWebサービスで無料で作成することも出来ます。

これで画像は出来ました。

説明ではペイントで描いた以下の分かりやすい画像を使用していきます。

WordPressに登録する

「WordPress」にログインします。

親テーマで「BlogoLife」を使用している場合

「メディア」の「新規追加」から作成した「.ico」ファイルをアップロードします。

アップロードが終わったら、「編集」をクリック。

編集画面の右側に画像のURLがあるのでコピーします。

では、テーマの設定画面で設定を行います。

「外観」→「Wplook Panel」→「General Settings」の画面を開きます。

中程に「Favicon URL」があります。現在デフォルトのファビコンになっていますので、ここのURLの所に先ほどコピーしたファビコンのURLをペーストして書き換えます。

書き換え後は下の「Save All changes」をクリックして確定しておきます。

これでタブにファビコンが表示されました。

ファビコン設定が無いテーマを使用している場合

他のテーマを利用している場合で、ファビコンの設定がない場合を説明します。

下の画像は、グリッドテーマをテストしているサイトで、このブログと同内容なのですが、現在はデフォルトのファビコンが表示されています。

このテーマは、ファビコンの設定画面が無いので、プラグインを利用して設定します。

「プラグイン」の「新規追加」を選びます。

「Favicon Rotator」というプラグインを検索し・・・

「いますぐインストール」をクリックします。

インストールが終了したら、「プラグインを有効化」します。

つぎに、ファビコンの設定です。

「外観」→「Favicon」を表示すると以下の画面が表示されます。

この画面で「Add Icon」ボタンをクリックして画像をアップロードします。

アップロードが終わると画像が表示されますので、「Add Browser Icon」をクリックします。

次に、他のデバイス用のアイコンをセットします。

「Set Icon」をクリックし同様に画像をアップロードします。

この画面に戻ったら、下の「変更を保存」をクリックして確定します。

これで、ファビコンが適用されました。

HTMLサイトでファビコンを使う場合

HTMLのヘッダー部分に以下の例のようなソースを記述します。

[code language="HTML"]

<link href="favicon.ico" rel="SHORTCUT ICON" />

[/code]

「index.html」と「favicon.ico」を同じ階層にアップロードした場合ですが、上記の記述は一例であり記述方法は他にもあります。

このような形で、簡単にファビコンを設定することが出来ます。