256px
128px
64px
32px
16px

このツールについて

このファビコン作成ツールは、1〜2 文字または絵文字を、選んだ背景色、文字色、形のファビコンにし、256、128、64、32、16 px の PNG ファイルとして書き出します。

使い方

  1. 1〜2 文字を入力するか、絵文字を貼り付けます。
  2. 背景色と文字色を選びます。
  3. 形を四角、角丸、円から選びます。
  4. 必要なサイズの PNG をダウンロードします。

知っておきたいこと

  • ブラウザのタブではファビコンが 16 × 16 px で表示されるため、太くシンプルな形が見やすくなります。
  • 最新のブラウザは <link rel="icon" type="image/png" href="/favicon-32.png"> で PNG のファビコンに対応しています。
  • Apple タッチアイコンは通常 180 × 180 px です。256 px で書き出したものを縮小して使えます。
  • 描画されるのは、テキストの最初の 2 文字だけです。
  • 画像はお使いの端末上で Canvas API を使って描画されます。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問

ファビコンのサイズはどれくらいにすべきですか?

ブラウザのタブ用に最低 32 × 32 px を用意し、さらに Apple タッチアイコン用の 180 px や、Web アプリマニフェスト用の 192 px・512 px など大きなサイズも用意しましょう。

Web サイトにファビコンを追加するには?

PNG をアップロードし、HTML の head 内に <link rel="icon" type="image/png" href="/favicon-32.png"> を追加します。

絵文字をファビコンに使えますか?

はい。テキスト欄に絵文字を貼り付けて PNG をダウンロードしてください。お使いのシステムの絵文字フォントで描画されます。

favicon.ico ファイルはまだ必要ですか?

PNG に対応している最新のブラウザでは不要です。ただし古いツールやブラウザの中には今も /favicon.ico を探すものがあるため、互換性のために残しているサイトも多くあります。