Did you know that this blog has its own app icon that can be placed right on your iPhone’s home screen for quick and easy access to the site? Well, it does, and yours can too. Creating a unique app icon for your website in today’s age of smartphones is definitely something that should be taken advantage of. If not for you, but for your visitors especially! The bookmarking feature on your iPhone might not get enough recognition, but it sure does make things 100x easier and quicker to get to your favourite sites.
First, check out how it works:
1) This is what my icon looks like when added to your home screen. Clicking it will bring you right to my website.
2) Go ahead and try this yourself by bookmarking my blog. In Safari visit www.thewonderforest.com, and click on the bottom middle share icon.
3) This menu will appear. Click on Add to Home Screen.
4) You can change the name here if you like, and then press Add. Check your home screen for the new icon!
Here’s how to create your own:
First you’ll need to create your own icon. You can do this in Photoshop or at Pixlr. I size mine 150x150px. You don’t need to create the rounded corners, your iPhone will add those on its own. I suggest keeping your icon simple. I used my cat illustration from this layout this time around, but previously it was a simple “W” logo with a little watercolor flourish. Tip: make it match your blog to keep the branding consistent.
When you’ve finished that, upload it to a place like Photobucket.
Next, we need to add it to your blog’s template.
In Blogger, Go to Template > Edit HTML. Right after the <head> code in the first few lines, paste this code:
<link href=’http://url-to-your-image.com/your-image.jpg’ rel=’apple-touch-icon-precomposed’/>
Replace the http:// URL with your own uploaded image URL.
In WordPress, paste this in your <head> section of your HTML code as well.
If you have a mobile version of your blog, be sure to add the code right under this line inside the <head> as well:
<b:if cond=’data:blog.isMobile’>
Save and you’re done! Test it by visiting your blog on Safari and adding your bookmark as the instructions above indicate. Note: Yes! This also works for other devices like Android, so you’re covering all of your bases by adding this icon code!
Now you AND your readers have a simple way to launch your site that matches your overall branding!
Need a photo editor to create that icon? Check out today’s video over at The Blog Beautician. I’m talking all about Photoshop and Pixlr:
This information is provided to you totally free!! All that I ask is that you please share it somewhere if it helped you.
Last Updated on
Dear Dana, I just stumbled upon your blog and I LOVE it. I am a blogger
from germany and I really want to try out the icon app myself. Can you
tell me, why I need to upload it on Photobucket? Is it just for the URL?
Thank you so much for your inspiring posts. Love, Anne