⭐ ファビコン作成

使い方の手順

1. 画像を選ぶ 正方形で、図形はシンプルなほど有利です。ファビコンは最小 16 × 16 ピクセル、文字 1 つか単純な記号ほどの大きさしかありません。細かいロゴをそのサイズにすると、ただの色の塊になります。
2. 背景を決める 既定では不透明にして色を敷きます。ダークモードではタブバーが暗くなるため、透過した暗色のアイコンはほぼ見えなくなるからです。本当に必要な場合だけ「透過を保持」にしてください。
3. 余白と角丸を調整 余白は 8% 程度が無難で、図形が端に接しなくなります。角丸は macOS の Safari のタブやスマホのホーム画面で見栄えがよく、アプリ風にするなら 20〜25% まで上げてください。
4. 実行する 7 つのファイルが生成されます。16・32・48px を含む favicon.ico が 1 つと、各プラットフォーム向けの PNG が 6 つです。
5. サイト直下に置き、HTML を貼る すべてのファイルを Web ルートに置き、生成された HTML を <head> に貼り付けます。favicon.ico をルートに置くこと自体に意味があります。HTML で指定しなくてもブラウザはそこを見に行くからです。

こんなときに使えます

生成されるファイル

• favicon.ico — 16・32・48px を 1 ファイルに収録。Web ルートに配置します。
• favicon-16x16.png / 32x32 / 48x48 — 現代のブラウザがタブで優先的に使うもの。
• apple-touch-icon.png（180px）— iPhone・iPad でホーム画面に追加したときのアイコン。
• android-chrome-192x192.png / 512x512 — Android のホーム画面と PWA のインストール画面用。

デザイン上、本当に重要な唯一の制約

16 ピクセルで判別できること。これがファビコン唯一の実質的な制約であり、想像よりずっと厳しいものです。16 × 16 は文字 1 つほどの大きさで、ロゴ全体・社名・細い線・グラデーションはこのサイズですべて潰れてしまいます。

実務で機能するのは、ロゴのなかでもっとも識別性の高い要素を 1 つだけ取り出す方法です。頭文字、シンボル、特徴的な形などです。よく知るサイトを見れば、ファビコンにロゴ全体を入れている例がほとんどないことに気づくはずです。

生成後は favicon-16x16.png を開いて確認してください。自分で何か分からなければ、訪問者にはなおさら分かりません。

よくある質問

次に使いそうなツール

画像の作業は一度で終わらないことがほとんどです。「ファビコン作成」とよく一緒に使われるのはこちら：

• 🧬 SVG を PNG に — ベクターを任意サイズのラスターへ
• 📐 サイズ変更 — 幅・比率・指定サイズで変更
• ⚡ PNG を WebP に — ファイルサイズを 3 割以上削減

仕上げたものをそのまま共有しますか？アップロードなら画像・写真・動画を短縮リンクにでき、パスワード・有効期限・閲覧回数の上限も設定できます。ツール一覧もどうぞ。