1枚の画像からfavicon一式を作る「FAVICON FORGE」

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

FAVICON FORGEでできること

FAVICON FORGEは、1枚のロゴや画像からWebサイト用のfavicon、Apple Touch Icon、Android・PWA向けアイコンなどをまとめて作成するツールです。複数のサイズを1つずつ画像編集ソフトで作る手間を減らし、必要なファイルを一式で準備できます。

元画像を読み込んだあと、背景色や余白を調整し、各サイズのプレビューを確認してから生成できます。小さいfaviconだけでなく、180px・192px・512pxといった大きめのアイコンも確認できるため、ロゴの輪郭や余白が適切かを見比べながら調整できます。

基本的な使い方

1. faviconに使いたいロゴや画像を読み込みます。
2. 必要に応じて背景色や余白を調整します。
3. 16px、32px、48pxなどの小さいfavicon表示を確認します。
4. Apple Touch IconやPWA向けの180px・192px・512pxプレビューも確認します。
5. サイト / アプリ名やテーマカラーなど、manifest用の情報を入力します。
6. 問題がなければ必要ファイル一式をZIPで保存します。

小さいサイズでは細い線や細かな文字がつぶれて見えることがあります。faviconとして使う場合は、16pxや32pxのプレビューでも形を認識できるか確認するのがおすすめです。

生成される主なファイル

FAVICON FORGEでは、favicon向けの複数サイズ画像に加え、Apple Touch IconやAndroid・PWA向けアイコンなどをまとめて生成する構想です。

• favicon.ico：ブラウザのタブなどで利用される代表的なfaviconファイル
• 16px / 32px / 48pxのfavicon画像：小さい表示での利用を想定したサイズ
• Apple Touch Icon：iPhoneやiPadなどでホーム画面へ追加した際に使われるアイコン向け
• Android・PWA向けアイコン：192px・512pxなど、Webアプリ用途を想定したサイズ
• site.webmanifest：PWA向けのアプリ名やアイコン情報などを記述するファイル
• 設置用コード例：faviconやmanifestをHTMLから読み込むための参考コード

「サイト / アプリ名」は何に使う？

「サイト / アプリ名」は、favicon画像の中へ文字を書き込むための項目ではありません。主にsite.webmanifest内の名前情報として利用するための設定です。

例えば「YUKI DIGITAL LAB」と入力した場合、PWAとしてホーム画面へ追加したときのアプリ名などに利用される可能性があります。また、ツール内のブラウザタブ風プレビューでも、入力した名前を確認できます。

faviconそのものへサイト名の文字が追加されるわけではないため、画像内に文字を入れたい場合は、あらかじめ元画像側でデザインしてください。

サイズ別プレビューの見方

faviconはサイズによって見え方が大きく変わります。16pxや32pxでは、実際のブラウザタブに近い小ささで表示されるため、細かな模様や小さい文字は判別しにくくなります。

一方、180px・192px・512pxのアイコンは、スマートフォンのホーム画面やPWAなどでより大きく表示される用途を想定しています。大きいプレビューでは、画像の余白、背景色、輪郭、中心位置などを確認してください。

画面上で大きく表示されていても、生成されるファイルの実際の画像サイズは指定された180×180、192×192、512×512などになります。

背景色と余白を調整する理由

元画像が端まで詰まっていると、小さいfaviconでは窮屈に見えたり、スマートフォンのアイコン表示でロゴが大きすぎて見える場合があります。余白を追加すると、アイコンの中でロゴを適切な大きさに調整できます。

透過画像を利用する場合は、表示される背景によって見え方が変わることがあります。背景色を設定する場合は、サイトやブランドのデザインに合う色か、ロゴとのコントラストが十分かを確認してください。

生成したファイルの設置について

生成したファイルは、Webサイト側へ配置して初めてfaviconやPWAアイコンとして利用できます。FAVICON FORGEでは設置用のHTMLコード例も確認できますが、実際のファイル配置場所やWordPressテーマの仕様によって設置方法は異なります。

WordPressを利用している場合は、テーマやサイトアイコン機能でfaviconを管理していることもあります。既存の設定を上書きする前に、現在どの方法でfaviconを設定しているか確認してください。

プライバシーと注意事項

元画像はブラウザ内で処理する設計を前提としており、ロゴや未公開デザインを外部サーバーへ送信しない構成を優先しています。ただし、公開権限のない画像や第三者のロゴなどを使用しないよう、素材の著作権・商標権・利用条件を確認してください。

ブラウザや端末、OS、PWAの仕様によってアイコンの表示方法は異なる場合があります。生成後は、実際のサイトや端末で表示を確認してください。

FAQ

どんな画像を用意すればいいですか？

正方形に近いロゴや画像が扱いやすいです。横長・縦長の画像でも調整できますが、小さいfaviconでは細部が見えにくくなるため、シンプルなデザインの方が認識しやすくなります。

favicon.icoだけを作るツールですか？

いいえ。favicon向けの複数サイズに加え、Apple Touch IconやAndroid・PWA向けアイコンなどをまとめて生成することを目的としています。

「サイト / アプリ名」を入力すると画像に文字が入りますか？

入りません。この項目は主にsite.webmanifestなどで利用する名前情報です。favicon画像そのもののデザインは元画像をもとに生成されます。

512pxのプレビューが大きく表示されても、生成画像も画面サイズになりますか？

いいえ。画面では見やすく拡大して表示しますが、生成ファイルは512×512など指定された実サイズで作成されます。

生成したファイルをそのままWordPressへ入れれば使えますか？

WordPressのテーマや設定方法によって異なります。サイトアイコン機能を使う場合と、テーマやHTMLで直接faviconファイルを指定する場合があるため、現在のサイト構成に合わせて設置してください。