【超初心者向け】WordPressテーマ、ファビコン設定

WEB

【簡単】TCDテーマ(Muum)ファビコン設定

ファビコンとは

WEBページを制作したらファビコンの設定をしましょう。ファビコンとは、ページを閲覧したときにタイトルタブの左側に小さく表示されているアイコンのことです。これを設定しないとこんな感じに表示されてしまいます。

favikon

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” />

nono

nono

住宅ローン完済。子育て終了。定年近い夫、社会人2年目の息子と暮らす50代主婦。パソコン教室運営。

関連記事

nono

nono

住宅ローン完済。子育て終了。定年近い夫、社会人2年目の息子と暮らす50代主婦。パソコン教室運営。

micel

micel

理系メーカーで5年間、社畜として飼われていましたが、副業で¥617円(時給¥200円くらいww)稼いで価値観が変わったサラリーマンの金錬ブログです。

ランキング

  1. 1

    【誰でもできる】TOSHIBA dynabookのSSD換装(クローン)方法を簡単解説します!

  2. 2

    【超簡単コピペでできる】Contact Form 7、送信ボタンの色変更方法!

  3. 3

    【ジャストカーテン】ヤマダ電機でオーダーカーテン購入

最近の記事 おすすめ記事 特集記事
  1. 【Flutter】syncfusion_flutter_calendarパッケージを使ってカレンダーを作成

  2. 【Flutter】Drawerでメニューリストを表示する

  3. 【Flutter】TabVarViewを使った画面の切り替え

  1. Apple信者が紹介するApple Watch SEの便利な使い方!

  2. 【超簡単コピペでできる】Contact Form 7、送信ボタンの色変更方法!

  3. 【誰でもできる】TOSHIBA dynabookのSSD換装(クローン)方法を簡単解説します!

  1. 屋根リフォーム実践体験記録!【オベロン屋根カバー工法】良かったこと、失敗したことを実体験からご紹介!

  2. 【屋根・外壁リフォーム】だまされるな!業者によっては数十万の差はあたりまえ。相見積調査を一挙紹介!

  3. 反ってしまった外壁の補修は張り替えしかないのか?

TOP