My favicon is showing up fine in Firefox, but for some reason it won't render in Safari. The line of code in my header is: <link rel="icon" type="image/png" href="favicon.png" /> HTML: Safari has a great feature where you can look at the loading of individual page components and loading errors. It shows a loading error for my favicon, which reads "http://--------.com/favicon.ico -- Not Found". I've told Safari the image type of my favicon (image/png) and I've told it the file name (with .png as the file extension). So why is it appending ".ico" to the end of my favicon image name? By the way, the favicon loads fine in Firefox.
seems obvious that safari only supports .ico files for the favicon. there's a png to ico converter somewhere on the web.
I just wanted to post the right answer, so the misinformation above doesn't fester and mislead anyone else. Safari does support .png favicons. Interestingly though, Safari and Firefox locate the favicon tag in the header a bit differently. I had placed my favicon tag (<link rel="icon" type="image/png" href="favicon.png" />) at the very end of the page header, after CSS rules and two Javascript scripts. Apparently Firefox went all the way down there to find the favicon, but Safari refuses. So, I moved the favicon tag higher up in the header, and it loads nicely now.