使い方

「文字」を選んで、色を指定して1～2文字を入力するか、「画像」を選んでロゴを指定します（正方形で、512 px以上の画像がおすすめです）。
各サイズのプレビューを確認します。特にブラウザーのタブに表示される16 pxと32 pxを確認してください。
ZIPをダウンロードし、中のファイルをウェブサイトのルートフォルダーにアップロードします。
HTMLタグをページのheadセクションに貼り付け、必要に応じてsite.webmanifest内の名前を変更します。

仕組み

ブラウザーやデバイスによって、アイコンを参照する場所は異なります。このツールでは、一般的なケースに対応したアイコン一式を作成できます。favicon.ico には、ブラウザーのタブやブックマーク、/favicon.ico を自動的に要求する古いソフトウェア向けに、16、32、48 px の画像を格納します。HTMLのlinkタグで参照する16 pxと32 pxのPNGファイル、iPhoneやiPadのホーム画面にサイトを追加したときに使われる180 × 180のapple-touch-icon、Androidのホーム画面やインストール可能なウェブアプリ向けにsite.webmanifestから参照する192 pxと512 pxのアイコンも作成します。

favicon.ico ファイルには、ICOコンテナ内にPNG画像としてアイコンが保存されます。現在のすべてのブラウザーとWindows Vista以降で読み取れます。ICOファイルとZIPファイルはこのページ内のコードで作成され、サーバーには送信されません。

小さいサイズでは、シンプルなデザインが必要です。16 × 16ピクセルでは細い線や小さな文字が見えなくなるため、文字入りのロゴ全体よりも、太字の1文字や簡略化したロゴマークが適しています。画像は高品質な方法で段階的に縮小されます。apple-touch-iconには常に不透明な背景色が設定されます。iOSでは透明部分が黒く表示され、角はiOS側で丸く処理されるためです。

新しいアイコンをアップロードしても、ブラウザーはキャッシュを長期間保持するため、古いfaviconがしばらく表示されることがあります。強制再読み込みをするか、/favicon.ico を直接開くと解決することが多いです。

使用例

新しいプロジェクト用の文字アイコン

濃い緑色の角丸四角形に白い「TG」を入力すると、ロゴをデザインしなくても、ブラウザーのタブで16 × 16 pxのサイズでも読みやすい、すっきりしたアイコンを作れます。

既存のロゴからアイコンを作成

背景が透明な1024 × 1024のPNGロゴをアップロードし、「画像全体を表示」に設定すると、タブアイコンは透明になり、apple-touch-iconにはブランドカラーの背景が付きます。

横長のロゴ

1200 × 300のワードマークで「中央を切り抜く」を選ぶと、中央の文字だけが残ります。「画像全体を表示」ではすべてが収まりますが、とても小さくなります。別途、正方形のロゴマークを使うほうが見栄えよく仕上がります。

よくある質問

今でもfavicon.icoは必要ですか？

今でも役立ちます。ブラウザーやフィードリーダー、一部のツールは、linkタグがなくてもサイトのルートにある /favicon.ico を要求することがあります。最新のブラウザーは、HTMLで参照されるPNGアイコンも使用します。

ファイルはどこに配置すればよいですか？

ウェブサイトのルートフォルダー、つまりホームページと同じ場所にアップロードしてください。そうすれば、/favicon.ico とHTML内のほかのパスが機能します。サブフォルダーを使う場合は、linkタグとsite.webmanifest内のパスを変更してください。

古いfaviconが表示されるのはなぜですか？

ブラウザーはfaviconを別々に、かつ長期間キャッシュします。強制再読み込みを試すか、新しいタブで /favicon.ico を開くか、プライベートウィンドウで確認してください。favicon-v2.ico のようにファイル名を変更しても、再読み込みを促せます。

SVG faviconも作成できますか？

いいえ。どこでも使えるPNGファイルとICOファイルを作成します。すでにSVGロゴがある場合は、これらのファイルに加えて、type属性をimage/svg+xmlにしたlinkタグを使って追加できます。

プライバシー

アイコン、ICOファイル、ZIPファイルはブラウザー内で作成されます。画像やテキストがアップロード、保存されたり、アクセス解析に含まれたりすることはありません。