ファビコンジェネレーター

ファビコンジェネレーターとは#

ファビコンジェネレーターは、1枚の画像からサイトに必要なアイコン一式（複数サイズ入りのfavicon.ico、PNGアイコン、ウェブアプリマニフェスト、ページに貼るHTMLタグ）を作成します。

処理はすべてブラウザ内で行われ、画像がデバイスの外に出ることはありません。

使い方#

1. 画像をドロップ、貼り付け、またはファイル選択で追加します。
2. 必要なファイルをダウンロードするか、一式をZIPで保存します。

初期設定では合わないときは、レイアウトや背景、サイト名を調整します。ブラウザのタブやiOSのホーム画面での見え方は、ダウンロードする前に確かめられます。

生成されるファイル#

• favicon.ico: ブラウザのタブやブックマーク用に、16、32、48 pxの3サイズを収めています。
• favicon-16x16.png、favicon-32x32.png、favicon-48x48.png: ブラウザ用の小さいPNGアイコンです。
• apple-touch-icon.png: iOSのホーム画面用の180 pxのアイコンです。
• android-chrome-192x192.png、android-chrome-512x512.png: Androidのホーム画面用で、マニフェストから参照します。
• icon.svg: 入力がSVGのときだけ付く元のファイルです。
• site.webmanifest: サイト名、Androidアイコンの一覧、テーマ色、表示形式をまとめたものです。
• HTMLタグ: ページの<head>に貼るlinkとmetaの行で、そのままコピーできます。

設定#

• 配置: 全体を表示は画像全体を収めます。拡大して切り抜きは正方形いっぱいに広げ、はみ出しを中央から切り取ります。
• 形状: 四角は角を残します。丸は画像を円に切り抜きます。Apple Touchアイコンは常に四角です。
• 余白: アイコンの辺と画像の間の空きを、アイコンの大きさに対する割合で指定します。
• ズーム: 余白の内側で画像を拡大縮小します。半分から倍まで変えられます。
• 背景: 透過は空きを透けたままにします。単色は背景色で塗ります。
• Apple Touchアイコンを不透明にする: 背景が透過でも、Apple Touchアイコンだけ背景色で塗ります。ホーム画面でも見やすくなります。
• サイト名: マニフェストとプレビューに使います。空のときはMy appになります。

活用シーン#

• 新しいサイトやブログにファビコンとアプリアイコンを加えるとき。
• 新しいロゴから画像編集ソフトを開かずに作り直すとき。
• 公開前にタブの大きさでの見え方を確かめるとき。

よくある質問#