ファビコン（サイトアイコン）の設定／WordPress

ファビコンとは
WordPress設定手順
WordPress 画像の作成
1. 画像のサイズと形式
2. 画像制作サイト
テキストエディタ使用
1. 画像サイズ
2. 画像の大きさ変換サイト
ファビコンが表示されない時
参考にしたサイト

ファビコンとは

ファビコンとは、サイトのアイコンのことで、スマホのホーム画面に出るアイコンや、パソコンでGooglechromeを使用した際に上に出るタブに表示されるアイコンを指します。

自分のサイトがブランドとなるようなもので、目印となるものなので設定しておきます。

WordPress設定手順

手順

画像作成（Wordpressの場合は512×512pxのPNG画像がおススメ）
管理画面左の欄にある「外観」をクリック
「カスタマイズ」をクリック
「サイトの基本情報」をクリック
「サイトアイコン」欄のの「画像の変更」からファイルを選択
「公開」をクリック

WordPress 画像の作成

画像のサイズと形式

画像は、Wordpressの場合、512×512pxのPNG画像がおススメとされています。

私は他のサイトでは「.ico」形式を使用しています。

「.ico」形式とは、複数のサイズを含む画像形式のことです。

１つのファイルに複数の異なるサイズ（16px・32px・64pxなど）を含んでいるもので、いろいろな場所に対応できる形式になります。

WordPressでは、「.ico」形式ではなくても、512px以上であれば、複数の異なるサイズを自動で設定してくれる画期的なものになっているようです。

画像制作サイト

私は画像をよく「canva」を使用して作成しています。

ファビコンは、パソコンでみると透過画像が素敵に見えます。

無料プランだと透過画像の作成ができないので、スマホの「ibisPaintX」を使用して透過にして設定しました。

画像制作については勉強中です。

テキストエディタ使用

基本は複数の画像サイズを用意して、HTMLファイルに入力します。

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/icon-512.png" sizes="512x512">

画像サイズ

・32×32px　.ico形式

大きさ	形式	用途
32×32px	.ico	Internet Explorer（IE）といった古いブラウザにも対応
180×180px	PNG	Apple製端末のタッチアイコン用
なんでもOK	SVG	ChromeやFireFoxといったモダンブラウザ用 SVG形式の画像は拡大縮小しても画像品質が劣化しない画像ファイル1つで様々な大きさのでファビコンをきれいに表示
512×512px 192×192px	PNG	Android端末用