• Max Msp
• Melodyne
• MIDI
• Mixing Music
• Motion
• MPV News
• Music Theory
• Native Instruments
• Omnisphere
• Other
• Pages
• Photoshop
• Premiere
• Pro Tools
• Propellerhead Reason
• Propellerhead Record
• Reaktor
• Reaper
• Review
• Sibelius
• Sound Design
• Sound Production
• Soundtrack Pro
• Spectrasonics
• Trilian
• Web
• WordPress

• Ableton Live
• Adobe
• After Effects
• Apple
• Audio Hardware
• Audio Plug-In
• Audio Recording
• Audio Software
• Avid
• Cubase
• Djing
• Dreamweaver
• Final Cut
• Flash
• GarageBand
• iLife
• Illustrator
• iMovie
• InDesign
• Interviews
• iPad
• iPhone App
• iTunes
• iWork
• Keynote
• Logic Pro
• Mac OSX
• macProVideo
• MainStage
• Mastering

• Using Webfonts For Terrific Type Online
• by Iain Anderson
• Don't know your TrueType from your WOFF? Got EOT and SVG in a twist? Or perhaps you just want to learn how to get hold of excellent pre-made fonts and generate your own… Iain Anderson types it out.

• Have Some Fun With CSS3 Transitions
• by Toby Pitman
• If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

• Getting Started in Adobe BrowserLab
• by Geoff Blake
• In this post we'll be taking a look at BrowserLab. What the heck is BrowserLab? It's a tool for web designers, which allows them to preview their work in a variety of browsers, on different platforms.

• The Future of the Web is Here: Using jQuery, HTML5 and CSS3 to Market your Music Online
• by Andrew Turner
• jQuery is a JavaScript library written by John Resig which makes it easy to make interactive web applications. jQuery has the ability to load code from other javascript files in order to create rich u

• Setting Up Tiled Backgrounds Using CSS
• by Geoff Blake
• Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are som

• Cubase 6.5
• New Features In Cubase 6.5
• 64 bit Cubase 6.5 is here with its new synths: Retrologue and Padshop. There’s also a new Comping tool and some very cool new effects plugins. So join Cubase “Commander” Matthew Loel T. Hepworth, your captain on flight Cubase 6.5, to learn what’s new...

• Pro Tools 10 113
• Pro Mixing Techniques
• Mixing sounds to create a cohesive and inspiring piece of music is an art. Join MPV trainer and Pro Tools expert Mike Watkinson as he reveals his favorite mixing techniques and shows you how you can bring your musical canvases to life...

• Melodyne 201
• Advanced Melodyne
• Melodyne 2.0 is loaded with a bunch of new features. Let Product Specialist David Andris show you how you can inject Melodyne’s new DNA technology into your productions...

• SongCraft
• Producing Lauren Balthrop
• One song and only one day to professionally produce it! Can it be done? Find out as the pros at Dubway Studios in New York City take you on a recording and mixing adventure in this first edition of our new Docu-Tutorial series we call SongCraft!

• Native Instruments 201
• Razor
• Native Instruments’ Razor is a totally slick additive synthesis machine. See all the different ways you can slice this knife of a synth into your tracks in this 40-plus video tutorial by expert synthesist G.W. Childs...

• Native Instruments 210
• FM8: FM Synthesis and Sound Design
• Join Synth Expert David Earl (a.k.a. SFLogicNinja) and discover how incredibly powerful and rich FM synthesis can be when using the amazing FM8 synth from Native Instruments...

• Pro Tools 10 112
• Advanced Editing Techniques
• Becoming a Pro Tools editing Ninja requires mastering the tools of the trade. Join Certified Avid trainer Mike Watkinson as he explores the art of editing and managing clips in Avid’s Pro Tools 10...

• Native Instruments 211
• Guitar Rig and The Studio Processors
• Native Instruments' Guitar Rig isn't just for guitars. It's an amazingly versatile plugin "rig" that can be used on just about any track from vocals to mastering. Join Music Software Expert Mo Volans as he shows you the amazing new collection of studio quality Effect Processors that come with Guitar Rig 5 Pro...

Preview these Beer Brewing Tutorial-Videos

