MacでWebサイトのファビコンを生成
Webサイトに必要なすべてのファビコンに加え、Webマニフェストと、ページに貼り付けるHTMLも作成します。
Macでファビコン作成
サンプルファイルを使ったアプリのスクリーンショット。
ファビコン作成の使い方
- 1
ロゴをドロップ
画像は1枚、できれば正方形で512 px以上のものを使ってください。正方形でない画像は、中央で正方形に切り取られます。
- 2
サイトの情報を入力
Webマニフェスト用のサイト名とテーマカラーを入力し、Apple Touchアイコンの背景を選びます。
- 3
「ファビコンを作成」をクリック
すべてのファビコンファイルが、マニフェストとHTMLコードと一緒に作成されます。
- 4
サイトにアップロード
「favicons」フォルダ（「ダウンロード › OneMacTools」内の日付付きフォルダにあります）のファイルをWebサイトのルートにコピーし、HTMLをページの<head>にペーストします。このコードはアプリにも表示されます。
ファビコン作成でできること
1つのロゴから、16、32、48 pxを含むfavicon.ico、16 pxと32 pxのPNG、iPhoneで黒くならないよう単色の背景を付けた180 pxのApple Touchアイコン、Androidやインストール可能なWebアプリ用の192 pxと512 pxのアイコンを作成します。さらに、サイト名とテーマカラーを含むsite.webmanifestと、<head>に貼り付けるHTMLコードも作成します。
こんなときに
- 新しいWebサイトにファビコンを追加
- サイトをスマートフォンにインストールできるようにする
- ぼやけたファビコンを差し替え
オプションの説明
- サイト名
- site.webmanifestで使われる名前で、サイトをスマホにインストールしたときに表示されます。空欄のままにすると画像のファイル名が使われます。短い名前は最初の12文字です。
- テーマカラー
- #1E90FFのような16進数の色。ブラウザのテーマカラーとマニフェストの背景色に使われます。空のままにすると白になります。
- Apple Touchアイコンの背景
- 白、テーマカラー、黒。iPhoneでは透明なホーム画面アイコンが黒の上に表示されるため、180 pxのApple Touchアイコンには塗りつぶしの背景が付きます。
- 角を丸くする
- デフォルトはオフ。すべてのファビコンサイズで、ロゴの角を丸くします。
おすすめの使い方
- 文字入りのロゴ全体ではなく、シンプルなマークを使いましょう。16 pxでは、太い形しか判別できません。
- 透明なPNGから始めれば、ファビコンがライトとダークどちらのブラウザタブにもきれいになじみます。
- テーマカラーを16進値で入力します。一部のスマホではブラウザの画面がこの色になるので、メインのブランドカラーを選びましょう。
- ブラウザはファビコンを長期間キャッシュするので、アップロード後はプライベートウインドウでサイトを開いて新しいアイコンを確認しましょう。
対応形式
- 入力
- 画像1枚。512 px以上の正方形のPNGが理想です。
- 出力
- favicon.ico（16、32、48 pxを含む）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180 px）、android-chrome-192x192.png、android-chrome-512x512.png、さらにsite.webmanifestとadd-to-head.htmlを含む「favicons」フォルダ。
- 正方形でない画像は、中央で正方形に切り取られます。
ファビコン作成についての質問
Webサイトにはどのファビコンファイルが必要ですか？
古いブラウザ用のfavicon.ico、タブ用の16 pxと32 pxのPNG、iPhoneのホーム画面用の180 pxのApple Touchアイコン、Android用のWebマニフェスト付き192 pxと512 pxのアイコン。OneMacToolsはこれらすべてと、ページの<head>に貼り付けるHTMLを作成します。
ファイルはどこに保存されますか？
Webサイトのルートフォルダ内、index.htmlと同じ場所に置きます。HTMLスニペットとマニフェストはどちらもそこにあることを前提としています。
Macでfavicon.icoを作成するには？
ロゴを「ファビコン作成」にドロップし、「ファビコンを作成」をクリックします。16、32、48 pxの各サイズを含むfavicon.icoが、各サイズのPNGと一緒に作成されます。
iPhoneのホーム画面でアイコンが黒く見えるのはなぜですか？
iOSでは、ホーム画面アイコンの透明な部分が黒で表示されます。それを避けるため、Apple Touchアイコンは白、黒、またはテーマカラーの塗りつぶしの背景に配置されます。
site.webmanifestは何に使いますか？
誰かがホーム画面にサイトを追加したり、Webアプリとしてインストールしたりするときに、サイト名、アイコン、色をスマートフォンに伝えます。
新しいファビコンが表示されません。何が問題ですか？
ブラウザはファビコンを強力にキャッシュします。ファイルがサイトのルートにあり、スニペットが<head>内にあることを確認してから、プライベートウインドウで再読み込みしてください。
ファビコン作成はファイルをアップロードしますか？
いいえ。ファビコン作成はすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
ファビコン作成は元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
ファビコン作成に必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
X、LinkedIn、Slack、WhatsApp、iMessageでリンクが共有されたときに表示される、1200 × 630のカードを作成します。
アプリアイコン作成1枚の正方形画像からすべてのアプリアイコンを作成：Xcode用のiOSアセットカタログ、Androidのランチャーアイコンとアダプティブアイコン、Mac用の.icns。
