OpenSearchDescription Tab to Search for my website in Google Chrome/ Edge not working

Question

I wanted to have a "Tab to Search" functionality on my website. https://heihitesh.github.io/hit.github.io/

I have adde this to the code

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Example.com</ShortName>
    <LongName>Example.com Search</LongName>
    <Description>Search through Example.com</Description>
    <Query role="example" searchTerms="example search"/>
    <InputEncoding>UTF-8</InputEncoding>
    <OutputEncoding>UTF-8</OutputEncoding>
    <AdultContent>false</AdultContent>
    <Language>en-us</Language>
    <SyndicationRight>open</SyndicationRight>
    <Developer>Example.com</Developer>
    <Tags>tag1,tag2</Tags>
    <Image height="16" width="16" type="image/vnd.microsoft.icon">http://example.com/favicon.ico</Image>
    <Url type="text/html" template="http://example.com/search.html?q={searchTerms}"/>
    <Url type="application/x-suggestions+json" template="http://example.com/suggestions.html?query={searchTerms}"/>
</OpenSearchDescription>

index.html

    <link type="application/opensearchdescription+xml" rel="search" title="Search" href="https://heihitesh.github.io/hit.github.io/opensearch.xml" />```