Apple touch icon one size

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

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. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

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 58 x 58, the system searches for filenames in the following order:

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.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник

Apple touch icon: The Good, the Bad and the Ugly

Warning: With the release of iOS 8, the recommended size is now 180×180. It was 152×152 when this article was published (updated 2014/12/26).

Whatever you use an iOS or Android device, the Apple touch icon appears as soon as you bookmark a web site or add it to your home screen. It is the only element still visible once you leave the site. It should be in the checklist of every web project. But this is often not the case.

A link to Apple web site

For this study, the Apple touch icons of the 5,000 most visited web sites were studied. More precisely, this analysis focuses on the apple-touch-icon.png file located in the root directory. Although this file is not a strict requirement, it is so emblematic that studying it alone makes sense. More about this in the methodology below.

First things first: how many apple-touch-icon.png were found and probed? 804. This 16% score sounds low, but again, this file is not required for the Apple touch icon to work. A previous study concludes to a 60% support rate. Therefore, this figure should not be taken too seriously. What matters is what lies in these 804 icons.

The right answer was…

… 152×152 . 180×180, thanks to iOS 8 (updated on September 26th, 2014).

Apple defines 4 icon sizes, from 60×60 up to 152×152. What the specifications forget to mention is that these sizes are for iOS 7. To support iOS 6 and prior, you need 4 other dimensions.

iPhone		iPad
non-Retina	Retina	non-Retina	Retina
iOS 6 and prior	57×57	114×114	72×72	144×144
iOS 7	60×60	120×120	76×76	152×152

The specifications do not explicitly define the size of the apple-touch-icon.png picture, but a good practice is to provide a 152×152 picture. An iPad with a Retina screen running iOS 7 will use it as is, while the other devices will scale it as needed (unless they find a more suitable icon).

How many web sites follow the 152×152 recommendation? 33. A good 4%. Oh. Among them, Apple.com.

Nearly as many sites have a 60×60 icon, which is the other size you might pick after reading the Apple specs. Some others resolutions are more popular, like 114×114 (79 sites) and 144×144 (72 sites). But the winner is clearly 57×57 with 281 sites. This resolution is outdated, but it is still the reference. Google for “apple touch icon size”: at the time of writing, the first result is from StackOverflow and the first answer documents 57×57.

An apple-touch-icon.png with an iOS 6 size is the sign that it has not been updated for a while. Yet, it does not prove that the Apple touch icon won’t work on modern devices. Take Bing.com, one of the 57×57 supporters: it also defines apple-touch-icon-152×152.png . You shiny iPad will use this picture.

This leaves us with 68% of apple-touch-icon.png with a resolution recommended (or used to be recommended) by Apple. And 32% of… something else.

Apple touch icon bloopers

Creative resolutions

18 sites have a 100×100 icon, like imgur. Stackoverflow, TheGuardian and 15 others use a 158×158 picture. NewRelic’s icon is 80×80.

Some sites anticipate the Super Retina HD screen: Tumblr exhibits a 300×300 picture. BuildWith and 6 others come with a 512×512 icon. ClipHunter (not safe for work…) takes this very seriously with a 1024×1024 picture.

Although these sizes are unexpected, iPhone and iPad are able to process them.

Square icons are so mainstream

Sure, the 175×175 icon of Flickr is not standard. But at least, this square picture can be scaled as needed by iOS. On the other hand, the 155×45 picture of Kioskea cannot fit the iOS UI. Apple’s mobile platform does its best but it makes no miracle.

The 155×45 apple-touch-icon.png of Kioskea Kioskea bookmark

The 1194×687 apple-touch-icon.png of 1111.com.tw is another interesting case: this is a white picture.

1111.com.tw, 1194×687 pixels of zen and fullness

12 sites are impacted by this issue and 3 others were probably tricked during the creation of the icon. There is a difference of 1 pixel between their width and height. For example, the picture of HTCMania is 56×57. So close.

