ファビコン作成
文字・絵文字や画像からファビコンを作成。favicon.ico、Apple・Android用アイコン、manifest、HTMLタグまでまとめてダウンロードできます。
プレビュー
マイサイト
16・32・48・180pxの実寸表示です。16pxでも見分けられるか確認しましょう。
ZIPの内容：favicon.ico（16・32・48）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180）、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest、favicon-tags.html
HTMLの<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">ファイルをサイトのルート（例：https://あなたのドメイン/favicon.ico）にアップロードし、上のタグを全ページの<head>に追加してください。
すべての処理はブラウザ内で行われ、サーバーには送信されません。
使い方ガイド
ポイント
- 文字・絵文字や画像から、ブラウザ・iPhone・Android用のファビコン一式を作成します。
- ZIPのファイルをサイトのルートに置き、HTMLタグを<head>に入れれば設定完了です。
- 16pxでも見分けられるよう、1〜2文字かシンプルな記号がおすすめです。
ファビコンとは？
ブラウザのタブ、ブックマーク、検索結果、スマートフォンのホーム画面に表示される、サイトの小さなアイコンです。Googleの検索結果でもサイト名の横に表示されるため、設定していないと標準の地球儀アイコンになり、目立ちにくくなります。
作成されるファイル
| ファイル | サイズ | 使われる場所 |
|---|---|---|
| favicon.ico | 16・32・48px | ブラウザのタブ、古いブラウザ、検索結果 |
| favicon-16x16.png, favicon-32x32.png | 16・32px | 最新ブラウザのタブ、ブックマーク |
| apple-touch-icon.png | 180px | iPhone・iPadの「ホーム画面に追加」 |
| android-chrome-192x192.png, 512x512.png | 192・512px | Androidのホーム画面、アプリのインストール（PWA） |
| site.webmanifest | - | Android向けのアイコン・名前・テーマカラーの情報 |
サイトへの設定方法
- ZIPを展開し、すべてのファイルをサイトのルートフォルダ（ドメイン直下）にアップロードします。
- 同梱の
favicon-tags.htmlのタグを、全ページの<head>内に貼り付けます。 - WordPressの場合は「外観 → カスタマイズ → サイト基本情報 → サイトアイコン」に512pxのPNGをアップロードします。
- ブラウザはファビコンを長く保存（キャッシュ）します。変わらない場合は、スーパーリロード（Ctrl+F5）やシークレットウィンドウで確認しましょう。
見やすいファビコンを作るコツ
- 16pxでは、1〜2文字か、シンプルな記号がいちばん見やすくなります。ロゴ全体はつぶれやすくなります。
- 背景と文字のコントラストを大きくしましょう。明るいタブと暗いタブの両方をプレビューで確認できます。
- 背景を透明にすると、iPhoneのホーム画面用アイコン（apple-touch-icon）は白い背景で塗りつぶされます。iOSは透明な部分を黒く表示するためです。
よくある質問
favicon.icoだけではだめですか？
ブラウザのタブには十分ですが、iPhoneやAndroidのホーム画面に追加するときは、より大きなPNGアイコンが必要です。一式をそろえるのがおすすめです。
ファビコンを変えたのに前のまま表示されます。
ブラウザがファビコンを長く保存しているためです。スーパーリロード（Ctrl+F5）やシークレットウィンドウで確認してください。検索結果への反映には数日かかることがあります。
画像はサーバーに送信されますか？
いいえ。すべてのアイコンはブラウザ内で作成され、どこにもアップロードされません。