ウェブサイト用のファビコンを作る方法（ICO、PNG、Apple、Androidのアイコン）

短い答え：シンプルな正方形の画像から始め、Imgovoのファビコン作成で変換し、ZIPをダウンロードして、ファイルをサイトのルートフォルダに置き、用意されたHTMLを各ページの<head>に貼り付けます。WordPress、Shopify、Wixなどのサイト作成サービスには、たいてい「サイトアイコン」の設定があり、そこに512 pxのPNGをアップロードすることもできます。

ファビコンの役割

ファビコンは、ブラウザのタブにある小さなアイコンです。ブックマークや閲覧履歴にも表示され、サイトがホーム画面に追加されたときには、スマートフォンが関連するアイコンを使います。ファビコンがないサイトでは、汎用のプレースホルダーが表示され、未完成に見えてしまいます。

アイコンはとても小さく表示されるため、解像度よりもデザインのほうが重要です。

小さなサイズに合わせてデザインする

• シンプルに。太い図形や、1〜2文字がうまくいきます。細かいロゴは、16 × 16ピクセルでは、にじんだ点になってしまいます。
• 強いコントラストを。タブは、明るい色にも暗い色にもなります。
• 元画像は正方形がおすすめ。ロゴが横長の場合は、正方形のキャンバスの上に置きます。
• 背景を透明にすると、アイコンがタブになじみます。写真の場合は、ジェネレーターが中央から正方形にトリミングします。
• 少し余裕を。余白と角の丸みの設定で、形に余裕を持たせられます。

ロゴに不要な背景がある場合は、先に背景を削除で透明にできます。写真の背景を削除する方法もご覧ください。正方形のロゴの角を丸くしたり、円形にしたりするには、画像を丸く切り抜くで、透明なPNGを保存できます。

手順

1. ファビコン作成を開きます。
2. 画像を追加します。PNG、SVG、JPG、WebPなどに対応しています。
3. 収め方を選びます。中央から正方形にトリミングするか、画像全体を収めます。
4. 背景（透明または色）、余白、角の丸みを選びます。余白と角の丸みの初期値は0%です。任意で、アプリ名も入力できます。
5. プレビューを確認します。
6. ZIPをダウンロードします。

元に戻す／やり直すは、Ctrl+ZとCtrl+Shift+Zで使えます。

ZIPの中身

ファイル	サイズ	用途
favicon.ico	16、32、48 pxを1つのファイルに	ブラウザのタブ、古いブラウザ
favicon-16x16.png	16 px	ブラウザのタブ
favicon-32x32.png	32 px	ブラウザのタブ、高密度の画面
apple-touch-icon.png	180 px	iPhoneとiPadのホーム画面
android-chrome-192x192.png	192 px	Androidと、インストール可能なウェブアプリ
android-chrome-512x512.png	512 px	Androidと、インストール可能なウェブアプリ、サイトアイコンのアップロード
site.webmanifest	–	インストール可能なウェブアプリのアイコンを記述

iPhoneとiPadは、透明な部分を黒で表示するため、Appleのアイコンにはべた塗りの背景が付きます。

ファイルをサイトに追加する

1. ファイルを、サイトのルートフォルダ（index.htmlと同じ場所）に展開します。
2. ジェネレーターの「HTMLをコピー」ボックスから、HTMLをコピーします。
3. それを、すべてのページの<head>、またはサイトの共通レイアウトやテンプレートに貼り付けます。

一般的なタグのまとまりは、次のようになります。ジェネレーターが示すスニペットは、ファイル名と一致しているので、そのまま使ってください。

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ウェブサイト作成サービスでは、「サイトアイコン」または「ファビコン」の設定を探し、512 pxのPNGをアップロードします。ほかのサイズは、サービスが自分で作ります。

新しいアイコンが表示されない場合

ブラウザは、ファビコンを積極的にキャッシュします。新しいファイルをアップロードしたあとは：

• スーパーリロード（強制再読み込み）でページを読み込み直します。
• プライベートウィンドウや別のブラウザで、サイトを開きます。
• /favicon.icoが、アドレスバーで直接開けることを確認します。
• 待ちます。検索エンジンが新しいアイコンを表示するまで、しばらくかかることがあります。

ICOだけを作る

favicon.icoだけが必要な場合は、「favicon.icoだけをダウンロード」ボタンを使います。ほかのサイズは、画像のリサイズで、必要な寸法ぴったりのシンプルなPNGを作れます。形式については、JPG、PNG、WebP、AVIFの比較で説明しています。

プライバシー

ロゴがお使いのコンピューターの外に出ることはありません。アイコンはブラウザの中で作られ、ZIPもそこで作られます。

今すぐ試す

ファビコン作成を開き、ロゴを追加して、アイコン一式をダウンロードします。