{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 男人必须洒脱 的问题《Apple Touch icon for websites》','https://www.manongdao.com/q-178719.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Up to now, I've been including the line for the Apple Touch icon in my head like this:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
However, in the Q&A "What are the correct pixel dimensions for an apple-touch-icon?" it is stated in the accepted answer that three images are now needed according to Apple's guidelines.
So how would one go about inserting these into the head section of the code?
Here you go, hope this helps.
If you want Apple to do the aesthetic bit for you (add the gloss) then you'd put in these to the
<head>tags:If you want to precompose the image, so that Apple displays it without the gloss, then you'd do this:
Providing you include more than one, the iOS device will look for the correct size and utilise that image automatically. As you can see from the names of the images in the example, the iPad with retina display needs an icon which is 144x144px, the iPhone 4/4S/5 needs an icon which is 114x114px, the original iPad (and iPad 2, as the screen resolution is no different) needs an icon which is 72x72px, and the original iPhone doesn’t need a size specification, but for your reference it is 57x57px.
As of 2018, Apple Developers Website recommends the following for iOS devices:
App Title will replace your website title. Usually, you'd want that. Startup image is what will appear while the app is launching.
Specifying a Webpage Icon for Web Clip
You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
In the above example, replace custom_icon.png with your icon filename. To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
See Icon and Image Sizes for webpage icon metrics.
Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.
Source: Apple touch icon specs
Apple specs specify new sizes for iOS7:
And also for iOS8:
In addition, precomposed icons are deprecated.
As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), the generic code is:
In addition, you should create a 180x180 picture named apple-touch-icon.png.
Note that iOS looks for URL like
/apple-touch-icon-76x76.png, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with/favicon.ico). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.You might want to know that this favicon generator can create all these pictures at once. Full disclosure: I'm the author of this site.
Since a few of these answers are out of date already, I recommend using http://realfavicongenerator.net/ to generate all the images and markup - I donate a couple euros each time I use it in the hope that it enables them to keep up to date as to what is currently valid on iOS, Android & Windows, so I don't have to.
From my pull-request to https://github.com/h5bp/mobile-boilerplate (with iPhone 6 icons):