ファビコン作成ツール必要なサイズすべてと、貼るだけの head。
ロゴを置くだけで、複数解像度を収めた本物の favicon.ico、ブラウザが求める PNG サイズ、apple touch icon、Android の maskable アイコン、値の入った site.webmanifest まで手に入ります。すべてこのタブの中で生成され、画像がアップロードされることはありません。
ここにロゴをドロップ
タップしてファイルを選ぶこともできます。512px 以上の正方形の画像がいちばんきれいに仕上がります。
PNG、JPG、WebP、SVG、ICO、GIF
画像はこのタブの中で読み込み、リサイズ、書き出しまで完結します。どこにもアップロードされず、どの段階でもサーバーは関わりません。
2026年、本当に必要なファビコンのサイズは？
多くのジェネレーターがいまだに配る20ファイルの詰め合わせより、ずっと少なくて足ります。5つの表示先で主要なブラウザと OS はすべてカバーでき、それ以上は <head> を重くするだけで何も得られません。
favicon.ico、16 と 32 と 48
ブラウザが HTML を1行も読まないうちにドメインのルートへ取りにいくのは、今もこのファイルです。1つのコンテナが3サイズすべてを収めるので、このファビコン変換ツールは PNG の名前を変えるのではなく本物の .ico を組み立てます。16px はタブ、32px は Retina のタブとブックマークバー、48px は Windows のショートカットです。
favicon.svg、ベクターがあるなら
ベクターのファビコンはどのサイズでも輪郭が崩れず、ファイル内のメディアクエリで OS のダークモードに反応させることもできます。理解できるブラウザは .ico よりこちらを優先します。ここに SVG を入れてもベクターのまま扱われ、ラスタライズして偽物を返すようなことはしません。
apple-touch-icon.png、180×180
誰かがサイトをホーム画面に追加したとき、iOS が使うアイコンです。ファイルは1つで足ります。iOS 8 以降は 180px の1枚を縮小して使うため、apple-touch-icon-57x57 から 152x152 まで並べていた時代は終わりました。この apple touch icon 生成は1枚だけを書き出し、不透明にします。
android-chrome 192 と 512、そして maskable
link タグではなく site.webmanifest から参照します。192px はホーム画面、512px はスプラッシュ画面とインストールの案内です。maskable のほうは Android がランチャーの形に合わせて切り抜くファイルなので、グラフィックに実際の余白が要ります。
mstile-150x150.png、残しても軽い
Windows にピン留めしたサイトは今も読みにいきます。小さな PNG 1つと meta タグ2行で済むので同梱していますが、消しても壊れるものはありません。それが正直なところで、だから必須のふりをせずリストの最後に置いています。
.ico ファイルに複数の画像が入っているのはなぜ？
.ico が画像形式ではなくコンテナ形式だからです。ここを理解しているかどうかが、どこでも表示されるファビコンと、Windows やフィードリーダーで静かに失敗するファビコンの分かれ目になります。
まずディレクトリ、そのあと画像
ファイルは続く画像の枚数を示す6バイトのヘッダーで始まり、次に画像ごとの幅、高さ、バイト長、ファイル内の位置を書いた16バイトのエントリが並び、そのあとでようやく画像データが来ます。すべてリトルエンディアンです。この構造があるので、拡張子を .ico に変えただけの PNG は .ico ではありません。
サイズを選ぶのは読む側
16px のタブを描くブラウザはディレクトリを読み、16px のエントリを見つけて、それだけをデコードします。512px の1枚しか渡さなければ描画時に縮小され、粗いサンプリングでぼやけます。16px 用に作った画像を渡せば、そちらを使います。
中身は PNG でも構わない
もとの形式はピクセル順が上下逆の BMP と、1ビットの透過マスクを別に埋め込んでいました。Vista 以降のすべての Windows とすべてのブラウザはコンテナ内の PNG も受け付けます。この ico 変換が書き出すのもそちらです。ファイルは小さく、アルファは本物で、古いエンコーダーも要りません。
品質の差は 16px で出る
1024px のロゴを一気に 16px へ縮めると、参照する元ピクセルが少なすぎて灰色のにじみになります。このツールは中間の canvas で 1024 から 512、512 から 256 と半分ずつ縮め、すべてのピクセルを結果に効かせます。小さなファビコンが読めるまま残る理由は、これひとつです。
apple-touch-icon は今も必要？
必要です。しかも同梱の他のアイコンとルールが違う唯一のファイルです。押さえるべき点は2つで、どちらも上で自動的に処理しています。
iOS は透過を捨てる
Safari はホーム画面のアイコンを壁紙ではなく黒の上に合成します。そのため、透過背景で丁寧に書き出したロゴは、黒いタイルに浮かんだ図形として届きます。だからこのツールは、ほかを透過にしていても apple-touch-icon だけは常に不透明の背景、既定では白で書き出します。iOS 7 以降は光沢の加工も入らないので、渡したものがそのまま見えます。
Android は余白を足さず切り抜く
Android のランチャーは maskable アイコンを受け取り、端末に応じて円、スクイルクル、角丸の四角など自分の形に切り抜きます。残ることが保証されているのは中央の 80% だけなので、キャンバスを端まで埋めたロゴは端が欠けます。ここでは maskable ファイルがスライダーの値にかかわらず 20% の余白を保ち、円形のプレビューがランチャーに残る範囲をそのまま見せます。
サイトにファビコンを追加するには？
手順は2つ、そしてミスの大半は2つ目で起きます。記憶で書かず、ツールが生成したブロックをそのままコピーしてください。
ファイルはルートに置く
favicon.ico と残りを index.html の隣に置き、yoursite.com/favicon.ico で返るようにします。ブラウザは誰にも指示されず、自分からこのパスを要求します。link タグより置き場所のほうが効くのはそのためです。
head のブロックは全ページに
トップページだけではありません。深い階層に着地してそこをブックマークした人にも、正しいアイコンが出るべきです。テンプレートやフレームワークを使っているなら、ブロックは共通レイアウトに入れます。
.ico はサイズを書かずに宣言する
rel="icon" href="/favicon.ico" sizes="any" を使います。サイズはすでにコンテナの中にあり、マークアップに1つ固定で書くと、ブラウザが他のサイズを取りにいけなくなります。ベクターを理解するブラウザがそちらを選ぶよう、SVG の行を先に置きます。
そのあとスーパーリロードを2回
ファビコンはページとは別に、かなり強くキャッシュされます。古いアイコンが通常の再読み込みでは何日も残ることがあります。壊れていると結論づける前に、yoursite.com/favicon.ico を直接開いて、新しいファイルが本当に配信されているか確かめてください。
既存の QR コードや短縮リンクが実際にどこへ向かうか確かめたいですか。 QR コードリゾルバーで読み解く
新しいサイトに合わせて短いリンクが要りますか。 無料の URL 短縮ツールで作る
アイコンは第一印象の、小さいほうの半分です。
ファビコンは、すでにサイトに来ている人が見るものです。難しい仕事をしているのは、その人を連れてきたリンクのほうで、しかも普通は誰も測っていません。それが役に立つなら、LinkScale がわたしたちの作っているものです。
訪問の出どころが見える
他人のダッシュボードに出る数字ではなく、配ったリンクごとにクリック、国、デバイス、そのあと何が起きたかまで。
遷移先はあとから変えられる
印刷済みや投稿済みのリンクの行き先を後から差し替えられます。保存した人に更新をお願いする必要はありません。
1ページにまとめる
ショップ、予約フォーム、SNS をまとめたリンクインバイオのページで、1本しか置けないリンクを遠くまで届かせます。
ファビコン作成ツールについてのよくある質問
無料で、アカウントも透かしもなく、生成できるファイル数の制限もありません。画像がアップロードされることはありません。ブラウザ自身の FileReader で読み込み、canvas に描き、Blob にまとめる処理がすべてページの中で完結します。このツールの裏にエンドポイントはないので、送る先そのものが存在しません。使いながらブラウザのネットワークタブを開くか、ページを読み込んだあとインターネット接続を切れば、自分で確かめられます。
ファビコンは完了。人を連れてくるリンクが、もう半分です。
LinkScale は、クリックのあとに何が起きたかを知りたい人、そして何も刷り直さずに行き先を変えたい人のためのリンク管理プラットフォームです。
Free 14-day trial on every plan