A favicon , i.e. “favorites icon” and also known as a website icon or bookmark icon is a 16×16 pixel square icon display with that web sites url address bar, on the tab bar or in the list of bookmarks. It is also called “Favorites” in Internet Explorer, since Microsoft was the first to introduce the favicon in Internet Explorer 4 in 1997.
The standard way to add this to your HTML head (supported by Internet Explorer, Firefox, Chrome, Safari, and Opera. See this Favicon support chart for more details) is :
1 |
Usually .ico files, really gif files, are 16×16 or 32×32 pixels in size, and either 8-bit, 24-bit, or 32-bit. GIf or PNG image files can also be used.
But, mobile safari is “different”, so so many ways! 
in order to add what Apple calls “Webpage Icon for Web Clip” when you add a url to iOS device Home Screen (via “Add to Home Screen”), you use rel=”apple-touch-icon” :
1 |
The recommended size is 57 × 57 pixels, although you can set the size for larger. 72 x 72 pixels is recomanded for iPad’s and Apple uses a 129 × 129 image for their apple-touch-icon.png.
If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”. See Configuring Web Applications in the Safari Dev Center for more.
If you don’t set a “Webpage Icon” for iOS devices then it, a) will look into the root of the website for a png named “apple-touch-icon.png, b) or creates one from a screen shot of the web page.
As a bonus, you can also minimize the status bar that is displayed at the top of the screen on iPhone OS, making it more like a “a native application” by using a meta tag “apple-mobile-web-app-status-bar-style”, or display web content in full-screen mode.
1 |
Cool knowledge! I have been previously hunting for something similar to this for some time now. Thanks for the tips!
you can also install a plugin called WPtouch to make your site looks like an app