A favicon, which is the abbreviated term for ‘Favorites Icon’ is an icon which is associated with a specific website. The term can also be used interchangeably with page icon, URL icon or website icon. Browsers which are compatible with favicons may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, as well as next to the page’s title in a tabbed document interface.
The original means of defining a favicon was by placing a file called favicon.ico in the root directory of a webserver. This would then automatically be used in Internet Explorer’s favorites display. Later, however, a more flexible system was created, using (X)HTML to indicate the location of an icon for any specific page. This is achieved by adding two link elements in the <head> section of the document. When this is achieved, any appropriately sized image which is 1616 pixels and above can be used. Even though quite a few people utilise the ICO format, other browsers now also support the animated GIF and PNG image formats.
Most modern browsers implement both methods. Because of this, web servers receive many requests for the ‘ favicon.ico’ file. This is done even if it doesn’t exist. Server administrators find this practice frustrating simply because this process leads to the creation of several server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser’s cache is emptied. With the advancement of technology however, namely newer versions of browsers, this annoyance is no longer a concern. Also there are easy to manoeuvre tools such as the Favicon by RealFaviconGenerator plugin to help you along the way.
The Favicon by RealFaviconGenerator Plugin
This awesome plugin gives you the option to generate and setup a favicon for desktop browsers, iPhone/iPad, Android devices, Windows 8 tablets and more. With RealFaviconGenerator, anyone can literally design an icon that looks great on all major platforms. The favicon is not just a single favicon.ico file dropped in the middle of your website. Nowadays, with so many different platforms and devices, several images are required to get the job done properly. For example, iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts.
So a first generation iPhone needs a 57×57 picture, while a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also use these pictures if it finds them. Windows 8 takes another route with a dedicated set of icons and HTML declarations. Each platform also requires different UI guidelines. For example, the classic desktop favicons often use transparency. But iOS requires opaque icons. And Windows 8 has its own recommendations. Seems confusing? Not to worry! RealFaviconGenerator plugin will make the whole process easy to handle.
Platforms Supported by RealFaviconGenerator
- Windows (IE, Chrome, Firefox, Opera, Safari)
- Mac (Safari, Chrome, Firefox, Opera, Camino)
- iOS (Safari, Chrome, Coast)
- Android (Chrome, Firefox)
- Surface (IE)
How to Setup RealFaviconGenerator on Your Website
Before proceeding, download the RealFaviconGenerator here. Once the plugin is installed, go to Appearance then click Favicon. Select your master picture from the Media Library and click ‘Generate Favicon’. You will then be redirected to RealFavicongenerator to edit your favicon. After you’ve successfully completed this step, you will then be taken back to the WordPress Dashboard and you will notice that your favicon has been automatically installed. Now that you’re all set, you can load your web page and view the favicon in the address bar.