ファビコン生成の使い方｜1枚の画像から favicon.ico と各サイズのアイコンを作る

この記事のサービス

ファビコン生成

1枚の画像から、各サイズのファビコンを一括で作成。

• 誰でも：登録しなくても使える

ファビコン生成を開く →

これで何ができるか

1枚の画像から、ブラウザのタブに出る小さなアイコン（ファビコン）を、使う場所ごとの大きさでまとめて作ります。favicon.ico（16・32・48px 入り）と、48・96・180・192・512px の PNG ができ、HTML に貼るコードも出ます。

使える人：だれでも（会員登録なし・無料）。画像はお使いのブラウザの中だけで処理し、サーバーには送りません。

はじめ方

まず動画で流れを見てください（音は出ません）。

1. ツールを開く：「元画像を選ぶ」と「生成する」のボタンが並んだ画面が開きます。
2. もとの画像を選ぶ：正方形で、背景が透明な PNG がおすすめです。読み込むと「画像を読み込みました。」と出ます。正方形でない画像は、真ん中を正方形に切り抜いて使います。
3. 「生成する」を押して保存する：明るい背景と暗い背景でどう見えるかと、favicon.ico・48×48・96×96・180×180・192×192・512×512 の6つが並びます。1つずつ「保存」するか、「すべて保存」でまとめて保存します。
4. コードを貼る：「HTMLの <head> に貼るコード」の「コピー」で3行のコードを写し、サイトの <head> に貼ります。ファイルはサイトのいちばん上の階層（トップページと同じ場所）に置きます。

ファビコン生成を開く →

よくある使い方

• 新しく作ったホームページにアイコンを付ける：ロゴの画像から作り、ファイルを置いてコードを貼るだけです。
• スマホのホーム画面に置かれたときのアイコン：180×180（iPhone・iPad）と 192×192（Android）も一緒にできます。
• 検索結果のアイコンが灰色の地球のまま：PNG の名前を変えただけの favicon.ico を使っていないか確かめ、このツールの favicon.ico に入れ替えます。
• JPG の画像から作る：「背景を白で塗る」にチェックを入れてから生成します。