画像1枚で完成。favicon.icoと各サイズPNG、貼り付け用HTMLスニペットまでZIPで受け取れます。

クリックしてファイルを選択

ファイルを選択

正方形のPNG推奨（512px以上）

使い方

  1. 1アイコンにしたい画像をドラッグするか、クリックしてアップロードします（正方形のPNG、512px以上を推奨）。
  2. 2アップロードするとすぐ、favicon.ico と複数サイズのPNGが自動で作られます。
  3. 3一緒に表示されるHTMLコードをコピーして、サイトの <head> 内に貼り付けます。
  4. 4ZIPをダウンロードを押してファイルを受け取り、サイトのフォルダに入れれば完了です！

知っておくと便利なヒント

  • 正方形の画像をアップロードすると歪みません。縦横が違うと比率が潰れることがあります。
  • アイコンは小さく表示されるので、細い線や小さな文字より、シンプルではっきりした形のほうがよく見えます。
  • ZIP内のファイルをサイトの最上位フォルダにそのまま置くと、コード内のパス（/favicon.ico など）がそのまま合います。

ZIPに入るファイル — ファビコンの規格をひと目で

受け取るZIPには、favicon.ico 一つの中に16・32・48pxの画像が重ねて入っています。ブラウザがその場に合ったサイズを自動で選んで使うので、一つ入れておくだけでタブ・ブックマーク・アドレスバーではっきり表示されます。さらに favicon-16x16.png と favicon-32x32.png も別に入っていて、icoをうまく読めない環境ではPNGで代わりを務めます。

iPhone・iPad でホーム画面にサイトを追加するときに使う apple-touch-icon.png は180pxで作られます。Android・PWA 用には192pxと512pxのPNGが入り、この2つを結びつける site.webmanifest も一緒に入ります。つまり、デスクトップのタブからスマホのホーム画面アイコンまで、一式でそろうわけです。

16
32
48

きれいに出る元画像の作り方 — シンプル・高コントラスト・正方形

ファビコンは画面で16〜32pxほどのとても小さいサイズで表示されます。そのため細かい文字や細い線はつぶれて見分けにくくなります。ロゴから核となるシンボルを一つだけ大きく残したり、会社名の頭文字だけを取り出したりして、できるだけシンプルに作るのがコツです。背景とシンボルの色のコントラストがはっきりしているほど、小さいサイズでも目立ちます。

元画像は正方形で用意してください。縦横の比率が違うと、正方形のアイコンに合わせるために潰れたり伸びたりして見えることがあります。余白も少し多めに取っておくと、うんと小さく縮んだときにシンボルが端に張り付いて窮屈に見えません。512px以上の正方形PNGでアップロードすれば、すべてのサイズが鮮明に書き出されます。

受け取ったファイルをサイトに適用する方法

ZIPを解凍して出てくるPNG・ico・webmanifest のファイルを、サイトの最上位フォルダ（ルート）にそのまま置きます。次に、画面に一緒に表示されるHTMLコードをコピーして、ページの <head> タグ内に貼り付けます。このコードが、どの場面でどのアイコンを使うかをブラウザに伝える案内板の役目を果たします。

コード内のパスは /favicon.ico のようにルート基準で書かれています。ですからファイルをルートに置くだけで、パスをいじらずそのまま動きます。WordPress や Notion、ブログサービスのように <head> を直接触れない場合は、それぞれの「ファビコン設定」の項目に favicon.ico か512pxのPNGをアップロードする方法を使ってください。

よくある質問

favicon.ico と、favicon-16x16.png・favicon-32x32.png のような複数サイズのPNG、Apple端末用の apple-touch-icon.png、192・512px のPNG、site.webmanifest、そして貼り付け用のHTMLコード（snippet.html）が入っています。

画面に一緒に表示されるコードをそのままコピーして、サイトの <head> 内に貼り付けてください。ZIPのファイルをサイトの最上位に置けば、コード内のパスがそのまま動きます。

PNG・JPG・WebP などの画像ならアップロードでき、透明背景がきれいに出る正方形のPNG（512px以上）を推奨します。結果は favicon.ico とPNG一式で作られます。

いいえ。すべての処理がブラウザの中だけで行われるため、ロゴの原本が端末の外に出ません。ZIPもブラウザでその場で作って受け取ります。

アイコンが使われる場所ごとにサイズが違うからです。ブラウザのタブは16〜32px、ブックマークやショートカットはそれより大きく、スマホのホーム画面アイコンはさらに大きいです。それぞれの場所に合ったサイズをあらかじめ用意しておけば、一つを無理に伸ばしたり縮めたりしてぼやけることなく、どこでも鮮明に表示されます。favicon.ico 一つにも16・32・48pxが入っていて、ブラウザが自動で選んで使います。

ブラウザが以前のファビコンをキャッシュに保存して、そのまま表示し続けていることが多いです。強めの再読み込み（Ctrl/Cmd+Shift+R）をしたり、シークレットウィンドウで開いたり、しばらくしてから確認し直してみてください。ファイルのパスがコードと合っているか、ファイルが本当にルートに置かれているかも合わせて確認するとよいです。