creative-725811_640swe

favicon (ファビコン)を作成してくれる Web サービスを使ってみたので、メモ。

以前は、favicon といえば、フリーソフトをダウンロードして、オフライン環境(つまり、自分のPC )で作成する必要があった。今回のように Web サービスを使って、気軽にお手軽に作成ができるようになったことは、すなおにありがたいと思う。

Favicon Converter
Favicon Converter

1. Favicon Converter の使いかた

  1. Favicon Converter」にアクセスする
  2. favicon の元画像を選択する
  3. オプションで、サイズを選択する
  4. 元画像が正方形でないときは、オプションの「短い辺に合わせてカットする(トリム処理)」をチェックしておく
  5. オプションの色数を選択する
  6. 「アイコン作成」ボタンをクリックする(下図)

    元画像を選択して、各種オプションを選択
    元画像を選択して、各種オプションを選択
  7. favicon が作成される
  8. 作成された favicon は、自動的にダウンロードされる(下図)

    ダウンロードされた favicon
    ダウンロードされた favicon

2. favicon を設定する

作成された favicon を、FTPを使って、Web サイトのルート直下にアップロードする(下図)。

favicon をアップロード
favicon をアップロード

Web サイトでは、head 要素の中に、link 要素を記述して、favicon を表示させる(下図)。

link 要素の記述例
link 要素の記述例

3. まとめ

  • Favicon Converter」は、無料で使える Web サービス
  • ダウンロードされる favicon のファイル名は、ランダムに生成されるようだ。適当なファイル名に変えておこう
  • 多様なファイル形式に対応しているけれど、透過を使うなら「.png」か「.gif」である必要がある。元画像は、「.png」形式で作成するのが現実的だと思う
  • favicon を画像に変換する機能もある
  • favicon によるけれど、オプションのサイズは「64px」が現実的だと思う
  • これも favicon によるけれど、オプションの色数は、「256色に減色」が現実的だと思う