ライフハック.net

favicon(ファビコン)の作り方 サイトアイコンの作成方法

サイトを作ったら、favicon(読み方:ファビコン)を作成、表示させてみましょう。
favicon(ファビコン)とは、サイトのシンボルマークとして表示させる小さなアイコンです。
ブラウザのアドレス欄や、タブの端、お気に入り、ブックマーク項目の先頭などに表示されます。

GoogleChromeの場合↓↓↓
favicon01

Firefoxの場合↓↓↓
favicon02

有名なサイトや大手企業サイトのロゴだけでなく、誰でも自分のサイトやブログなどに表示させることができます。
favicon(ファビコン)を作ることで、タブをたくさん開いたブラウザやお気に入りからも、あなたのサイトを目立たせ、探しやすくしてくれます。
また、ファビコンがあると一般的な訪問者に「キチンとしたサイト」という印象を与える効果があります。
それでは、ファビコン用の画像を簡単に作ってみましょう。

ファビコン用の画像を「.ico」形式のアイコンファイルにまとめる

ファビコンを簡単に作ることの出来るサービスがいくつかありますが、今回はブラウザ上で使用できる「x-icon editor」という、ファビコン作成サービスを利用します。
↓↓↓
x-icon editor

ファビコンに使いたい元の画像を用意し、アップロードするだけで、簡単にファビコンが作れます。

ファビコンに適した画像サイズは、使われる場所によって表示されるサイズが変わるため、「16×16」「24×24」「32×32」「64×64」の4種類があるとよいでしょう。

これらの画像は、「.ico」形式でひとまとめにし、所定の位置にアップして使います。

「x-icon editor」を使うと、元の画像をこれら4サイズに自動生成して「.ico」形式にまとめてくれますので簡単です。

  1. 「1.Import」ボタンをクリック。
  2. xicon01

  3. 「Upload」ボタンをクリックし、用意した画像をアップロード
  4. xicon02

  5. 四角囲みの中に表示されるので、調度良いサイズに切り取る
  6. 表示されている4サイズにチェックマークが入っていることを確認して「OK」ボタンをクリック。
  7. xicon06

  8. 「3.Preview」ボタンをクリックすると、別のタブでプレビューが表示される
  9. xicon04

    xicon03

  10. これで問題なければ、「4.Export」ボタンをクリックすると、「favicon.ico」というファイル名で出力されるので、任意のフォルダに保存
  11. xicon05

英語表記ですが、感覚的に使えますのでおそらく使い方に困ることはあまりないでしょう。
「x-icon editor」はエディターなので、こだわり派の方はじっくり描くこともできますが、簡単に作るには画像を用意したほうが手っ取り早いです。

用意する画像は、ファビコンの一番大きいサイズ「64×64」以上の正方形にします。
あまり複雑なデザインを使用しても、小さくなるとつぶれてしまいますので、シンプルなデザインにすることをオススメします。

スポンサードリンク
URL :
TRACKBACK URL :

コメントをどうぞ

*
*
* (公開されません)

Facebookでコメント

Return Top