使い方
- 「テキスト / 絵文字」を選んで 1〜3 文字を入力するか、「画像」を選んでロゴをアップロードします（SVG か、512 px 以上の正方形 PNG がおすすめです）。
- 色と形（四角・角丸・円）を選びます。
- 16・32・64・128 px のプレビューを確認します。小さいサイズで見ると、デザインが判読できるかがわかります。
- 「パッケージをダウンロード（ZIP）」で ZIP を保存し、ファイルをサイトのルートフォルダーにアップロードして、HTML を head に貼り付けます。
オプションの説明
- favicon.ico
- ブラウザのタブ、ブックマーク、Windows のショートカット用に 16・32・48 px の画像を含みます。
- apple-touch-icon.png
- 180 × 180 px、背景は塗りつぶし。iPhone や iPad のホーム画面にサイトを追加したときに使われます。
- icon-192.png / icon-512.png
- site.webmanifest から参照され、Android のホーム画面やインストール可能な Web アプリで使われます。
- icon.svg
- 最近のブラウザ向けの拡大縮小できるアイコン。素材がテキストか SVG ファイルの場合に含まれます。
HTML
ファイルをサイトのルートにアップロードしたら、すべてのページの head に次のコードを追加します。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">よくある質問
本当に必要なファイルはどれですか？
サイトのルートに favicon.ico があれば、すべてのブラウザに対応できます。iOS 向けには apple-touch-icon.png を、Android でサイトをインストールやピン留めしたときにきちんとアイコンを表示したい場合は、マニフェストと 192/512 のアイコンを追加してください。
16 px だとファビコンがぼやけるのはなぜですか？
16 × 16 ピクセルでは細かい部分がつぶれてしまいます。文字入りのロゴ全体ではなく、太い 1 文字やシンプルにしたロゴマークを使ってください。
ファビコンを更新したのに古いものが表示されます。
ブラウザはファビコンを強くキャッシュします。ページをスーパーリロードするか、link タグに /favicon.ico?v=2 のようなバージョン用のクエリを付けてください。
絵文字をファビコンにできますか？
はい。絵文字はお使いのシステムの絵文字フォントで描画されるため、プレビューで見たとおりの仕上がりになります。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。