faviconの作り方（PNGからfavicon.icoを作成）
ブラウザのタブやブックマークに表示されるfaviconを、PNG画像から作る方法を解説します。favicon.icoと各サイズPNGの用意、HTMLへの設置までをまとめます。
faviconとは何か
favicon（ファビコン）は、ブラウザのタブ、ブックマーク、履歴、スマホのホーム画面などに表示される小さなサイトアイコンです。サイトの第一印象や見分けやすさに直結するため、個人開発のサービスやブログでも早めに用意しておきたい要素です。
faviconが設定されていないと、タブに汎用アイコンが表示され、ほかのサイトに埋もれてしまいます。逆にきちんと設定すると、複数タブを開いたときの視認性が上がり、ブックマークからの再訪も促しやすくなります。
どのサイズを用意すべきか
現在の主流は、複数解像度を内包した favicon.ico（16×16・32×32・48×48）を基本に、別途PNGを用意する構成です。16×16はタブ表示、32×32はブックマークや高解像度ディスプレイ、48×48はWindowsのサイト表示などで使われます。
加えて、スマホでホーム画面に追加されたときのために apple-touch-icon（180×180）のPNGを用意しておくと安心です。これらをまとめて持っておけば、主要な環境をひと通りカバーできます。
PNGからfavicon.icoを作る手順
専用ソフトがなくても、ブラウザだけでfaviconは作れます。Filewispの「favicon.ico作成ツール」は、用意したPNG（またはJPG）から、16・32・48を内包したfavicon.icoと、各サイズのPNG、apple-touch-iconをまとめて生成します。画像は外部サーバーへアップロードせず、すべてブラウザ内で処理します。
手順はシンプルです。正方形に近いPNGを選び、プレビューで見え方を確認したら「faviconを生成」を押します。生成されたファイル一式はZIPでまとめてダウンロードできます。
HTMLへの設置方法
生成したファイルは、サイトのルートなどに置き、HTMLの <head> 内で読み込みます。具体的には、favicon.ico を rel="icon" で、各PNGを sizes 付きの rel="icon" で、スマホ用の180×180を rel="apple-touch-icon" で指定します。
Filewispの作成ツールは、この <link> タグ一式をそのままコピーできる形で出力します。貼り付けてパスを自分の配置に合わせるだけで設置できるので、HTMLに不慣れでも迷いにくくなっています。
元画像と透過のコツ
元画像は正方形で、できれば512×512以上の大きめのPNGが理想です。小さい画像を引き伸ばすと輪郭が粗くなるため、なるべく高解像度の素材から作るときれいに仕上がります。ロゴなら、余白を少し含めると小さい表示でも潰れにくくなります。
透過背景のPNGはそのまま透過を保持できます。背景色のあるサイトでも自然になじむので、ロゴをそのままfaviconにしたいときに便利です。
faviconが反映されないときは
設置したのに表示が変わらない場合、多くはブラウザのキャッシュが原因です。スーパーリロード（強制再読み込み）を試すか、しばらく時間を置いてから確認すると反映されることがあります。
それでも変わらないときは、ファイルの配置パスと <link> の href が一致しているか、ファイル名のタイプミスがないかを見直してください。パスのずれは反映されない原因の定番です。