[How to] Create a Favicon and Apple Icon for your Website

Apple iPhone/iPad

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 in fact, make them a very visual part of their user's experience. Tablets and smartphone browsers also make use of these icons. This has led to an increased importance of 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. 

 

Contents[Show]

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. You can integrate these steps into your web design process.

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 iPhone/iPad (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.

Incidentally, Great iOS and Android developers are not easy to hire - if you're looking to hire a good app developer, and know how to find a good candidate we've got you covered on CollectiveRay. - we'll show you all the great places to find good candidates.

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

About the Author
David Attard
Author: David AttardWebsite:https://www.linkedin.com/in/dattard/
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

 

Best Rated Caching Plugin

Make your website faster 

Step-by-step - free email course, how to make your website load in less than 1 second  

who are we?

CollectiveRay 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

 

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...