ワードプレス

favicon(ファビコン)の設定と作り方-Favicon Generator. For real.-【コード編集あり】

ファビコンアイコン

HTMLCSSwordpressの知識が少しあって、ファビコンの設定を全ブラウザ、各端末を完璧に設定したい方向けに設置方法を解説します。

有料テーマなどを使用している場合はテーマのアップデートで設定のやり直しになるので、設定が完了した際にはバックアップをする事をおススメします。

設定のやり直しが手間な方は、子テーマを作ってそこにheader.phpを作り、親テーマは触らずに子テーマのheader.phpを編集しましょう。子テーマに関しては下記の記事に詳しく書いています。

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。...

ファビコン|Faviconとは

ファビコン(favicon)とは、ブラウザの(タブ、ブックマークバー、履歴など)に表示される小さな画像のことで、Web サイトの「ブランド」を視覚的に表しユーザーが検索結果を見た際に、一目でサイトを見分けられることを促します。ファビコンの役割と設置方法と設置事例を紹介します。

ファビコン
ファビコン

ファビコンの設定は外観カスタマイズサイト基本情報サイトアイコンに画像をアップロードで簡単に設定は出来ますが、すべてのデバイスには対応していません。

サイトアイコン
サイトアイコン

ファビコンのチェック

実際に配置されたイメージを画面で確認することができるサイトで、URLを入力して「Check Favicon」をクリックします。

Favicon Generator. For real.

➡ Favicon Generator. For real.

Favicon Generator. For real
Favicon Generator. For real

iOSやAndroidなど様々な端末でどのように表示されるのか確認できます。

色がグリーンになっていればファビコンの設定はOKです。色が赤くなっていれば、ファビコンのサイズ調整と設定が必要になってきます。

何も設定をしていなければ、どこかの項目が赤色になっています。

ファビコンチェック
ファビコンチェック

sitechecker.pro

➡ Favicon Checker

sitechecker.pro
sitechecker.pro

ファビコンを一括生成

様々なファビコンを一括生成

➡ 様々なファビコンを一括生成

iPhoneやAndoroid端末Windowsタブレットなど、色々なデバイスに合わせてfaviconを用意する必要があり、faviconを一括で生成してくれるとても便利なサイトです。

「画像ファイルを選択」をクリックし、ファビコンにしたい画像を選択し「ファビコン一括作成」をクリックすると、様々なサイズのプレビューが表示されるので、「ファビコンダウンロード」クリックすると.zipファイルが作成されます。

ファビコン一括生成
ファビコン一括生成

元となる画像のサイズは大きくなっても、画質が荒れないよう幅500px×高さ500pxぐらいのサイズで作成したものを使うのがいいです。

ファビコンプレビュー
ファビコンプレビュー

「ファビコンダウンロード」をクリックするとzipファイルがダウンロードされるので、解凍すると下の画像のように「サイズ」「ファイル名」が大量に生成されます。

生成された画像一覧

favicons
favicons

大量に生成されますが、使用するのは下記ファイルのみになります。

PNGからSVG変換

オンラインでPNGをSVGに変換

➡ PNG SVG 変換

SVGのファイルも必要になってくるので、PNGをSVGに変換して再利用しましょう。

使用ファイル一覧

wordpress直下


apple-touch-icon.png

browserconfig.xml

favicon.ico

manifest.json

WordPressの直下
WordPressの直下
ファイル名サイズpx
apple-touch-icon.png180px x 180px
browserconfig.xml
favicon.ico48px x 48px
manifest.json
画像サイズ

※適切な画像サイズを記載しています。

※注意点:有料wordpressテーマはheader.phpに上記のfavicon設定がされている場合があるのでコメントアウトしましょう。

imgフォルダのfaviconの中に置くファイル


android-chrome-192x192.png

android-chrome-512x512.png

android-touch-icon.png

apple-touch-icon.png

favicon.ico

favicon.svg

favicon-16x16.png

favicon-32x32.png

favicon-safari.svg

icon-96x96.png

mstile-70x70.png

mstile-150x150.png

mstile-310x150.png

mstile-310x310.png

img/favicon
img/favicon
ファイル名サイズpx
android-chrome-192×192.png192px x 192px
android-chrome-512×512.png512px x 512px
android-touch-icon.png192px x 192px
apple-touch-icon.png180px x 180px
favicon.ico48px x 48px
favicon.svg512px x 512px
favicon-16×16.png16px x 16px
favicon-32×32.png32px x 32px
favicon-safari.svg512px x 512px
icon-96×96.png96px x 96px
mstile-70×70.png128px x 128px
mstile-150×150.png270px x 270px
mstile-310×150.png512px x 512px
mstile-310×310.png512px x 512px
画像サイズ

