LaDart Creative Blog

[/caption]

I recently noticed that when I bookmark some websites on my iPhone and add the bookmark to my home screen it shows up as a nice professional looking icon like this

iPhone Icon

While others show up as a tiny thumbnail of the actual web page that’s being bookmarked. After a quick search I was happy to find that there is a super easy solution to this. All you have to do is create a 57x57px image that you want to be your icon, name it apple-touch-icon.png, and upload it to your site’s root directory. You don’t even have to round the corners or put a glare effect – the iPhone does it for you.

This is the one I created

No glare and No round corners

Another option, if you don’t have access to the root directory, is to add a link to the head section of your web page like you would for a favicon.
For example:
<link rel=”apple-touch-icon” href=”/customIcon.png”/>

I’ve decided that since I come across so many different resources and great info in the course of working on projects that each time I stumble upon something good I will post it on my blog.

I recently created a thumbnail gallery for a salon’s website that’s located here in Atlanta. The gallery consisted of 18 thumbnails that when hovered over automatically expand to a larger profile image of each employee.

After some shopping around I decided to use Magic Toolbox’s Magic Thumb script. It’s similar to the ever popular lytebox, however it’s highly customizable and offers an API to use in development.

I happened to get stumped on something while writing the script for the gallery and emailed a support person named Alex. I not only got a quick reply, but Alex uploaded an example of what I was trying to do to make it more clear. I was super impressed with the high level of service.

Magic Toolbox also has some other scripts for viewing images that I’m sure are just as good. You can check them out here.