てぶら

ファビコン生成

1枚の画像から、favicon.ico(16・32・48pxを内包)とApple Touch Icon・Android用など各サイズのPNG、そして<head>に貼り付けるHTMLタグまでを一括生成します。すべての処理はブラウザ上(Canvas API)で完結し、画像が外部に送信されることはありません。

ファビコン生成について

ファビコンは、ブラウザのタブやブックマーク、スマートフォンのホーム画面に表示される小さなアイコンです。サイトの識別性を高めるだけでなく、検索結果にも表示されるため、Webサイトの第一印象を左右する重要な要素です。近年はタブ用の16・32pxに加え、Appleのホーム画面用(180px)やAndroid用(192・512px)など、用途ごとに複数のサイズを用意するのが一般的になっています。

従来のfavicon.icoは、1つのファイルに複数解像度の画像を内包できるアイコン形式で、ブラウザが表示場所に応じて最適なサイズを選びます。このツールは元画像から必要なサイズを一括生成し、favicon.ico・各PNG・貼り付け用のHTMLタグまでまとめて出力するため、面倒なサイズ調整やタグ記述の手間を省けます。処理はすべてブラウザ内で完結します。

主な使い方

  • 1作成したロゴ画像からWebサイト用のファビコン一式を生成する
  • 2favicon.icoと各サイズPNG、HTMLタグをまとめて用意する
  • 3スマホのホーム画面追加用(Apple Touch Icon)のアイコンを作成する
  • 4既存サイトのファビコンを新しいロゴに差し替える

よくある質問

Q. どんな画像を用意すればよいですか?

A. 正方形で、できるだけ大きい(512×512px以上)画像を推奨します。長方形の画像も処理できますが、正方形に縮小されるため縦横比が崩れる場合があります。

Q. 生成したファイルはどこに置けばよいですか?

A. favicon.icoと各PNGをサイトのルート(公開ディレクトリ直下)に置き、生成されたHTMLタグを<head>内に貼り付けてください。

Q. 画像はサーバーにアップロードされますか?

A. いいえ。画像の読み込みからアイコン生成まですべてブラウザ内(Canvas API)で完結し、画像が外部に送信されることはありません。

生成ツールの一覧を見る →