Small is beautiful. Sometimes.

Some sites have really big icons and some others take the opposite path. 7 sites have a 32×32 picture, among them Media.net and ADSLGate. Zillow and 4 others are 16×16. Duowan.com’s is only 8×8.

Pixel art maybe?

No less than 26 sites, such as AOL and NBCSports, choose a radical approach: the 1×1 icon. It reminds me of the old times, when complex HTML designs were made of stretched transparent 1×1 GIF pics. Except that such setting does not make any sense for apple-touch-icon.png . Note that some of these sites are a bit tricky. AOL, for example, also declares valid Apple touch icons. As a consequence, iOS visitors do not hear about the strange 1×1 picture.

4G recommended

Resolution is one thing, file size is another. The studied icons weigh 8.5KB on average, but some pictures are way larger. Yelp’s icon is 91KB, which is a lot when you consider that it is 57×57.

91KB, 57×57 Yelp icon

Addic7ed doubles this figure with its fancy 198KB, 1341×1609 icon. Very strange design by the way.

Addic7ed’s… icon Addic7ed’s icon with iOS best effort

The winner in this category is ClipHunter with its 631KB icon! Sure, the drawing deserves all its bits (not safe for work, really).

But the most disappointing icon is probably Apple’s. With 96KB, the message is clear: buy an iPhone 5 and upgrade your plan to 4G.

Conclusion

Among the apple-touch-icon.png pictures that follow the dimensions of Apple specifications, 85% of them stick to the old versions of iOS. Only 15% follow iOS 7, released 6 months ago. Apparently, webmasters are not in a hurry to update them.

The overall results are positive, with only 32% of picture with undocumented dimensions. Even if these dimensions are sometimes surprising, most of them are processed correctly by iOS. Yet some sites should definitely update their icons.

Maybe the most striking figure is the amount of different sizes encountered during this study: 60 different resolutions were found, from the popular 57×57 to the unique 110×110 of the NCAA. This number reveals how fragmented the information is. 57×57 is still broadly advertised. 114×114 has its fans. 129×129 was popular for a while…

When creating an Apple touch icon, you should use an up-to-date favicon generator (and now let’s see if auto-promotion is efficient). You probably don’t bother checking Apple specifications every so often. Fortunately, some people do it for you. To make sure your favicon stays relevant, you can follow us (Twitter, Google+ or Facebook) to be notified when the generated pictures and code are updated.

Favicon update is still unpractical. You can expect more in the next few weeks… stay tuned!

Methodology

The apple-touch-icon.png picture is famous but not required to enable the Apple touch icon. There are actually four ways to display this icon:

• HTML declaration. For example,
• Dimension-specific pictures, such as apple-touch-icon-76×76.png
• Precomposed touch icons (eg. apple-touch-icon-precomposed.png )
• apple-touch-icon.png

As a consequence, when a web site as no apple-touch-icon.png or this picture is somewhat wrong, it may still support the Apple touch icon successfully. For example, by providing alternative pictures declared in the HTML code.

To collect data, some portions of the favicon checker were reused. The script parsed the Alexa top web sites listing and requested each site using an iPad Mini user agent to make sure it gets the mobile version of the site. Then, it tried to download apple-touch-icon.png and get its dimensions. All failures were ignored. For example, when the file is not present, some sites do not return a plain 404 error but an error page. The script failed at parsing such “picture”, yet this case was not distinguished from genuine corrupted pictures.

The 129×129 dimension, used by 49 sites, is a bit special. Apparently, it has been the dimension of the apple-touch-icon.png of Apple for a while, making it somehow “official”. Yet, I chose to consider it as non-official since there is apparently no reason for such resolution.

Oh, and in case you wonder, yes, I cleared my browser history at the end of this study. Thank you for reminding me.

Published by

Philippe Bernard

