favicon作成の使い方
- 元になる画像を選びます（ロゴやアイコンなど。正方形に近い画像がおすすめです）。
- 「切り抜き」で、正方形にトリミングするか、全体を収めて余白を付けるかを選びます。
- 背景を「透過」か「白」から選び、「アイコンを生成」を押します。
- 各サイズの画像と、HTMLに貼り付けるコードが表示されます。「ZIPで一括保存」でまとめてダウンロードできます。
- 生成したファイルをサイトのルート（一番上のフォルダ）に置き、表示されたコードを<head>内に貼れば設定完了です。
faviconとは？
faviconは、ブラウザのタブやブックマーク、検索結果に表示される小さなアイコンです。サイトの顔になるため、設定しておくと信頼感が増し、タブをたくさん開いていても見つけやすくなります。スマホのホーム画面に追加されたときのアイコンにも使われます。
どんな画像を選ぶときれいに仕上がる？
faviconはとても小さく表示されるため、細かい文字や複雑な絵は潰れてしまいます。シンプルな図形や、1〜2文字のロゴが向いています。正方形に近い画像で、余白が少ないものを選ぶと、小さくしても見やすくなります。
こんな場面で使えます
- ブログや個人サイトを作ったとき：タブにアイコンが出るようになります。
- WordPressなどでアイコンを用意したいとき：必要なサイズをまとめて作れます。
- Webアプリ（PWA）を作るとき：192px・512pxのアイコンも同時に用意できます。
よくある失敗と対処
- 反映されない：ブラウザがfaviconを覚えている場合があります。時間をおくか、キャッシュを消して確認してください。
- アイコンが潰れて見える：元の画像をシンプルにするか、「全体を収める（余白）」を選んで試してください。
- 背景が黒く見える：透過の画像は、ブラウザの背景色の上に表示されます。背景色を「白」にすると安定します。
faviconのよくある疑問
どのサイズが必要？
ブラウザのタブ用に16・32px、iPhoneのホーム画面用にapple-touch-icon（180px）、Android/PWA用に192・512pxが定番です。本ツールはこれらをまとめて作成します。
.ico と .png どっちがいる？
従来型の favicon.ico（16/32/48を内包）と、モダンな用途のPNG群の両方を用意すると安心です。表示される<link>コードをそのまま貼ればOKです。
最終更新：2026年10月