Connect
To Top

Create your own iPhone Web site home screen icon

So with the last major firmware release for the iPhone came the ability to add Web sites to the home screen of your iPhone or iPod Touch. It is a nice feature but the fact that it almost always created these small, cropped and unattractive icons bugged me. Shortly there after when you added certain sites like Feedburner, Flickr and The New York Times you got much better looking custom icons. It was a much better solution but Apple never really the process of what you needed to do to create them public. Today one of my insane technology obsessed friends told me how so here it is:

1 – Create your icon as a 45 x 45 pixel image (You don’t have to worry about the rounded edges or beveled look as the interface will add that for you). The only thing that happened with mine was that I had to put the text 2-3 pixels above center and made it a little smaller than I thought I would have to for it to appear in the middle of the home screen icon.

2 – In Photoshop go to ‘Save for Web & Devices’. Set the file format as PNG-8 and turn off transparency.

3 – The file HAS TO BE saved as apple-touch-icon.png. If you call it anything but this it will not work.

There are then two options for uploading this to your site

If you can access the root level of your site all you have to do is upload the file to the root level and the phone will find and use it.

If you can not access the root level or the content has to live in a sub-folder like this blog then add this like of code after the head tag in the HTML. you can use the href to specify where the image is located even if it is another folder or server.

(open bracket) link rel=”apple-touch-icon” href=”http://your URL here” / (close bracket)

It is that simple.

You must be logged in to post a comment Login

Leave a Reply

More in Great resource

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 Thanks to @the_villainess for an amazing work in progress shot of the soon to be crown jewel of our collect - a huge (8' wide) commission from @tristaneaton based on the lives of @thechiclibrary and I. Can't thank him enough knowing how busy he is and I'm SO F*CKING EXCITED!!! #streetart #streetartist #streetartnyc #streetartofficial #tristaneaton #tristaneatonart #tristaneatonmural  @visionaireworld X @louisvuitton from back in the day when Kidrobot actually made art toys #louisvuitton #lv #kidrobot #visionaire #visionaireworld #monogram #louisvuittonmonogram #murakami #takashimurakami  Got a vintage @huckgee Skullleader as a new addition to the collection #urbanvinyl #huckgee #mech #robotech #robot  @thechiclibrary in full effect at New York Fashion week for the photographers tonight in @ika_editions @blackscale and @tomford #nyfw #newyorkfashionweek  Forgot to mention I got to see @huckgee new Skullhead mech work in progress which I think is one of the best pieces he has ever done. I already put in dibs on at least one. #huckgee #huckgeeskullhead #urbanvinyl
 Extremely honored to have been chosen by @ghoshal and @erondu to join 25 design leaders from AirBnB, Uber, Facebook, Slack, Google Ventures, IDEO and more for High Resolution, a 25 episode video series on design. Look for my episode focusing on creativity and leadership coming soon. @highrespodcast #creativity #leadership #design #podcast  Spent the morning with @the_chris_buck new book Uneasy which is a fantastic look at the work of one of the most creative people I know. Get your copy at chrisbuckuneasy.com #chrisbuck #photography #photographer #portraitphotography #portrait #portraits  Some days I feel like I should wear this @huckgee armor to work. #huckgee #urbanvinyl #mech #armor #toy #kidrobot #dunny  If you listen to The #CrazyOne podcast you have @lukewessman to thank for it. He gave me the push to finally launch it and it was one of the best decisions I've ever made. He is a constant inspiration, someone who makes me want to be a better man and I always feel lucky to count him as one of my friends. Thanks for the support brother. #crazyones #lukewessman #tattooartist #lag #crazyone  @nychos under scaffolding in Haight Ashbury #streetart #streetartist #nychos #streetartofficial #streetartsf
 A pile of pugs and a @steelers blanket - what else do you need on a day off? #pug #pugs #pugsofinstagram #steelers #yinz #burghproud #herewegosteelers  FYI - it's pronounced 'art' not 'toy'. These @huckgee pieces are hand made and can take up to a year to produce. #huckgee #robotech #mech #robot #urbanvinyl  Happy Valentines Day to @thechiclibrary - love of my life fierce and true. #chic #nyfw #fashion #love  Because of Snowmaggeddon in NYC I'm having to do my meetings from home today and apparently everyone thinks they are a Creative Director in this house. #pug #pugsofinstagram #design #creativedirector #puglife #designer #dogismycopilot  @huckgee amazing work in progress #urbanvinyl #huckgeeskullhead #huckgee

Copyright © 2015 Stephen Gates