#94 - Creating a Favicon and Apple Icon for your website

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 users 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 website

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

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

The Apple Icons

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

Icons 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 Wikepedia: http://en.wikipedia.org/wiki/Favicon

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!

Translate

who are we?

DART Creations is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists

David attard

Follow us on Social

         

 

 

 

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

The Outstanding october Bundle

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

You'll surely create a perfect website with Divi 3.0!

Divi 3