Apple Touch Icons and Favicons

New and improved drag and drop + crop features for favicons in LittleHelper 2.0!

When a site is viewed, bookmarked or saved your users will see along with its title a small icon. Joomla Little Helper creates icons both for computers and for smartphones.

Joomla Favicons

Joomla features native support for favicons, the format used by computer browsers.  A favicon is a multi-resolution icon that will display a different image for each size, and usually contains the following formats: 16x16, 24x24, 32x32, 48x48.

Apple touch precomposed icons in Joomla

Apple introduced a markup which is now used by Android and BlackBerry devices as well. The main goal is to provide higher-resolution icons which look good on the new high-res displays.  4 resolutions are required for apple products alone.

Joomla doesn't feature native support for apple touch icons, so using them requires often to manually edit the template files.

Make it easier please?

Joomla Little Helper sticks to its claim: making setting up a new site quick and easy.

All that's required of you is to upload a source logo. Little Helper will then show you the resized versions that will be created.  You can preview how they look and provide alternate versions for selected sizes if you want:

 

At this point, test how the transparency will look against different backgrounds:

and once you're satisfied with the result, you can the "Save and enable" button.

This button does all the magic: it will create the resized apple precomposed images, the multiresolution icon for the favicon (all with transparency!), and configure the LittleHelper plugin to insert the proper markup in your pages.

Ready to save some time? Tired of remembering the apple touch icons naming schemes?  Grab your free copy of Joomla Little Helper today!

What about precomposed apple touch icons?

Icons for apple devices come in two flavours: standard and precomposed. While the former is a bare icon that the apple device will decorate with a border to match its style, the latter is an icon provided for use "as is". The precomposed markup is the only markup supported on Android and BlackBerry devices, and has thus become a standard.

But I really want standard Apple touch icons too!

Joomla Little Helper is designed with the paradigm convention over configuration: this means that it will behave reasonably without any configuration, but with the options you can fine-tune the results.

Once you have used Little Helper to create the precomposed icons (as shown in the above procedure), you can go to the plugin configuration page (find a direct link in the Icon page's toolbar:

where you can easily edit the generated markup, and add your own:

Just remember to clear the cache when you're done and always double-check your results in the browsers.  A broken markup in this configuration may very well break your website, prevent scripts from loading, destroy your layout, and similar earth shattering disasters, so pay attention!