In this quick tip I’m going to show you a really easy ‘one size fits all’ way to add a bookmark icon for Apple mobile devices. It’s mega easy to do with just one image and one line of HTML. All the smart stuff is done by your Apple device, whether it’s an iPhone 3G/3GS, iPhone 4, iPod touch or iPad.

Step 1 - Make a Website!

All you’ll need to make a website is some glue, a plastic bottle and some safety pins. OK, just kidding! Hopefully you already have yourself a website with access to your server through your hosting company.

I’ve made a quick mockup of a fictional site called Perfect Pets:

Pretty rad!!!! Look, it’s got a kitten on it! Holding a gun!! Awesome!! 

I want to create a nice bookmark icon that people can add to their Home screen on Apple devices like iPhones and iPads for quick access to my awesome site. 

Size and Resolution

The screen resolution (in pixels) for Apple iOS devices varies. Here’s a rundown:

• iPhone 4          640 × 960  @  326 ppi (pixels per inch)
• iPhone 3G       480 × 320  @  163 ppi
• iPad                1024 × 768 @  132 ppi
  

The recommended icon size for a web clip icon varies with the different types, too:

• iPhone 4         114 × 114px (high resolution)
  
• iPhone 3G        57 ×   57px
  
• iPad                  72 ×   72px
  

Although these are the guidelines, all these devices will automatically rescale your image to the right dimensions. So you really only need to make one, the largest, sized at 114 × 114px.

Step 2 - Make an Icon!

I’m going to design my icon at four times the size of the resolution I need so I can apply some detail. I’ll scale the image down later.

My document is 456 x 456px at 72dpi. I’ve also placed some guides 80px from the edge of the document to center the artwork. The grey area is representative of how the Apple device will apply rounded corners (20px for a 114 x 114 icon) to the image (yes, it does this for you!!) And the nice glass reflection effect, too!!

This is just there as a guide and won’t be in the final image.

Since we’re working at four times the size this works out at an 80px rounded corner (the width of my guides).

So here is my quick icon design! The shape is centered inside the guides and it has a little bit of texture to it.

OK, so it’s not going to win any awards but what the hey! You could use your company logo or whatever you like. As long as it’s better than this you're good to go!!

Flatten the artwork and go to Image > Image Size and scale the icon down to 114 x 114px (or by 25%).

We’re done!! 

Go to Save For Web And Devices and save the image as a 24-bit PNG file. You can call it what you like.

Step 3 - Put It on the Internet

Upload your PNG image into the root folder of your website. This will be the same place as your index.html file. If you're using Wordpress this will be in your ‘Theme’ folder, something like wp-content/themes/your-theme.

All you have to do is add this line of code to the section of your HTML files. Inside Wordpress this would go in your ‘Theme’ header.php file. 

The rel="apple-touch-icon" in the link is telling the Apple device that there is an image available to be used as a Web clip icon.

Here’s my code inside Coda.

That’s it! 

Bookmark that Sucker!!

Now when somebody uses the ‘Add To Home Screen’ function on your site inside iOS Safari they will see this screen with your icon! You may find you have to wait a second as Safari loads the image.

Once they add it it will appear on their Home screen as an icon. Here it is on iPhone 3GS:

And on iPhone 4. Because of the Retina display this should capture some real detail:

All you have to do now is sit back and wait for the money to roll in! Sweet!

Seriously though, this can add a nice little professional touch to a website and the fact that the Apple device adds all the effects for you makes it really easy.

Want to learn more? Check out these Photoshop tutorials and these Web Design tutorials!

Preview these Beer Brewing Tutorial-Videos

Toby Pitman

Toby composes, records, performs and produces music in every possible style all over the world for TV shows, advertising and for recordings. Over his 18 year professional career Toby has worked with many major recording artists including George Michael, David Arnold, Yussif Islam (Cat Stevens), Giles Martin and Shirley Bassey. Toby is also a Logic Pro master, expert synthesist and sound designer. Toby's passion for music education has led him to teach for The International Guitar Foundation and the Brighton Institute of Modern Music.

Ios, Ios app, IOS icon

Comments

Aug 23, 2011

Hi

Great post - do you know if there's any way in Safari on the iPhone to have a "bookmark this site" link within the site for one click bookmarking, similar to the Javascript approach that works for desktop browsers? Or in fact if the normal desktop code also works for iPhone (and indeed Android..?) thanks!

Reply