IPhone home page bookmark icon creation
If, like me you’ve got an IPhone, you’ll probably have noticed that when you bookmark a web page in Safari, you get three options:
- Add Bookmark
- Add to Home Screen
- Mail link to this page
The first and last options are pretty simple and self-explanatory but the second is a bit more interesting. “Add to Home Screen” will create an icon on your IPhone home screen alongside the icons for your IPhone apps which when clicked will take you straight to the bookmarked web page. Brilliant eh?
Even better, you can create and specify a custom icon for your web page in much the same way as you would with a traditional favicon – but it’s even simpler! Here’s how:
- Create your icon as a square image. You can create it at any size though the native size is 57×57 pixels and you can use any web-compatible format e.g. JPEG, PNG, GIF (in RGB mode rather than CMYK). The IPhone will take care of rounding the corners and adding the glossy overlay for you.
- Upload your icon to somewhere on the web
- Add the following line in the head tag of your web page (X)HTML:
<link rel="apple-touch-icon" href="/path/to/icon.jpg"/>
That’s it!
Here’s an example (bottom-right icon) from the BBC IPlayer (http://www.bbc.co.uk/mobile/iplayer – visit this on an IPhone to see the code in action):
I found all this info through various experiments involving setting up icons, taking screen grabs from my IPhone and transferring them back to my Mac then analysing in Photoshop.
You may find website stating that you have to use a 57×57 pixel PNG file or other such nonsense but trust me, I tried a lot of combinations and any size (though you should make sure your image is at least 57 x 57 pixels otherwise it’ll get scaled up and therefore will be poor quality) and format (as long as it’s web compatible – that is a jpg, gif or png image in RGB format) will do.
Hope that helps you…
| This entry was posted by Neil Craig on March 17, 2010 at 6:42 pm, and is filed under Apple, General Web-Development, Mobile Device Development. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No comments yet.
No trackbacks yet.
When to use an img tag, when to use a CSS background image
about 1 year ago - 3 comments
<Img> tag vs CSS background image…This has caused much confusion to many web-developers I have met – many more developers don’t care. So, when should you use an <img> and when should you use a CSS background image on your element?
The answer is surprisingly simple…In nearly all cases, use <img> tags for contextually important images More >
Mobile Website design & development guidelines
about 1 year ago - 1 comment
Like it or hate it, the Apple iPhone has ushered in the age of the “Smartphone” which in turn has delivered mobile web-browsing to the masses. The mobile browser, whilst now broadly quite capable (at least on leading platforms), has introduced a slightly different set of requirements in terms of design and development of Websites.
Many, many designers, developers and others have written articles on how to design and/or develop for the mobile browser. I am aiming to summarise what I have learnt from several sources alongside my experience an opinion in a (hopefully) relatively quick and simple way
How to reduce web page download time in 4 (fairly) simple steps
about 1 year ago - No comments
Web pages have generally become much more bulky in recent years. The trends for JavaScript-based functionality enhancements and the popularisation of digital photography have led to larger amounts of data being transferred (downloaded) per page and I can’t see a reversal of this happening any time soon.
If you’re using a mobile device such as an More >
How to create a cross-platform network controlled jukebox system (using VLC)
about 1 year ago - 2 comments
A simple way of setting up a music system (jukebox-style) which can be remote-controlled via a web-browser interface over a computer network.
Solution: Javascript returns incorrect width or height of an element containing image(s) when page first loads
about 1 year ago - 9 comments
Recently, I’ve been doing quite a lot of JavaScript development, part of which involved equalising heights of a group of similar elements on the page. I thought this would be very simple and indeed it was but it threw up a JavaScript quirk which I have seen several times before. The solution is simple, but More >
wget: saving a file to a custom location
about 1 year ago - 1 comment
This will be a really quick post which will be obvious to unix sysadmin veterans but hopefully will be helpful to us mere mortals…
wget is a linux/*nix command line tool which can download files (including entire websites if options are set correctly) and at first glance, from looking at the wget man page you’d be More >
Email client rendering engines – useful information for testing HTML email layouts
about 1 year ago - 2 comments
As every web-developer knows, testing your Web pages on the myriad of popular Web browsers can often be a horrible experience…and if there’s one thing which is even worse than testing web pages in different browsers, it surely has to be testing HTML Email layout in multiple Email clients!
Flushing your DNS cache on Mac OSX 10.4, 10.5 and 10.6
about 1 year ago - No comments
If like me, you have to transfer websites between servers from time to time and you use an Apple Mac, you’ll probably need to know how to flush your DNS on Mac OSX (flushing is the term used for removing of all records to force an update).
For all versions of OSX, the simplest way to More >
An example of @font-face web-fonts from CSS3
about 1 year ago - 2 comments
Web-fonts, for those who don’t know, are a method of using a custom font in your web page(s). Unlike the more traditional method of specifying the font using the CSS “font-family” (or the shorthand “font”) which relies on the user having the relevant font installed on their computer, web-fonts allow the developer to use fonts More >
A simple example of navigator.geolocation.watchPosition()
about 1 year ago - 17 comments
As I mentioned in my previous post about the new/upcoming navigator.geolocation standard, I have been experimenting with Geo location on my IPhone so I thought I’d share some of that with you in case it helps anyone out.
My example is very simple and is intended to show how you can use the JavaScript navigator.geolocation.watchPosition() (the More >