Favicons are very important for branding your website and your services. As you might already know, the favicon.ico shows up in several places. The greater exposure to of your brand, the better effect it will have on your visitors.
Does your site have an iPhone favicon? If not, don’t worry. I’ll tell you exactly how to get one. But first, let’s look at what I mean. Load up your website in your iPhone or iPod Touch. Once it has been completely loaded, click on the ‘+’ at the bottom of the screen, then press ‘Add to home screen’. If you don’t have an iPhone favicon (or icon), then the icon will be an entire picture of the screen you were looking at. It’s not very brand-able, and definitely not something nice to look at. So let’s get you a nice looking iPhone icon for your website.
1) Design your icon. It must be 58 by 58 pixels and it must be saved as a PNG. Don’t worry about adding the rounded corners; the iPhone/iPod Touch automatically does that for you. Also, when you create this icon, keep in mind your brand and your audience. I created this one: (I added a border just to give you a better visual)
2) Once your icon has been saved, upload it to your website directory. I uploaded the SMTUSA iPhone Favicon to our ‘images’ folder. You can upload yours anywhere.
3) Now that the image is created and uploaded, you need to add a bit of code to the <head> section of your website. Add the following code and don’t forget to change the file path.
<link rel="apple-touch-icon" href="/images/favicon-iphone.png" />
After you completed those 3 steps, you are finished! Go ahead and load up your site in your iPhone/iPod Touch and add it to the home screen again. You should now see your iPhone favicon! See SMTUSA's iPhone favicon below!
