Favicon and Apple Icon for Joomla site - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Favicon of Joomla site has the similar function as 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, your virtual office where you meet your clients.

Favicon of Joomla site for browsers

Favicon of Joomla site in browser barFavicon 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 bookmarks bar and bookmarks menu. The images shown here are examples from Google Chrome browser.

Favicon of Joomla site in browser menuSince the favicon is a very small image of only 16 x 16 pixels, you must think thoroughly what to put on it. In example, it won't be smart to use a photo of your company building, because if such image is resized to just 16 x 16 pixels, it will become just a blot that shows nothing. Usually, logo of your site or company is a good choice, but not in all occasions. In 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 what to use for 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 previously prepared image file. The second option will probably be easier. As output, from faviconer you will get the ICO file named as 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 to upload it to the root folder of your Joomla site and to 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 line, then you probably need to clean browser's cache or to wait some time until 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 have the cache issue.

If you don't see the above reference, you must add it manually. Open 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 ICO file is properly uploaded, it will appear now before the link of your website in the address bar.

Favicon of Joomla site in browser menu

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 have size of 100 x 100 pixels. The same image should be saved two times, named as "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 Apple device. This includes resizing of the image to the proper site for 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. Actually, since the Apple icon has a larger resolution, you can select a graphic that represents something more complex.

Links, Partners and Social Media