ファビコン作成
favicon-generator• 画像1枚から favicon.ico と PNG セットを一括生成。 • 角丸・余白・背景調整と HTML スニペットまで zip で。
スクリーンショットはそのまま貼り付けできます Ctrl + V
画像はブラウザ内だけで処理されます。サーバーにアップロードされません。
ファビコンの作り方
画像をドラッグ＆ドロップするか、クリックして選ぶとすぐにアイコンが作られます。ロゴのように正方形に近い画像が最適で、横長の画像は埋め尽くすを使うと左右が切れてしまうので、全体を入れるを選んで余白を少し足してください。プレビュー右側の数字は実際のピクセルサイズそのままです。ファビコンは結局16pxで判別できるかがすべてなので、大きな画面で美しいことよりも、小さくしてもつぶれない単純な形の方がはるかに有利です。
まとめてzipでダウンロードを押すと、favicon.ico、選んだサイズのPNG、site.webmanifest、HTML挿入コードが一度に手に入ります。16・32・48はブラウザのタブとブックマーク用、180はiPhoneのホーム画面のショートカット用、192と512はAndroidとPWAのインストールアイコン用です。favicon.icoの中には16・32・48の3種類が一緒に入っており、状況に合う大きさをブラウザが選んで使います。
受け取ったファイルをサイト直下にアップロードし、HTML挿入コードをheadの中に貼り付ければ完了です。ファビコンはブラウザが長くキャッシュするため、変更してもすぐに反映されないことがあります。強制的に再読み込みするか、シークレットウィンドウで確認してください。すべての処理はブラウザ内で行われ、画像がサーバーに送られることはありません。
よくある質問
ファビコンを変更したのに反映されません。
ブラウザがファビコンを長くキャッシュしているためです。Ctrl+F5で強制的に再読み込みするか、シークレットウィンドウで確認してください。それでも変わらない場合は、アイコンのURLを直接開いて新しいファイルが公開されているか確かめ、リンクの末尾に?v=2などを付けて別ファイルとして認識させます。
ファビコンのサイズはなぜ何種類も必要なのですか？
表示される場所ごとに必要な大きさが違うためです。16・32・48はブラウザのタブとブックマーク、180はiPhoneのホーム画面、192はAndroid、512はPWAのインストールアイコンに使われます。この6種類が最初から選択されており、64・96・128・256も必要に応じて追加できます。
今でもfavicon.icoは必要ですか？
必要です。古いブラウザや一部のツールは、HTMLにリンクがなくてもサイト直下の/favicon.icoを自動的に要求します。このツールが作るfavicon.icoには16・32・48の3種類が1つのファイルにまとめて入っているため、ブラウザが場面に合った大きさを選んで使えます。
16ピクセルでも読めるアイコンにするコツはありますか？
文字は多くても1文字にとどめ、細い線や影は外してください。16ピクセルでは1ピクセル未満の線は消え、隣り合う色が混ざってつぶれます。色は2〜3色に絞り、背景との明暗差を大きく取りましょう。横長のロゴは埋め尽くすと左右が切れるので、全体を入れるを選んで余白を少し足します。
TistoryやWordPressにはどう設定しますか？
Tistoryは管理画面から画像を直接アップロードできるので、favicon.icoのみダウンロードで足ります。WordPressは設定のサイトアイコンに512のPNGを入れれば、小さいサイズは自動で生成されます。自作サイトの場合はzip内のファイルをサイト直下に置き、HTML挿入コードをheadの中に貼り付けてください。
背景を透明にしたり角を丸くできますか？
背景色を塗るのチェックを外すと透明なファビコンになり、ダークテーマのブラウザでもロゴだけが浮かんで見えます。角丸は0で四角、50で完全な円になり、その間の値でほどよく丸めることもできます。余白は最大30%まで広げられるので、ロゴが窮屈なときに使ってください。