How can I add this favicon to my html tab? - html

Question

I basically need the tab header which current holds values 1,2,3 I would like changed to a favicon logo but because they are label tabs it wont display here is my code:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<section class="home" id="home">
<div class="home-text">
<h1>Horrizion Travel</h1>
</div>
<div class="my-tabs">
<input type="radio" id="tabfree" name="my-tabs" checked="checked">
<label for="tabfree" >1</label>
<div class="tab">
<h2>Air Travel</h2>
<P>This is Tab 1</P>
</div>
<input type="radio" id="tab-2" name="my-tabs">
<label for="tab-2">2</label>
<div class="tab">
<h2>Coach Travel</h2>
<P>This is Tab 2</P>
</div>
<input type="radio" id="tab-3" name="my-tabs">
<label for="tab-3">3</label>
<div class="tab">
<h2>Train Travel</h2>
<P>This is Tab 3</P>
</div>
</div>
</div>
</section>
I added and linked the favicon but it deletes the other tabs when I input it. I think this is because it selects the next lable in order to check it as they are css tabs.
<i class="fa-solid fa-tickets-airline"></i>
`
#dest .my-tabs{
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 50px auto;
padding: 25px;
}
#dest .my-tabs input[type="radio"] {
display: none;
}
#dest .my-tabs label{
padding: 25px;
background-color: #5a7184;
font-weight: bold;
}
#dest .my-tabs .tab{
width:100% ;
padding: 20px;
background-color: #5a7184;
order: 1;
display: none;
}
#dest .my-tabs h2{
font-size: 2em;
}
#dest .my-tabs input[type="radio"]:checked + label + .tab{
display: block;
}
#dest .my-tabs input[type="radio"]:checked + label{
background: var(--main-color);
}
`