※適切な画像サイズを記載しています。

編集が必要なファイル

header.phpbrowserconfig.xmlmanifest.jsonは少し編集が必要になってくるので下記コードをコピーペーストで編集しましょう。

header.phpの編集

header.phpは<head></head>の中に下記の<!–favicon–>の部分をコピー貼り付けします。

theme-colorのcontent=”#”の部分は色の設定になるので、自身のサイトメインカラーを設定しましょう。AndroidやGoogleアプリで独自の色を設定です。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon -->
<link rel="icon" type="image/svg+xml" href="<?php echo esc_url(get_theme_file_uri()); ?>/../jin-child/img/favicon/favicon.svg">
<link rel="icon" type="image/png" href="<?php echo esc_url(get_theme_file_uri()); ?>/../jin-child/img/favicon/icon-96x96.png" sizes="96x96">
<link rel="mask-icon" href="<?php echo esc_url(get_theme_file_uri()); ?>/../jin-child/img/favicon/favicon-safari.svg" color="#3a4575">
<link rel="apple-touch-icon" href="<?php echo esc_url(get_theme_file_uri()); ?>/../jin-child/img/favicon/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="<?php echo esc_url(get_theme_file_uri()); ?>/../jin-child/img/favicon/android-touch-icon.png" sizes="192x192">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-title" content="design-pull.">
<meta name="application-name" content="design-pull.">
<meta name="theme-color" content="#3b5d82">
<meta name="msapplication-TileColor" content="#3b5d82">
</head>

browserconfig.xmlの編集

ファイル自体はwordpressの直下にあり画像の階層指定がwp-content→themes→自身のwordpressテーマ名imgfaviconとなっているので、ここは書き換えが必要になります。

“theme-color”は自身のサイトメインカラーを設定。

※当サイトのwordpressテーマは「jin」を使用しているので/jin/となっています。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/wp-content/themes/jin-child/img/favicon/mstile-70x70.png"/>
      <square150x150logo src="/wp-content/themes/jin-child/img/favicon/mstile-150x150.png"/>
      <wide310x150logo src="/wp-content/themes/jin-child/img/favicon/mstile-310x150.png"/>
      <square310x310logo src="/wp-content/themes/jin-child/img/favicon/mstile-310x310.png"/>
      <TileColor>#3b5d82</TileColor>
    </tile>
  </msapplication>
</browserconfig>

manifest.jsonの編集

“short_name”:””,の部分は自身のサイトタイトルに変更。

background-colortheme色はサイトのメインカラーを設定。

imgの階層のthemes自身のサイトテーマ名faviconで設定。

※当サイトのwordpressテーマは「jin」を使用しているので/jin/となっています。

{
	"name": "design-pull",
	"short_name": "design-pull",
	"display": "standalone",
	"background_color": "#3b5d82",
	"theme_color": "#3b5d82",
	"icons": [
		{
			"src": "/wp-content/themes/jin-child/img/favicon/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "any maskable"
		},
		{
			"src": "/wp-content/themes/jin-child/img/favicon/android-chrome-512x512.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "any maskable"
		}
	]
}

ファイル内のコード変更が終わったら、FTPソフトを使ってファイルを下記の階層に入れていきましょう。

自動で生成されたファイルの中にwordpressの直下に4つのファイルをいれて、 imgフォルダにfaviconフォルダを作り中に15個のファイルをいれます。

WordPress直下
WordPress直下
themes→img→favicon
themes→img→favicon

注意点

プラグイン「SiteGuard WP Plugin」などのセキュリティを導入している場合CMS-数字が上の階層に出来ているときはCMS-数字の階層にファイルをおきます。

CMS-数字_階層

browserconfig.xmlmanifest.json内コードでの階層指定も”cms-469327/wp-content/themes/jin-child/img/favicon/android-chrome-512×512.png”と追記が必要です。

ブラウザで確認

上のキャプチャのようにファイルを入れて、再度ホームページをキャッシュクリアし更新すると生成したファビコンに変わっているはずです。(ショートカットキー「ctrl + F5」)

確認でまた、Favicon Generator. For real.サイトに入り、自身のサイトのURLを張り付けて全項目が緑色になっているか確認してみてください。

設定が問題なく済むと下のキャッチ画像のようにアンドロイド限定ですが、manifest.jsonで設定した色とshort_nameが表示されます。

manifest.jsonの設定反映
manifest.jsonの設定反映

子テーマを使用している方は階層が変わる場合があります。

ios・android
ios・android
windows・mac
windows・mac

オールグリーンになった場合はすべてのデバイスにファビコンが対応できていると思います。