ファビコン作成
画像1枚からサイズ別のファビコンPNGとICO、埋め込みコードを作ります。アップロード不要、ブラウザ内で処理します。
ツールを準備しています。
ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
ファビコン作成の詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 元画像
- PNG・JPG・WebP・SVGの画像を1枚、20MBまで受け付けます。
- 最小サイズ
- 縦横ともに16ピクセル以上である必要があります。
- ICOの構成
- favicon.ico 1ファイルに16・32・48・64・128・256ピクセルを収めます。
- ICOの方式
- 64ピクセル以下は32ビットBMP、それより大きいサイズはPNGで入れます。
- PNG一覧
- 16・32・48・180・192・512ピクセルをそれぞれ作成します。
- 縦横比
- 「全体を収める」でも「全面に埋める」でも元の縦横比を保ちます。
- 透明度
- 既定ではそのままにし、必要なら選んだ色で塗りつぶします。
- 処理する場所
- 変換はこのブラウザ内で行われ、元画像はサーバーに送られません。
ファビコン作成の使い方
画像を1枚アップロードします
正方形に近い画像が最もきれいに仕上がります。小さすぎると拡大してもぼやけるので、512ピクセル以上をおすすめします。ファイルをドラッグ＆ドロップするか、「ファイルを選択」を押してください。
正方形への合わせ方を選びます
「全体を収める」は画像全体を入れて、余った部分を空けておきます。透過のロゴに向いています。「全面に埋める」は短い辺に合わせ、はみ出した部分を切り取るので、写真に向いています。どちらでも縦横比はそのままです。透明な部分を色で覆いたい場合は、背景の塗りつぶしをオンにして色を選んでください。
作成してタブのプレビューで確認します
実際のタブと同じ16ピクセルで描いたプレビューが表示されます。大きなロゴは小さくするとつぶれることが多いので、ここで見分けられるか先に確認してください。見分けにくい場合は、文字を除いてシンボルだけにした画像で作り直す方が良いです。
ZIPでダウンロードしてコードを入れます
ファイルをサイトのルートフォルダにアップロードしてから、一緒に出力されるコードを<head>の中に貼り付けます。コードには実際に作成したファイル名だけが書かれているので、存在しないファイルを指すことはありません。
こんな作業に使えます
ブラウザや端末ごとの違うサイズを一度に
ブラウザのタブは16と32ピクセル、Windowsのショートカットは48ピクセル、iPhoneのホーム画面は180ピクセル、Androidは192と512ピクセルを使います。一度作成すればこれらのサイズをすべて作り、favicon.icoには16・32・48・64・128・256ピクセルを1つのファイルにまとめます。64ピクセル以下は32ビットBMP、それより大きいサイズはPNGで入れるので、古いWindowsでも最新のブラウザでも開けます。
小さくしても見分けられるか先に確認
大きなロゴは16ピクセルだとつぶれてしまうことがよくあります。作成後に、実際のタブと同じ16ピクセルで描いたプレビューを表示するので、縮小した姿を先に確認できます。正方形でない画像は「全体を収める」と「全面に埋める」から選べ、どちらでも縦横比は保たれます。
例で結果を確かめる
横長のロゴを32ピクセルに合わせる
元画像 800 × 400px
サイズ 32px全体を収める → 32 × 16pxで描き、上下に8pxずつ余白
全面に埋める → 64 × 32pxに拡大し、左右16pxずつ切り取り生成される埋め込みコード
既定の設定で作成<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">合わせ方の選び方
表を左右にスクロールすると続きが見られます。
| 方式 | どうなるか | 向いているケース |
|---|---|---|
| 全体を収める | 全体が入り、余った部分は空けておきます。 | 透過背景のロゴ、文字を含むシンボル |
| 全面に埋める | 短い辺を埋め、はみ出した部分を切り取ります。 | 写真、端が重要でない画像 |
| 背景を塗りつぶす | 透明な部分を選んだ色で覆います。 | 暗いタブで白いロゴが埋もれるとき |
結果が思ったとおりにならないとき
タブに古いアイコンが表示されたままです
ブラウザはファビコンを長く保存しています。スーパーリロード（強制再読み込み）をするか、タブを閉じて開き直してみてください。それでも残る場合は、URLの後ろに?v=2のような値を付けて、新しいファイルであることを知らせてください。
16ピクセルで何の絵か分かりません
小さいサイズでは、文字や細い線が消えてしまいます。ロゴから文字を除き、シンボルだけを大きく残した画像で作り直してみてください。タブのプレビューですぐに確認できます。
画像が小さすぎると表示されます
縦横ともに16ピクセル以上である必要があります。現在のサイズも一緒に表示されるので、より大きい元画像で再度アップロードしてください。小さい画像を拡大するとぼやけます。
背景が黒く見えます
透明な部分はそのままにするのが既定です。黒く見える場合は、元画像にすでに黒い背景がある場合です。背景の塗りつぶしをオンにして好きな色を選ぶと、その色で覆われます。
知っておきたい用語
- ファビコン
- ブラウザのタブやブックマークに表示される、小さなサイトのアイコンです。
- ICO
- 複数サイズの画像を1つのファイルにまとめるアイコン形式です。ブラウザが状況に合ったサイズを選んで使います。
- apple-touch-icon
- iPhoneやiPadでホーム画面に追加するときに使う180ピクセルのアイコンです。
- Webマニフェスト
- Androidでホーム画面に追加するときに使うアイコンや情報を書いておくファイルです。
ファビコン作成のよくある質問
拡張子をicoに変えただけのファイルですか？
いいえ。ICO規格どおりにヘッダーとエントリー表を作り、サイズごとの画像を1つのファイルにまとめます。作成後にファイルを読み直して、含まれているサイズを確認します。
透過ロゴを入れると背景が黒くなりますか？
透明度はそのまま保たれます。背景を塗りたいときだけ、色を選んで塗りつぶせます。
埋め込みコードに、存在しないファイルが書かれることはありませんか？
実際に作成したファイル名だけでコードを作ります。Androidのアイコンはリンクではなく、site.webmanifestで関連付けます。
SVGをアップロードしてもいいですか？
できます。ブラウザが描画した結果を、各サイズの画像にします。ただし出力されるのはPNGとICOで、SVGファビコン自体は作りません。
アップロードした画像はサーバーに保存されますか？
保存されません。画像の読み込み、サイズ変換、ICOのまとめ、ZIPの作成まで、すべてこのブラウザの中で行われます。
なぜこんなに多くのサイズが必要なのですか？
ブラウザのタブ、Windowsのショートカット、iPhoneのホーム画面、Androidのインストール画面が、それぞれ違うサイズを使うからです。必要なものだけ選んで使ってもかまいませんが、一式そろえておけばどこでもくっきり表示されます。