WPにfaviconとタッチアイコンをプラグイン有り無しそれぞれで設置する方法
2021/2/11
2021/10/5
3883 views
favicon タッチアイコン設置
今回はサイトのユーザビリティと完成度を高めるファビコとタッチアイコンの設置方法について解説します。
favicon（ファビコン）の設置方法
favicon（ファビコン）とは？
まずfaviconについて軽く説明しておきます。
faviconとは、パソコンでのブラウザを表示しているときにタブのタイトルの左横に表示されるアイコンのことです。
誰もが見覚えがあると思います。
複数のタブを開いている場合には一目でどのサイトページか分かるためユーザーにとって非常に助かる存在となっています。
またお気に入りの登録された場合にもリストに表示されます。
faviconはサイトを訪れてくれたユーザーのためにも必ず設置しておきたいところです。
Google検索で検索結果一覧にも一時表示されていました。
ファビコンのサイズは？
faviconのサイズは、モダンブラウザ（Edge、Chrome、Firefox、Safari等）では16×16px、Retinaブラウザでは32×32pxとなっています。
しかし、マルイアイコン（.ico）形式にすればそれぞれのサイズに自動で適応してくれるのでそれぞれのサイズを作る必要はありません。
マルチアイコンの作り方は以下のページを参考にしてください。
「favicon.ico」さんでファビコンがあっという間に作成できました！
ファビコンの設置方法
ファビコンをコードで直接記述して読み込むには以下のコードを<head>タグの中に記述します。
<link rel="shortcut icon" href="/images/favicon.ico">※ルートパスは実際に合わせてください
タッチアイコンとは？
次にタッチアイコンとは、スマホ版のファビコンのような存在です。
ウェブページをスマホのホーム画面やブックマーク画面に登録した場合に表示されます。
またSNSでリンクを送信した場合にもURLとともに表示されたりします。
今やスマホでのユーザーは半数以上でありファビコン同様に設定していることが求められます。
タッチアイコンのサイズは？
タッチアイコンのサイズは、iOSのSafariは180×180pxとなっており、アンドロイドのChromeは192×192pxとなっています。
この２つをそれぞれ、「apple-touch-icon.png」と「android-touch-icon.png」という名前でPNG形式で作成します。
| apple-touch-icon.png | 180×180px |
| android-touch-icon.png | 192×192px |
タッチアイコンの設置方法
以下のコードを<head>内に記述することで設置ができます。
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="/images/android-touch-icon.png">※ルートパスは実際に合わせてください
「Favicon Rotator」プラグインを使って設置する
いちいちコードに記述するという手間を省きたい人は、WordPressのプラグインを使って設置することもできます。
「Favicon Rotator」というプラグインを使います。
ただし、ファビコンとタッチアイコンの画像は用意が必要です。
Favicon Rotatorの使い方
1. インストールして有効化する
プラグインから「Favicon Rotator」を検索してインストールし有効化します。
2. それぞれのファイルをアップする
「外観」＞「favicon」へ進み、Browser Iconにファビコンを、Touch Iconにタッチアイコンをアップし、設定保存して完了です。
まとめ
ファビコンやタッチアイコンの設置は正直めんどくさい作業だと思います。
しかし、サイトを利用してくれるユーザーの利便性の為にもぜひ設置ください。
ご質問などあればお気軽にコメントください。
この記事へのコメント
- まだ書き込みはありません