Favicon (favorite icon) is small image that appears with the website title on the browser tab. The icon increases site’s personality and makes it more attractive. When Web browser client downloads favicon files it should be recognized by the web browser as URL icon to be displayed appropriately. Normally browser is informed about favicon through link element with a rel attribute which has “icon” or “shortcut icon” values. This link tag is placed in the <head> section of HTML document. However it is not necessary for the most of Web browsers to specify favicon file in HTML documents if favicon file has name “favicon.ico” and is located in public HTML root directory. In this situation the browser tries to download fivicon.ico by default. For example site Word Chaos does not have any explicit link elements related to favicon in its HTML pages, however the browser makes attempt to downloads favicon.ico and displays it:
In this case Firefox automatically downloads favicon.ico file and displays it the browser tab. Firefox developer tool shows that HTTP GET request for favicon file download is successful with 200 response code.
If favicon.ico is not found the response code will be 404:
However if your favicon file has different name and/or extension than favicon.ico you need to inform browser about this file explicitly in link tag how I did for ladydebug.com:
|
<link rel="icon" type="image/png" sizes="16×16" href="https://ladydebug.com/favicon16x16.png"> <link rel="icon" type="image/png" sizes="32×32" href="https://ladydebug.com/favicon32x32.png"> |
Now where to place these link tags? Because ladydebug.com is WordPress website the link tags must be placed into head element of the header.php file of WordPress currently active theme:
If you change the theme copy these link tags to header.php file corresponding to that WordPress theme.
That is all I wanted to say about my experience of favicon icon in WordPress websites:
