Adding custom website icon

How to add custom icons to your website?

In order to add a favorites icon to your site (Favicon), create the icon as .ico file and add into your head section of your website this code:

<link rel=”shortcut icon” href=”http://yourwebsitename.com/files/favicon.ico”>
My custom icon image here

The image size is: 16×16 pixel

To add an Icon for iPhone, iPad & Android to Your Website create 3 different size of icon:

iPhone iPhone Hi-Res iPad iPad Hi-Res
57×57 114×114 72×72 144×144

<link rel=”apple-touch-icon” href=”http://yourwebsitename.com/apple-touch-icon.png”>

For early version of iPhones use 57×57 pixel png icon

<link rel=”apple-touch-icon” sizes=”72×72″ href=”http://yourwebsitename.com/apple-touch-icon-72×72.png”>

<link rel=”apple-touch-icon” sizes=”114×114″ href=”http://yourwebsitename.com/apple-touch-icon-114×114.png”>

Do not worry about making the icon edges roundish, iPhones and iPads make them automatically.

For Android devices add this code:

< link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”http://yourwebsitename.com/apple-touch-icon-144×144-precomposed.png” />

Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook