What is a favicon?
A favicon is a small – most commonly 16x16px – icon that represents your website. Favicons are best known as the image in the address bar of your web browser.
For example:
Favicons have been around since 1999 with the launch of Internet Explorer 5 and have a variety of other uses, from web browser bookmarks to feed aggregators … from desktop shortcuts to social media shares.
Here you can read more about the interesting history of the favicon on Wikipedia.
Why not keep the Joomla favicon?
Since it’s main role is to represent your website, the image chosen for the favicon is usually a miniature version of the website logo.
You’re probably familiar with the standard Joomla favicon:
It’s a nice enough icon: colourful, easy to recognise … but it doesn’t represent you, your company or your website … and so it needs to be changed! 🙂
Ever heard the expression ‘A picture is worth a thousand words’? Probably so. After some Googling we found out that the original quote was actually ‘A picture is worth ten thousand words’ stated by Fred R. Barnard, of Printers’ Ink, 10 March 1927.
Why is this important? Well it’s the little things that count the most. And it’s the attention to details – like the favicon – that help turn a good website into a great website.
Image dimensions, file format and filename
- The dimensions of your image should be 16×16 pixels or 32×32 pixels.
- The image format should be either PNG (W3C standard), GIF, or ICO.
- The filename can be anything, but we recommend you stick to the de facto standard, e.g. favicon.png.
Creating a favicon
Creating a favicon is really easy. You can either show off your Photoshop, Gimp or MS Paint skills (or any other tool of your preference) and create one yourself or there are various handy online favicon generators.
Here some free online tools we’ve used in the past:
Uploading the favicon to your Joomla site
Once you’ve generated your favicon, all that’s left to do is to upload it to your website. The easiest way to do so is to connect to your Joomla directory using an FTP client, or you can also use the Joomla Media Manager.
All you need to do is upload your favicon to the yourwebsite.com/templates/<your template> directory, which is the standard location for a favicon. If there’s a favicon already present you can simply overwrite that file.
Once the file is uploaded, simply refresh the website in your browser and voila! … you should see your very own personalised icon in the browser tab.
I can’t see my favicon?!
If you can’t see your favicon after completing the steps above, here’s a few tips:
- Try to clear your browser Cache. Web browsers store a local copy of the favicon file and aren’t always that keen to overwrite this local file.
- Make sure your favicon follows the standard naming convention. The file should be called favicon.png or favicon.ico or favicon.gif.
- Try instead to replace the favicon.ico in the root directory of your website. Usually there is also a favicon stored there – yourwebsite.com/favicon.???
- Some Joomla templates provide the option to manually select the favicon file. If all else fails try checking within your template settings for this option.
Pssst … if you like your new icon and want to go one step further you can also do the same for the Joomla backend. Just follow the same steps and replace the favicon.ico here yourwebsite.com/administrator/templates/<your admin template> 😉
