faviconが表示されない

1冊ですべて身につくhtml & cssとwebデザイン入門講座という本でhtmlとCSSの学習をしているものです。参考書の通りにコードを書いて、headタグ最後の子要素にファビコン用のタグを足したのですがうまく表示されません。
試してみたこととしては

サンプルコードが分割してフォルダの中に入っていたので部分的にfavicon用タグだけ上書きしてみた。
リンクを張った画像ファイルの名前があっているか確認するためにリンクをクリックしてみたがちゃんと目的のファイルが開いた。
デベロッパーツール下方に"Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/ress/dist/ress.min.css"."と書かれていておそらくこのurl内のcssの形式がおかしいのかな、と思ったが解決法はわからず、
Resource interpreted as Stylesheet but transferred with MIME type text/plain:で検索してみて画像ファイルのタイプが関係しているらしいことはわかったがそこまでで自分のほうで理解が追い付かなくなり、MIME typeについても調べたが結局何をどうすればよいのかわからなかった。
などです。

ファビコンを表示するためにどう変更すればよいのか、このようなことが起こらないようにどう対策すればよいのか、初心者のうちにどう検索したらこのような問題が解決できるかを教えていただきたいです。
よろしくお願いします。

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>WCB Cafe</title>
7    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
10    <link href="css/style.css" rel="stylesheet">
11    <link rel="icon" type="image/png" href="images/favicon.png">
12</head>
13
14<body>
15    <div id="home" class="big-bg">
16        <header class="page-header wrapper">
17            <h1><a href="index.html"><img src="images/logo.svg" alt="WCBカフェホーム" class="logo"></a></h1>
18            <nav>
19                <ul class="main-nav">
20                    <li><a href="news.html">News</a></li>
21                    <li><a href="menu.html">Menu</a></li>
22                    <li><a href="contact.html">Contact</a></li>
23
24                </ul>
25            </nav>
26        </header>
27
28        <div class="home-content wrapper">
29            <h2 class="page-title">We'll Make Your Day</h2>
30            <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ</p>
31            <a href="menu.html" class="button">メニューを見る</a>
32        </div>
33    </div>
34</body>
35
36</html>

CSS3
1@charset "UTF-8";
2/*共通部分*/
3html{
4    font-size:100%;
5}
6body{
7    font-family: "Yu Gothic Medium", "游ゴシック　Medium", "游ゴシック体", "ヒラギノ角ゴ　Pro W3", sans-serif;
8    line-height:1.7;
9    color:#432;
10}
11a{
12    text-decoration:none;
13}
14img{
15    max-width:100%;
16}
17/*HEADER*/
18.logo{
19    width:210px;
20    margin-top:14px;
21}
22.main-nav{
23    display:flex;
24    font-size:1.25rem;
25    text-transform:uppercase;
26    margin-top:34px;
27    list-style:none;    
28}
29.main-nav li{
30    margin-left:36px;
31}
32.main-nav a{
33    color:#432;
34}
35.main-nav a:hover{
36    color:#0bd;
37}
38.page-header{
39    display:flex;
40    justify-content:space-between;
41}
42.wrapper{
43    max-width: width 110px;
44    margin:0 auto;
45    padding: 0 4%;
46}
47/*HOME*/
48.home-content{
49    text-align:center;
50    margin-top:10%;
51}
52.home-content p{
53    font-size:1.125rem;
54    margin:10px 0 42px;
55}
56/*見出し*/
57.page-title{
58    font-size:5rem;
59    font-family:'philosopher',serif;
60    text-transform:uppercase;
61    font-weight:normal;
62}
63.button{
64    font-size:1.375rem;
65    background:#0bd;
66    color:#fff;
67    border-radius:5px;
68    padding:18px 32px;
69
70}
71.button:hover{
72    background:#0090aa;
73}
74.big-bg{
75    background-size:cover;
76    background-position:center top;
77    background-repeat:no-repeat;
78}
79#home{
80    background-image:url(../images/main-bg.jpg);
81    min-height:100vh;
82}
83#home .page-title{
84    text-transform:none;
85}

このようなフォルダ構成になっています

同じ質問をしている方への回答を参考にして画像ファイルをicoファイルにしてコードを書き換えましたがうまくいきませんでした。以下がそのhtmlファイルです。cssについての書き換えはしておりません。

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>WCB Cafe</title>
7    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
10    <link href="css/style.css" rel="stylesheet">
11    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
12</head>
13
14<body>
15    <div id="home" class="big-bg">
16        <header class="page-header wrapper">
17            <h1><a href="index.html"><img src="images/logo.svg" alt="WCBカフェホーム" class="logo"></a></h1>
18            <nav>
19                <ul class="main-nav">
20                    <li><a href="news.html">News</a></li>
21                    <li><a href="menu.html">Menu</a></li>
22                    <li><a href="contact.html">Contact</a></li>
23
24                </ul>
25            </nav>
26        </header>
27
28        <div class="home-content wrapper">
29            <h2 class="page-title">We'll Make Your Day</h2>
30            <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ</p>
31            <a href="menu.html" class="button">メニューを見る</a>
32        </div>
33    </div>
34</body>
35
36</html>

m.ts10806

2020/11/11 09:37

ress.min.cssは関係ないかと思いますが、faviconは指定した場所に指定したファイル名で存在しているのでしょうか。

m.ts10806

2020/11/11 09:42

あとは調べて出てくるような対策くらいでしょうか・・

退会済みユーザー

2020/11/11 10:24 編集

回答ありがとうございます VScodeで書いていて、htmlのページからファイル名をクリックして目的のファイルを開けているので大丈夫なはずです。追記htmlファイルのコードの画像ファイルを参照している部分からマウスの左クリック+ctrlキーで目的の画像ファイルに飛べています。

m.ts10806

2020/11/11 09:50

「なはず」というのはプログラミングをやっていくうえではあまり信用できない言葉のうちの1つなので、「確実」にしてください。結局、ブラウザで表示したときに参照できてなければ意味がありません。「htmlのページからファイル名をクリックして」というだけでは全ての人が同じ操作をしないと思います。質問本文に具体的に記載してください。画面キャプチャなども適宜利用してください。

退会済みユーザー

2020/11/11 10:08

ご指摘ありがとうございますフォルダ構成がわかるようにエディタの一部をキャプチャしました。

退会済みユーザー

2020/11/11 10:45

そもそも問題が起こっていない状態でした。指摘をくださったm.ts10806様には申し訳ありませんでした。