Example of how to embed apple icons, all the meta and icons for iOS / iPhone / iPad

February 12, 2014 3:29 am Tags: , , , , No Comments 1 karma points


I cannot believe all these icon sizes Apple wants (new window) us to pander to. How many icons does it take to play well with iOS? Enough to make for a tedious slog for iOS app developers.


Evidently every iOS phone, tablet, ipod and TV ever made needs you to embed apple icons of various sizes to …. save the processor from resizing 64px x 64px to 32px x 32px? I know it’s also for specific uses within the iOS UI. For instance, a bookmark as opposed to an iOS web app



		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/favicon-196x196.png" rel="icon" type="image/png" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/favicon-160x160.png" rel="icon" type="image/png" sizes="160x160" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/favicon-96x96.png" rel="icon" type="image/png" sizes="96x96" />
		<link href="http://wac.3119.gravlab.com/003119/sparse/img/2014/appletouch/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
		<link href="http://gravlab.com/wp-content/uploads/2013/10/favicon.ico" rel="icon" type="image/png" sizes="16x16" />


Everything service wants its own metadata now. og:style, schema.org markup, twitter:kr@zy, a million icons. Metadata, tons and tons of metadata.


We’re just getting started! Here are some more very specific apple metatags for your consideration:


<meta name="apple-mobile-web-app-capable" content="yes" />

With content=”yes”, the application will run in full screen mode, without the address bar at the top and the navigation bar at the bottom.


<meta name="apple-mobile-web-app-capable" content="no" />


content=”no” is the default.


Stay tuned kids, more exciting Apple oriented metadata to come!


1 karma points