Add Your Website Logo To iOS Home Screen

W.K —  January 1, 2013 — Leave a comment

Clearly you can see below I have added my website logo (Tezeal) at my iPhone’s home screen. It looks neat and stylish, doesn’t it? In this article, we’re going to teach how to add your website logo to the home screen of any iOS devices, including iPod Touch and iPad. It’s very simple, and all you need to do is just follow the steps.

How To Add Your Website Logo To iOS Home Screen

But before that, why is it so important? It’s a fact that the number of Smartphone users have increased tremendously over the years, and the trend is gong stronger without paradox. As a result, people tend to browse website with the Smartphone. And for you to outshine your contender, you need to push longer miles, and this trick does give the extra boost.

1. Resize the Logo

I believe you have your own logo already, now we got to do is a bit of resizing.

Resize it to 144px × 144px, and make sure it is 72dpi as well.

This is the perfect resolution to support Retina Display and older devices too. Don’t worry about the rounded-corner, you can just leave the logo in square form (square is recommended, otherwise black border will appear at the app icon), and Apple will do it automatically.

2. Host it 

Upload the logo to your hosting server or any image hosting site which it can be linked via code. In our case (we’re using WordPress), we just upload it to the media library.

3. Add to the Site (Easy-Coding)

Add the following code to your header file (header.php), just before the closing </head> line:

link rel="apple-touch-icon" href="/your_icon.png"/

Replace the “your_icon.png” with the link to your logo. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.

Easy-peasy that’s it. You can try adding the logo to your home screen now. (Open Safari > Visit to your site > Add to Home Screen). Last but not least, don’t forget to add Tezeal to your home screen too. Cheers!



Posts Google+

Founder and Editor-in-chief of Tezeal | Wei Kai is a technology enthusiast and love to crank his mind for technology knowledge. Experimenting graphic design with Photoshop is one of his favorite thing to do during his spare time.