im trying to become a web developer, but i’ve come across a roadblock with adding favicons. what i want it to do is to display the favicon, but instead it shows a compass sort of thing since im on a MacBook using safari. here are my steps:

1. download the image
2. save it to my website folder
3. use convertio.com to convert it to png format
4. add the following code in the header: <link rel="icon" type="image/png" href="favicon.png">

i don’t know what version of safari im using, but if im guessing, it’s probably the latest because i have a 2023 macbook air. i have tried firefox and microsoft edge on my hp desktop but they don’t work either. i also adjusted their size by using a paint app to 16×16, but no luck either.

i tried using a different computer(hp desktop)
i tried clearing browser cache
i tried using chatgpt(sounds desperate i know)
i tried just taking a break(a couple of days, no biggie)

i expected my favicon to finally display, but no luck. for safari, its a compass. for edge, its a file, and for firefox, i don’t remember, but its the icon that displays when there’s no favicon.