ファビコン作成ツール
1枚の画像から、ウェブサイトに必要なファビコンをすべて作ります。
ファビコン作成の使い方
ロゴや画像を追加
PNG、JPG、WebP、GIF、SVGをページにドロップします。シンプルな形の正方形の画像がおすすめです。
見た目を調整
正方形に切り抜くか画像全体を収め、透明か色付きの背景を選び、余白を加えて角を丸めます。プレビューで各サイズとブラウザのタブでの見え方を確認できます。
ダウンロードしてコードを追加
ZIPをダウンロードし、ファイルをサイトのルートフォルダにアップロードして、HTMLの行を各ページのheadに貼り付けます。
Utils365が選ばれる理由
必要なものが一式そろう
16・32・48 pxを含むfavicon.ico、PNGファビコン、Apple touch icon、Android用アイコン、site.webmanifestを、ブラウザが期待する名前で作成します。
ダウンロード前に確認
実際のサイズや、ライト・ダークのブラウザタブでの見え方を確認できるので、細部がつぶれることはありません。
プライバシーを守る設計
すべてブラウザ内で処理されるので、ロゴがサーバーにアップロードされることはありません。
よくある質問
どのサイズのファビコンが必要ですか？
favicon.ico（16・32・48 px）がブラウザのタブとブックマーク、180 pxのApple touch iconがiPhoneとiPadのホーム画面、192 pxと512 pxのPNGがAndroidとインストール型ウェブアプリをカバーします。このツールは1枚の画像からそのすべてを作ります。
ICO・PNG・SVG、どのファビコン形式を使えばいいですか？
3つとも使いましょう。favicon.icoは古いブラウザや自動で探すツールを含め、どこでも使えます。PNGファビコンは決まったサイズでくっきり表示されます。SVGファビコンはどのサイズでも鮮明で、SVGから作ったときに作成されます。
apple-touch-iconとは何ですか？
サイトをホーム画面に追加したときにiPhoneやiPadが使うアイコンです。180 × 180 pxで透明にできないため、塗りつぶした背景（透明を選んだ場合は白）で保存されます。角はiOSが自動で丸めます。
ファビコンのファイルはどこに置けばいいですか？
ウェブサイトのルートフォルダ（トップページと同じ場所）に解凍し、favicon.icoがyoursite.com/favicon.icoにあるようにします。次に、このページに表示されるHTMLの行を各ページのheadセクション、またはサイトのテンプレートに貼り付けます。
新しいファビコンが表示されないのはなぜ？
ブラウザはファビコンを長い間保存しています。ファビコンのアドレスを直接開くか、スーパーリロードするか、プライベートウィンドウで確認してください。