I’m a web developer and the author of RealFaviconGenerator. I created this site because I felt frustrated when I tried to generate the favicon of my previous web project. View all posts by Philippe Bernard

18 thoughts on “Apple touch icon: The Good, the Bad and the Ugly”

I created the icons with your generator and included the html code but I am still getting errors when I use your checker. I don’t know what is going on?

Oh… Is your site live? Could you give me the URL so I can review it? You can also drop me an email at philippe@realfavicongenerator.net

I, too, was getting errors in the console with the generated HTML. Removed the slash in front of the filenames, and no more error.
Eg.
gives an error,
does not.

I’m using chromium on linux mint 17.1, havent checked on anything else 😛

Awesome tool. I love you. I will def donate when im done school and am a real, live, web dev. (Less than 3 months left, woo!)

Thank you for your feedback! Slashes are not supposed to be an issue (and they are useful if not all of your HTML pages are not in the same directory!). Do you have an error message in addition of the error itself?

Good luck with the school! You gonna love being a developer!

Nice study, though your conclusion of “Apparently, webmasters are not in a hurry to update them.” might be better phrased as “webmasters might not be aware that the dimensions have changed”. At least it was true in my case, I was unaware of the size changes in iOS 7 and was still requesting design assets using the iOS6 values. And who knows if that has changed for iOS8? 🙂

Kudos to you, though, for having the date prominently at the top of your article — very nice to know just how relevant the data is!

Thanks! Well, yeah, I might have been a bit rude to the webmasters, sorry 🙂

By the way, this article is already outdated: the new iPhone 6 Plus and iOS 8 come with a new 180×180 icon…

Thanks for keeping this post update so it’s really useful when I’m looking for the correct pixel size for iOS 8!

That’s right. I added a warning on top of the article.

For this purpose, the real, maintained reference is http://realfavicongenerator.net/faq

I’m curious as to why users in Egypt, Lebanon, Saudi Arabia, Pakistan, Turkey, Yemen, Vietnam, etc. are trying to access the apple-touch-icon.png and the apple-touch-icon-precomposed.png on my site. I do not use these images. I do not have any of these requests from US or European sites.

Here is an example:
Turkey Istanbul, Turkey tried to access non-existent page http://www.907tech.net/apple-touch-icon-precomposed.png
6 minutes ago IP: 151.250.207.152 [block] Hostname: host-151-250-207-152.reverse.superonline.net
Browser: Chrome version 28.0 running on Android
Mozilla/5.0 (Linux; Android 4.2.2; K00L Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.94 Safari/537.36

I can’t explain the difference between Egypt/Lebanon/etc. and US/Europe. Maybe these countries use older devices so you observe a different behavior from them (just an hypothesis). For example the request above is from Android Chrome 28, whereas latest version is 39.

If these accesses are nagging you, I suggest to create `apple-touch-icon-precomposed.png` so you won’t be bothered anymore. Since you are here, reading this blog, you probably know how, but just in case, here is what you are looking for: http://realfavicongenerator.net/ 🙂

Real funny and helpful article!
I made a script based on your demo pack of favicons to made all the size required.
Now i have a full prototype schema with all fancy favicons preinstalled, awesome, but damn they’re are just favicons!
I’m missing old times with a 16×16 favicon.ico, right now it’s time to make a standard it’s insane to have something like 27 image to support a bunch of devices…

Life was easy in the early 2000s, wan’t it? 😉

I’m testing on an Apple Ipad Air 2, iOS 9. I generated the files and used the html code provided. For the life of me, the icon does not come up when I “add to home screen”. I have them in my images folder and I can access them by typing the URL on Safari. The icon comes up when I try other websites but not on mine! What gives??

Sometimes, iOS devices take their time to load the icon. I observed this a lot of times with my iPad Mini. You should have a look to the checker (http://realfavicongenerator.net/favicon_checker). If it gives you the correct icon, you can be sure the site is alright (and you iPad is not in a good mood 🙂 ).

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Источник