WEBサイトのアイコン（favicon）の作り方（まとめ）

WEBサイトのアイコン（favicon：ファビコン）の作り方。

• WordPress以外で作ったページの場合
  1. WEBサイト用アイコン（favicon）を作る
  2. iPhone用アイコン（apple-touch-icon）を作る
  3. ページにアイコンを適用させる
• WordPressで作ったページの場合

WEBサイト用アイコン（favicon）を作る

まずは400 × 400 ピクセルくらいで、アイコン用画像を作る。
最小で16 × 16 ピクセルで表示されるので、小さくなっても分かりやすいシンプルなの。

画像を作ったら、下記のページで一気にアイコンを生成する。

様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/

生成したファイルを解凍すると大量のアイコンが入ってるので、WEBサイト用アイコンにfavicon.icoを選択する。

iPhone用アイコン（apple-touch-icon）を作る

上記で生成したファイルから、apple-touch-icon-152×152.pngを選択する。
後で面倒なので、-152×152のサイズ部分は消してリネームしておく。

ページにアイコンを適用させる

ルートディレクトリに、上記で選んだ2ファイルを格納し、アイコンを表示させたい全ページに以下のコードを記述する。

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">

WordPressの場合

WordPressで作成している場合は、512 × 512 以上の画像を用意して、「外観」→「カスタマイズ」→「サイト基本情報」にある、サイトアイコンという設定項目にて画像を指定すればオッケー。