てもとツール

2026-05-28

WordPressやスマホのホーム画面でファビコン・アイコンを設定する方法

サイトのタブに出るファビコンと、スマホのホーム画面に並ぶアイコンは、同じロゴから用意します。必要なサイズ、HTMLでの読み込み、WordPress管理画面、iOS・Androidでの指定先までまとめました。

この記事の要点

  • タブ用とホーム画面用は別サイズで用意する
  • 16と32pxがタブで使う基本サイズになる
  • WordPressは管理画面から画像を指定する
  • iPhoneは180px、Androidはmanifestで指定
  • 角丸はOS側が自動でつけて表示してくれる

ブラウザのタブに出る小さなアイコンがファビコンです。 スマホのホーム画面に並ぶアイコンも、同じロゴから用意します。

設定の流れは、サイズの用意・HTMLでの読み込み・各環境での指定の三つです。 WordPressなら管理画面から、スマホ向けは専用画像で対応します。

この記事では、必要なサイズからWordPressとスマホでの設定先までを順に整理しました。

favicon生成ツールの初期画面

用途別に必要なアイコンのサイズ

アイコンは1サイズでは足りません。 タブ、スマホのホーム画面、PWAで求められる大きさが違うためです。

用途サイズ
ブラウザのタブ（小）16×16px
ブラウザのタブ（標準）32×32px
iPhoneのホーム画面180×180px
Android / PWA192×192px
PWA（大）512×512px

16×16と32×32が、タブやブックマークで使われる基本サイズです。 180×180はiPhone、192と512はAndroidやPWA向けです。

favicon生成ツールに正方形のロゴを読み込めば、これらをまとめて書き出せます。 16・32pxは実寸でプレビューし、潰れ具合を確かめてから保存しましょう。

HTMLでアイコンを読み込む書き方

画像を用意したら、HTMLの<head>内にリンクタグを書きます。 ブラウザがここを読み、対応するアイコンを選びます。

<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">

rel="icon"がタブ用、apple-touch-iconがiPhoneのホーム画面用です。 manifestはPWAの設定で、192と512pxのアイコンをここから参照します。

画像はサイトのルート（/）に置くのが基本です。 手書きはパスやスペルを間違えやすいので、生成したスニペットを貼ると安全です。

WordPressは管理画面から指定できる

WordPressを使っているなら、HTMLを直接いじる必要はありません。 管理画面からアイコン画像を指定できます。

操作は「外観 → カスタマイズ → サイト基本情報 → サイトアイコン」と進みます。 ここで画像をアップロードして選ぶだけです。

推奨は512×512pxの正方形です。 WordPressが内部で必要なサイズに縮小します。

長方形を指定すると切り抜きを求められます。 正方形のロゴを先に用意しておくと、迷わず進みます。

スマホで見たfavicon生成ツール

スマホのホーム画面アイコンを用意する

ホーム画面に追加したときのアイコンは、タブのファビコンとは別画像です。 小さな16pxを引き伸ばすと線がぼやけるため、大きめの専用画像を使います。

iPhoneでは、この専用画像をApple Touch Iconと呼びます。 180pxの正方形を1枚そろえると、多くの端末をまかなえます。

Androidはmanifestに192pxと512pxを並べて指定します。 ホーム画面とスプラッシュ表示の両方に届きます。

角丸は画像側でつける必要はありません。 四角いまま渡せば、角丸はOS側が自動でつけて表示します。

関連記事