1枚の画像から全サイズを作るファビコン 作成ツール
左側に画像を読み込み必要なサイズを選ぶと、右側にプレビューがすぐに並びます。生成ボタンを押す必要はなく、複数サイズを含むfavicon.icoと貼り付けるheadコードまで一緒に作ります。画像がブラウザの外に出ることはありません。
画像を読み込む
ここに画像をドラッグしてください
PNG · JPG · WEBP · SVG · 正方形に近い画像が最適です
作るサイズ
オプション
生成結果
- 元画像
- —
- 選んだサイズ
- —
- 作ったファイル
- —
- 合計容量
- —
サンプル画像を表示しています。ご自身の画像を読み込むとそのまま切り替わります。
headに貼り付けるコード
生成はブラウザ内のCanvasだけで行います。画像はどこにも送信されず、favicon.icoは16・32・48ピクセルを一つのファイルにまとめ、ブラウザが場面に合うサイズを選べるようにします。
すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
ファビコン 作成ツールの使い方
ファビコンはブラウザのタブやブックマーク、ホーム画面のショートカットでサイトを代表する小さな目印です。ただ縮小すればよさそうに見えて、16ピクセルで識別できながら512ピクセルのホーム画面でも鮮明である必要があるため、サイズごとに用意したほうが安全です。
このファビコン 作成ツールは画像1枚を受け取り13サイズを一度に作り、ブラウザが実際に探す複数サイズのfavicon.icoとheadに貼るHTMLまで用意します。処理はすべてブラウザ内で完結するので、ロゴの原本が外に出ることはありません。
ファビコンはどこに表示されるか
同じ図柄が複数の場所に異なるサイズで入ります。どこで使われるかを知ると、どのサイズを残すかを判断できます。
- ブラウザのタブとアドレスバー — 実際に見えるのは16・32ピクセルです
- ブックマーク一覧と履歴 — 32・48ピクセル
- iOSのホーム画面ショートカット — 152・167・180ピクセル
- Androidのホーム画面とPWAインストール — 192・512ピクセル
- 検索結果のアイコン — 48ピクセルの倍数が推奨されます
このツールが画像を扱う仕組み
ファイルを選ぶとブラウザが画像をメモリに読み込んでCanvasに描き、選んだサイズごとに描き直してPNGとして書き出します。アップロードの工程がないため即座に反応し、元のファイルには手を加えません。
- サイズやオプションを変えるとボタンなしでプレビューが更新されます
- 各サイズは元画像から直接描くので中間工程による画質損失がありません
- 描き直す過程で撮影情報などのメタデータは失われます
画面の順番どおりに進める
左の列が入力と設定、右の列が結果です。上から下へ一度たどれば保存まで終わります。
- 左のパネルに画像をドラッグするか、ファイルを選ぶを押します
- 作るサイズで不要なチップを押して外します
- 正方形でなければ自動切り抜きを、ロゴが端に接していれば余白追加を有効にします
- 出力形式でPNG・ICO・両方のいずれかを選びます
- favicon.icoまたはZIPを保存し、下のheadコードをコピーします
favicon.icoに複数サイズを入れる理由
ICOは一つのファイルに複数の解像度を収められるコンテナ形式です。ブラウザやOSは場面に応じて必要なサイズをその中から選ぶため、16ピクセルしか入っていないICOは大きな場所でぼやけます。
- このツールのfavicon.icoは16・32・48ピクセルを一括で収めます
- サイト直下に置けば宣言なしでもブラウザが探し当てます
- 大きなアイコンはICOではなくPNGで置きheadから参照するほうが軽量です
PNGとICOの使い分け
二つは競合する形式ではなく、届く相手が違います。多くのサイトは両方を用意します。
- PNG — 最新ブラウザとモバイルホーム画面の標準形式です
- ICO — 旧いブラウザやWindows環境は直下のfavicon.icoを先に探します
- PNG + ICOを同時に作ればどちらで開いてもアイコンが空になりません
元画像を選ぶ基準
小さくすると残るのは形と色のコントラストだけです。元が複雑だよ16ピクセルでつぶれます。
- 512ピクセル以上で正方形に近い画像を用意します
- 文字を入れる場合は1〜2文字までにとどめます
- 細い線やグラデーションは小さなサイズで消えます
- 背景色が不明なら透過背景のPNGが安全です
headスニペットの貼り付け先
生成したファイルをサイトに置いたあと、右下のコードをHTMLのhead内に貼り付けます。パスは実際に置いた場所に合わせて直します。
- link rel="icon" はブラウザタブのアイコンを指定します
- link rel="apple-touch-icon" はiOSのホーム画面用です
- manifest.json のicons項目がAndroidとPWAのインストールアイコンを担います
- 直下のfavicon.icoは宣言なしでも自動で探索されます
実際の例で手順をたどる
1024ピクセルの正方形ロゴで一般的なウェブサイト向けセットを作る場合を考えます。最小限の構成は次のとおりです。
- 16・32・48を有効にしたままfavicon.icoを保存します
- 180を有効にしてapple-touch-icon.pngを作ります
- 192・512を有効にしてPWAアイコンを作ります
- すべてZIPを受け取り、サイト直下に展開してheadコードを貼ります
ありがちな失敗
ファビコンはキャッシュが強く残る資源なので変更後の確認が難しいです。次の四つがほとんどの原因です。
- 古いアイコンが残る — ブラウザとCDNのキャッシュを消して強制再読み込みします
- 16ピクセルでつぶれる — 元が細かすぎます。形を単純化します
- ホーム画面アイコンだけ切れる — 余白追加を有効にして安全域を確保します
- 透過が黒くなる — PNG項目を書き出しているか確認します
公開前に確認すること
公開直前に下の項目を順に見ておくと差し戻しが減ります。
- favicon.icoがサイト直下にあるか
- headコードのパスが実際のファイル位置と一致するか
- 180ピクセルのアイコンがiOSの角丸めで切れていないか
- 192・512がmanifestに登録されているか
- 実際のタブで16ピクセルの形が識別できるか
よくある質問
読み込んだ画像はサーバーに送られますか。
送られません。ファイルを選ぶ時点から保存まで、すべての処理がお使いの端末のブラウザ内で完結します。ロゴの原本が外に出ないので、未公開の素材でも安心して扱えます。
どんな元画像を用意すればよいですか。
512ピクセル以上で正方形に近いPNGが最も安全です。縦横比が違う場合は自動切り抜きが中央を基準に切り取ります。小さな画像から始めると大きなサイズがぼやけるので、元は大きめに用意してください。
favicon.icoはどこに置きますか。
サイト直下、つまりドメインのすぐ下に置くのが慣例です。その場所にあればheadに何も書かなくてもブラウザが自動で探します。別の場所に置く場合はパスを明示してください。
ファビコンを変えたのに古いままです。
ファビコンは特にキャッシュが長く残る資源です。まず強制再読み込みを試し、それでも残るならファイル名にバージョンを付けるかCDNキャッシュを消します。タブを開き直すだけでは更新されないことが多いです。
透過背景は保たれますか。
PNGなら保たれます。このツールのICOもPNGを収める方式なので透過度が生きています。ただしダークモードのタブでは暗いロゴが埋もれることがあるので、実際のタブで一度確認してください。
正方形でない画像はどうなりますか。
自動切り抜きが有効なら短い辺を基準に中央を切り取ります。無効の場合は正方形の中に収めるため、余った部分は透明のままになります。横長のロゴはあらかじめ切っておくと結果が整います。
余白追加はいつ使いますか。
ロゴが四角の端まで詰まっているときです。iOSのホーム画面のようにアイコンの角を丸く削る環境では端が切れて見えますが、5%の余白を入れると安全域ができます。
PWAに必要なサイズはどれですか。
192ピクセルと512ピクセルが事実上必須です。両方を作ってmanifestのicons項目に登録すれば、Androidのインストールアイコンとスプラッシュ画面が正しく表示されます。512はマスク対応用の元にもなります。
SVGファビコンも作れますか。
SVGを読み込んで各サイズのPNGに変換することはできますが、ベクターのまま書き出す機能はありません。SVGファビコンを使う場合は元のSVGをheadで直接宣言し、旧ブラウザ向けにここで作ったICOとPNGを併置すると安全です。
参考にした資料
アイコン宣言とサイズ規格の公式ドキュメントです。