ファビコンが表示されない。

独学でテキストを見ながらWebページ作成を行っています。
テキストに用意された画像を使って作成しています。
画像サイズは32px✖32pxです。

ファイルは
WBCCafe
➜index.html
➜CSS➜style.css
➜images➜favicon.ico

試したこと

・MicrosoftEdge,GoogleChrome両方で表示されない。
・pngからicoに変換したが表示されない。
・ページソースからの画像表示は表示される。

HTML
1<!doctype html>
2<htl lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
6    <link rel="icon" type="image/ico" href="images/favicon.ico">
7  <!-- CSS -->
8  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9  <link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap" rel="stylesheet">
10  <link href="css/style.css" rel="stylesheet">
11
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 class="logo" src="images/logo.svg" alt="WCBカフェホーム"></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        </nav>
24      </header>
25
26      <div class="home-content wrapper">
27        <h2 class="page-title">We'll Make Your Day</h2>
28        <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
29        <a class="button" href="menu.html">メニューを見る</a>
30      </div><!--/.home-content-->
31    </div><!--/.home-content-->
32  </body>
33</html>
34

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