【簡単】TCDテーマ(Muum)ファビコン設定
ファビコンとは
WEBページを制作したらファビコンの設定をしましょう。ファビコンとは、ページを閲覧したときにタイトルタブの左側に小さく表示されているアイコンのことです。これを設定しないとこんな感じに表示されてしまいます。
WordPressで作成したものだとWordpressのアイコンがそのまま表示されてしまいます。
サイトの信頼性を持たせる意味でもきちんと設定しておきたいところです。
ファビコンが表示される場所
パソコンページタイトルタブ左
パソコンお気に入り
見落としがち、MSN検索下部分
google Crome ブックマーク
TCDファビコン設定方法
おかねるぶろぐではTCDワードプレステーマ「Muum」を使っています。先にTCDテーマのファビコン設定方法についてご案内します。
TCDテーマオプションから基本設定→ファビコンの設定を選んで画像を設定します。
ブラウザのアドレスバーやタブで表示されるファビコン(サイトアイコン)を設定します。
.ico、.png、.gif形式のファイルが利用できます。.icoファイルを利用されることをお勧めします。
ファビコン画像 (推奨画像サイズ:横幅16px、縦幅16px)
とありますが、この設定方法だとスマートフォンで「ホーム画面に追加」で、WEBサイトのショートカットを作成すると、設定した内容が反映されません
反映されない場合、WEBページのトップページが表示されます。
TCDテーマは088以降ファビコン設定が廃止されており、Wordpress基本機能を利用したほうがよいです。
WordPress基本機能、ファビコン設定方法
ワードプレスの基本機能から設定する方法をご案内します。まず、512×512サイズのPNGファイルを用意し、「外観→カスタマイズ→サイト基本情報」から、サイトアイコンの「画像を変更」からサイズ512×512のPNGファイルを設定します。
最後に、設定したファビコンの情報は、HTMLヘッダーに以下のように反映されています。必要なファビコンが4種類、ワードプレスで自動で作成されているのが分かります。
<link rel=”icon” href=”https://okaneru.com/wp-content/uploads/2021/05/cropped-favicon-32×32.png” sizes=”32×32″ />
<link rel=”icon” href=”https://okaneru.com/wp-content/uploads/2021/05/cropped-favicon-192×192.png” sizes=”192×192″ />
<link rel=”apple-touch-icon” href=”https://okaneru.com/wp-content/uploads/2021/05/cropped-favicon-180×180.png” />
<meta name=”msapplication-TileImage” content=”https://okaneru.com/wp-content/uploads/2021/05/cropped-favicon-270×270.png” />