Hi,
I´ve placed a favicon.ico file in the server folder but it does not display, added a favicon.png file along but still no success…
Any trick to change the situation ?
…Page wont look so “Pro” without one…and clients will run away !!! 
Thanks
I think that this has to do with browser cache. I often find that the icon appears within a few days.
Make sure that the favicon.ico file is in the site’s root directory and all should be fine.
For an overboard solution, have a look at https://stackoverflow.com/questions/2409759/firefox-3-6-9-drops-favicon-when-changing-window-location/4630726#4630726 (not my recommendation!)
thanks Ben, I thought of that too so I installed the “Clear Cache” extention to chrome and tested on FF too…I guess its working properly.
could it be that its looking for this favicon.ico in some other folder than the one with the index.html where it is now ?
Have you tried adding
<link rel="icon" href="/favicon.ico">
or similar to your header?
dont know how to do that…
// link rel=“icon” href="/favicon.ico">
// script src=“js/jquery-3.3.1.slim.min.js”>
// link rel=“stylesheet” type=“text/css” href=“fontawesome4/css/font-awesome.min.css”>
// meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
// link rel=“stylesheet” type=“text/css” href=“bootstrap/4/css/bootstrap.min.css”>
// /head>
Is that the header file you are referering to ?
If you want to use png, then add the following meta tag in the head section
<link rel="icon" type="image/png" href="/favicon.png">
2 Likes
The header is the section between <head> and </head>
here is an example from one of my pages
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
p.s. lots of websites to make icons free from a master image and all links needed
ok, been away a while…
thanks for sharing,
—I though only a single favicon had to be used for a website, but I see that you link all sorts of size…
is that meant to “display favicon in a better way” according to the targeted Device display size ?
tks
Ok people, this is what happens…I copied, renamed, added lines - similar to the above one you give as example…and nothing was showing…
I tested on ultimate version of Chrome, FF and Opera…and nothing.
Googled again to Stackoverflow for similar “undisplaying issue” and found this sugestion:
myIcon.ico
<link rel=“shortcut icon” href=“myIcon.ico” type=“image/x-icon” />
removed all the lines like :
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
placed instead a single line as up above - upload again an *.ico file and rename it to : myIcon.ico file…
… BAM the Favicon - finally - displays at 1rst trial 
worked fine on all browser Chrome, FF, Opera, Brave…without clearing cache…
Thanks to everyone for helping…
Using this for a simple single letter o small words only
(no image)
generate 6 favicons + manifest.