The Best favicon Generator
This has got to be the end all-be all of favicon generators.
http://realfavicongenerator.net/
Upload one image and it will generate all of the images for you as well as the required code.
Upload the highest quality icon you can, preferably 512×512 if possible.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" /> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" /> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileImage" content="/mstile-144x144.png" /> <meta name="msapplication-square70x70logo" content="/mstile-70x70.png" /> <meta name="msapplication-square150x150logo" content="/mstile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" /> <meta name="msapplication-square310x310logo" content="/mstile-310x310.png" />
iOS Web App
Some cool stuff to make a website act more like an app on iOS. Full details here.
Specifying a Startup Image
<link rel="apple-touch-startup-image" href="/startup.png">
Hiding Safari User Interface Components (also adds it to the task bar like an app)
<meta name="apple-mobile-web-app-capable" content="yes" />
Changing the Status Bar Appearance
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Touch Icons
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
Initio3i site launch
They wanted a one page scrolling site that was primarily designed to fit in landscape mode on an ipad. Things of note: uses jQuery Waypoints to find scrolled positions and notify the nav and move the position marker. Also used Typekit to deliver the font.
iOS app template
I’m just going to leave this here in case its usefull in the future.
Recent Comments