ファビコンワークス

できること

• 必要なファイルを一式favicon.ico（マルチサイズ）・PNG 各サイズ・apple-touch-icon・PWA 用アイコンまで。
• 実機イメージで確認ブラウザのタブ・iPhone・Android・Google 検索での見え方をその場でチェック。
• 貼るだけの HTML コードhead に貼り付けるタグも自動で生成。コピーして終わりです。

画面の見方

画面写真の中のサンプル画像は AI（OpenAI Codex）で生成したものです。ツールの動作とは関係ありません。

1. 1
   入力と形の設定もとにする画像・テキスト・絵文字と、形状・余白・背景・色調整。
2. 2
   実機イメージ大きなプレビューと 16〜96px の並び、タブ・スマホ・検索結果での見え方。
3. 3
   出力書き出すファイルの選択、サイズの追加、HTML コード、ダウンロード。

基本の使い方

STEP 1

もとにするものを選ぶ

左上の入力で「画像／テキスト／絵文字」を選びます。画像ならドロップ枠にロゴやアイコンを入れるだけ。中央のプレビューに直接落としてもOKです。

PNG / JPG / WebP / SVG / ICO に対応。正方形で、余白の少ない画像がきれいに仕上がります。

STEP 2

小さくしたときの見え方を確認する

中央に 16px〜96px の実寸が並びます。ブラウザのタブに出るのは 16px。ここで潰れていないかを必ず確認してください。「ライト／ダーク」で背景を切り替えて見比べられます。

下の「ブラウザタブ・iPhone・Android・Google検索」は、実際に置かれたときのイメージです。

STEP 3

形を整える

形状で角丸・円形・squircle を選べます。余白はアイコンの周りの空き。角丸や円形にするときに少し足すと収まりがよくなります。背景は透明のままか、単色で塗るかを選びます。

色が薄いと感じたら、たたまれている色調整を開いて明るさ・鮮やかさを調整できます。

STEP 4

書き出すファイルを選ぶ

右の書き出すファイルで必要なものにチェック。迷ったら最初から入っているチェックのままで大丈夫です。別のサイズが欲しいときは指定サイズで追加から PNG か ICO を足せます。

favicon.ico は 16〜256px を1ファイルにまとめたもの。これ1つで Windows や古いブラウザまでカバーします。

STEP 5

ダウンロードして貼り付ける

「全部入りZIPをダウンロード」でまとめて保存し、中身をサイトの一番上の階層に置きます。HTMLコードを「コピー」して、ページの head の中に貼り付ければ完了です。

1ファイルずつ欲しいときは「個別にダウンロード」。

よくある質問

16px にすると絵が潰れてしまう

細い線や小さな文字は 16px では残りません。太い線・単純な形・2〜3色に絞ったマークにするか、余白を減らして絵を大きく見せてください。

ICO と PNG、両方いる？

基本は両方入れておくのが安心です。新しいブラウザは PNG を、古い環境や Windows のブックマークなどは ICO を使います。

画像はどこかに送られる？

送られません。読み込みから ZIP の作成まで、すべてお使いのブラウザの中で完結します。