As per OP's update, It was not showing up locally, but as per OP's update, once I uploaded it to the server, it was fine.
Since this is a simple, static html website, I have the luxury of working on it without running a local webserver.
A webserver will generally automatically serve up the favicon, if there is one, by default.
But when not running a webserver, the browser itself will not just read the directory looking for additional files, say a favicon.ico, unless it is listed in the html document.
So, while I had the following items in the head
tag:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
I did not also include a reference for plain 'ol favicon.ico
.
Even though, the favicon.ico
file was included, in addition to the images listed above.
Once I added the following line:
<link rel="icon" type="image/x-icon" href="favicon.ico">
It did also show up in my browser, when I viewing the local file, even when not serving it through a local server.
So icon showed up fine when it ran on the live server, but not locally.
I mention this explicitly because the favicon generator I used, kindly supplied the code, icons, manifest, and instructions. However, while it included the favicon.ico
image, it did not include a <link>
to that file in the code to add to the html
document.
I guess that service presumes favicon.ico
will automatically be served up and used by all browsers by default, so only the "alternate" versions needed to be explicitly added to the head tag.
Evidently, they don't consider that when viewing files locally (aka not serving them up locally), we aren't interested in seeing the favicon?
<link rel="icon" type="image/x-icon" href="favicon.ico">
to thehead
(next to the 32, 16, and 180 favicon variationlink
s) solved the issue locally. Since I'd includedlink
s for the larger icon sizes, and the manifest, I didn't think twice about whyfavicon.ico
wasn't showing up! :-) – SherylHohman