Favicon of Joomla site has a similar function as an icon for programs you're using every day on your computer or for applications you're using on your mobile device. This is something that will help your visitors to remember and recognize your site. Therefore, you can imagine how important the favicon should be for your website, which is, in this case, your brand, your product, or your virtual office where you meet your clients.
Favicon of Joomla site for browsers
Favicon image will appear before the link of your website in the address bar of all browsers. If someone bookmarks your website, the favicon will appear together with bookmarked text in both the bookmarks bar and bookmarks menu. The images shown here are examples from the Google Chrome browser.
Since the favicon is a very small image of only 16 x 16 pixels, you must think thoroughly what to put on it. For example, it won't be smart to use a photo of your company building, because if such an image is resized to just 16 x 16 pixels, it will become just a blot that shows nothing. Usually, the logo of your site or company is a good choice, but not on all occasions. For example, if your logo is complex, such as Coca Cola logo, resizing it to 16 x 16 pixels will not be possible. That's why the Coca-Cola company decided to use just a white contour of their well-known bottle on the red background. So, the decision of what to use for the site's favicon and making the favicon is an art by itself.
You can make your favicon in form of an image of 16 x 16 pixels, in any graphic editing software, such as Photoshop or GIMP. Save that image in PNG format, as favicon.png. The favicon file should be in proper ICO format, although some modern browsers can use a regular PNG image. It's important to convert it to ICO format to be 100% sure that all browsers will display it correctly. The conversion from PNG to ICO is not complex and it can be done for free using online tools, such as faviconer. Using your site, you can draw your favicon directly or import it as a previously prepared image file. The second option will probably be easier. As output, from faviconer you will get the ICO file named favicon.ico.
It's time to upload the favicon on your site. Using your favorite FTP client (such as Filezilla), you can upload the icon file. We recommend you upload it to the root folder of your Joomla site and the main template's folder (/templates/template_name). You would probably wish to test this immediately. If you don't see your favicon when browsing your site, open the source code of your site (in Chrome, right-click > View Page Source) and check if there's a line that looks like this:
<link href="/templates/template_name/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
If there is such a line, then you probably need to clean the browser's cache or wait some time until the browser discovers the new icon file. A good idea is to visit the site with a browser you are not using regularly or from another computer. If the favicon is shown there, then your default browser probably has the cache issue.
If you don't see the above reference, you must add it manually. Open the index.php file of your Joomla template (/templates/template_name/index.php) in any plain text editor (such as Notepad on Windows or TextEdit on Mac) and paste this line somewhere in the head tag (between <head> and </head>). If you don't have the cache issue and if the ICO file is properly uploaded, it will appear now before the link of your website in the address bar.
Favicon of Joomla site for Apple devices
Many people these days browse your site using mobile devices. Apple uses special convention for their devices (iPhone, iPad and iPod) and Safari browser in these devices looks for PNG files "apple-touch-icon.png" and "apple-touch-icon-precomposed.png". If you want the favicon of your site to be shown on these devices when someone bookmarks your site or put link to your site on home screen, you should create a PNG image that has a size of 100 x 100 pixels. The same image should be saved two times, named "apple-touch-icon.png" and "apple-touch-icon-precomposed.png". Then upload these two images to the root folder of your site. The rest of the job will be done by an Apple device. This includes resizing of the image to the proper site for the current Apple device and adding the famous rounded corners and shadow that all Apple icons have.
It's not necessary to use the same image for favicon and for Apple icon. Since the Apple icon has a larger resolution, you can select a graphic that represents something more complex.