ワードプレス

【2022年版】favicon(ファビコン)の設定と作り方【コード編集あり】

ファビコンアイコン

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

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

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

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

ファビコン|Faviconとは

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

ファビコン
ファビコン

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

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

ファビコンのチェック

▪Favicon Generator. For real.
https://realfavicongenerator.net/

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

Favicon Generator. For real
Favicon Generator. For real

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

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

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

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

ファビコンを一括生成

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

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

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

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

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

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

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

プル

わざわざ自分で一つ一つ作成する手間が省けて助かっています

生成された画像一覧

favicons
favicons

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

PNGからSVG変換

▪オンラインでPNGをSVGに変換
https://cdkm.com/jp/png-to-svg

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

使用ファイル一覧

wordpress直下

  • apple-touch-icon.png
  • browserconfig.xml
  • favicon.ico
  • manifest.json

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

  • android-chrome-192×192.png
  • android-chrome-512×512.png
  • android-touch-icon.png
  • apple-touch-icon.png
  • favicon.ico
  • favicon.svg
  • favicon-16×16.png
  • favicon-32×32.png
  • favicon-safari.svg
  • icon-96×96.png
  • mstile-70×70.png
  • mstile-150×150.png
  • mstile-310×150.png
  • mstile-310×310.png

編集が必要なファイル

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

<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>
header.php
header.php
<?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>
{
	"name":				"",
	"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"
		},
		{
			"src": "/wp-content/themes/jin-child/img/favicon/android-chrome-512x512.png",
			"sizes": "512x512",
			"type": "image/png"
		}
	]
}

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

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

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

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

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

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

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

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

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

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

↓下記本は自身がこの1冊でWebすべての基本が身についたお勧めの本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

▪1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSとWebデザインを一気にまるごと学べる!1つのサイトを実際に作りながら学んでいくやさしい作りになっている本です。「これからWebサイトを作り始める初心者」「HTMLとCSSを基本から学びたい人」「美しいデザインのWebサイトを作りたい人」「Webの最新技術を学びたい人」この1冊で必要なことがすべて学べます。

book
created by Rinker
¥2,486 (2022/10/04 17:48:05時点 楽天市場調べ-詳細)

↓さらに、一歩進んだWebサイト制作の知識を学びたい方はこちらもお勧めです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

▪ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
Web界隈やデザイナーに大人気で、Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、Manaさんによる渾身のHTML&CSSとWebデザインの実践知識が一気に学べる本です。

book
created by Rinker
¥2,728 (2022/10/04 16:49:50時点 楽天市場調べ-詳細)
プル

全端末とブラウザに対応させる設定は大変ですが、オールグリーン表示になった時はうれしくなりますね。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA