When did touch icons get so complicated? It had been a while since I last made a touch icon, so when I recently wanted to add one to a project, I decided I better double check the sizes of icons that I needed to make.
I remembered reading a useful article about touch icons in the past called “Everything you always wanted to know about touch icons”, which I was able to find again. I had thought there were only two sizes of icons that I needed, but I was surprised to find that the article had been updated with a recommendation to produce nine icons to account for various versions of iOS and Android.
In order to make this easier on myself (both now and in the future), I decided to make a handy Sketch template that I’ve linked to below. The final code needed in the HTML
<head> should look like this:
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
My notes from An Event Apart Orlando: Special Edition 2014 at Disney’s Contemporary Resort in Walt Disney World.
Update: I wrote these instructions using MAMP PRO 2, and I just noticed that it looks like version 3 has some kind of xip.io support built in.
Testing mobile websites locally can be done by simply resizing the browser window on your computer, but sometimes you just want to test the experience on an actual mobile device. One of the easiest ways I’ve found to do this is to use xip.io, a service created by 37signals. What is xip.io?
xip.io is a magic domain name that provides wildcard DNS for any IP address.
This allows you to have a real domain to use for each of your local virtual hosts. If you use MAMP PRO for local development, this service makes it super easy to test each of your sites on mobile. To do this, check out the instructions below.
Note: I think this will only work with MAMP PRO, because you need access to the virtual hosts feature. Also, your computer and mobile device(s) will need to be on the same local network.
- Set up your project in MAMP just like normal.
- Get your local IP address. In OS X, you can do this by opening “System Preferences” and selecting “Network”. Under the “Status” on your connected network device, it will show your IP address. Be aware that if your router uses DHCP to assign IP addresses, the address may change after rebooting or reconnecting your computer.
- Now go to the “Hosts” tab, and select the virtual host that you would like to test. There is an “Aliases” box under general settings. Add a new xip.io alias using your local IP address. For example, if you have a project called “mysite” and your IP address is
10.0.0.1, you would enter something like this:
- Now open the address you set as your alias in a browser on your mobile device.
That’s all there is to it. Now you can test your full site locally from any other device on your local network. I’ve also found this method helpful for sharing my current progress with co-workers in my office. This is a really great solution for testing on multiple devices without having to push code up to a server.