Favicon Generator
ファビコン一括作成
ロゴ画像を1枚入れるだけで、ブラウザのタブやスマホのホーム画面に使うアイコンをまとめて作ります。
画像は外部に送信しません。アイコンづくりもZIPの作成も、お使いのブラウザの中だけで行います。
まだ画像が読み込まれていません。
調整SETTINGS
タブは16pxととても小さいので、余白は0〜5%がおすすめです。スマホ用は10〜15%あると、角が丸く切られてもロゴが欠けません。
見え方PREVIEW
ブラウザのタブ
上が明るい画面、下がダークモードです。暗い色のロゴが黒いタブで見えにくいときは、背景に色をつけてください。
スマホのホーム画面
各サイズ
16・32・48pxは実際の大きさ、それより大きいものは縮めて表示しています。
書き出すファイルFILES
貼り付けるHTMLHTML
ZIPの中身をすべて、サイトのいちばん上の階層（https://example.com/ の直下）にアップロードし、このHTMLを各ページの <head> の中に貼り付けます。別の場所に置くときは「ファイルを置く場所」を /assets/icon/ のように書き換えてください。
WordPressの場合WORDPRESS
WordPressなら、HTMLの貼り付けは不要です。512pxの画像を1枚登録するだけで、必要なサイズを自動で作ってくれます。
- このページで作った android-chrome-512.png（または「512pxの画像だけ保存」で保存した画像）を用意します。
- 管理画面の 外観 → カスタマイズ → サイト基本情報 を開きます。
- サイトアイコン で画像を選び、「公開」を押します。
テーマによっては「サイト基本情報」の場所が違うことがあります。ブロックテーマ（外観に「カスタマイズ」がないテーマ）では、外観 → エディターで「サイトロゴ」ブロックを選び、設定の「サイトアイコンとして使用する」をオンにします。上のHTMLとWordPressのサイトアイコンを両方入れると重複するので、どちらか一方にしてください。
画像の読み込み・アイコンの作成・ZIPの作成は、すべてお使いのブラウザ内で行います。ZIPを作るときだけ、圧縮用のプログラム（JSZip）をcdnjsから読み込みます。画像そのものは外部に送信しません。
