ファビコンジェネレーター
画像・文字・絵文字からfavicon一式(ICO・各サイズPNG・Apple Touch Icon・site.webmanifest)を作成し、ZIPでまとめてダウンロードできる無料ツールです。画像はサーバーへ送信されず、すべてブラウザ内で処理されます。
1. 元にする素材を選択
2. 設定
正方形でない画像は、余白を付けて正方形に収まるよう自動調整します。
3. プレビュー(実寸大)
16px
32px
48px
180px(ホーム画面アイコン風)
生成されたファイル
HTMLコード
下記のコードを、ページの <head> 〜 </head> の間に貼り付けてください。
設置方法
どこに置けばいい?
ダウンロードしたファイルは、サイトのルートディレクトリ(https://example.com/favicon.ico のようにアクセスできる場所)にそのままアップロードするのが基本です。フォルダを分ける場合は、HTMLコード内のパスもあわせて書き換えてください。
WordPressの場合
「外観 → カスタマイズ → サイト基本情報」の“サイトアイコン”に、生成した512×512pxの画像(android-chrome-512x512.png)をアップロードするだけで、WordPress側が主要なサイズを自動生成してくれます。HTMLコードを手動で貼る必要は基本的にありません。
HTMLはどこに貼る?
通常のHTMLサイトの場合は、上記の「HTMLコード」を各ページの <head> 内に貼り付けてください。
favicon.icoだけでいい?
近年のブラウザはPNG形式のfaviconにも対応しているため、favicon.icoが無くても表示されることが増えています。ただし、古い環境との互換性のために、favicon.icoもあわせて設置しておくと安心です。
Apple Touch Iconとは?
iPhone・iPadでサイトを「ホーム画面に追加」したときに表示されるアイコンです。角の丸め処理はiOS側が自動で行うため、画像自体は四角いままで問題ありません。