Since a few years ago, favicons which had lost much of their relevance have been resurrected since more and more browsers now support them, and infact make them a very visual part of their user's experience. Tablets and smartphone browsers also make use of these icons. This has led to an increased importance to having a good favicon. However, the ways these icons are presented vary according to the client browsing the website. Desktops require a certain icon, Apple devices require something different, different sizes also complicate matters.
A simple solution - Free Online Icon Generator for Apple and Favicon icons
Iconifier.net is a simple solution which given a square JPG, GIF or PNG will generate an icon set of various sizes so that you can use and choose the ones you want to support on your website. You just then need to download the generated icons and embed into your website's code
Embed the favicons icon(s) in your Joomla template
After having created the favicon.ico icon using Iconifier.net above, and placing it in the root of your website add the following code between the <head> and </head> of your website's Joomla template
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>
The following is the easiest way to create a favicon in your Joomla website:
- Create a 16 * 16 pixel ICON image, name it favicon.ico
- Using the Media Manager (Site > Media Manager), upload and replace the default icon with your own icon
The Favicon Maker is a site which allows you to upload your image (most major formats) and converts it to stylish 16 * 16 icon image. So if you don't have a way of creating the .ico but have an image (such as your logo) that you want to convert to the favicon - you can use one of the free favicon image generators found online.
If you're not happy with Favicon maker there are plenty of others you can use:
Copy the file to the /joomla/templates/<your template> directory and make sure you've named it favicon.ico.
How to create Favicons for Apple Devices
After having created the various icons using the above website, you will also have to include a slightly different code for Apple (and possibly Android) devices. Again upload the icon files generated to the root of your website and place the following code in between the HEAD tags.
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/touch-icon-114×114.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/touch-icon-72×72.png” />
<link rel=”apple-touch-icon” href=”/touch-icon-iphone.png” />
iOS Devices will automatically handle this in their browser and resize and add some effects accordingly for it to match the styling of the device they are being seen on
How to create FavIcons for Android Devices
Android has built upon the Apple touch icons but expect the icons to be in their final version already. This final version is "PRECOMPOSED", and Android devices expect this tag to be in place. So upload new versions, with slightly different names (such as adding pre-composed in the name) and then add the following markup. The all important part is the rel=apple-touch-icon-precomposed. Put the files in the root of your website and add this code between the <head> and </head> tags of your html
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” href=”/touch-icon-iphone-precomposed.png”>
More details on Favicons can be found on Wikipedia: https://en.wikipedia.org/wiki/Favicon