TECH TUES: Create an App Icon for Your Blog

By Dana Fox

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, 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=’’ 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.

Need blog topic ideas? Check out 365 Blog Topic Ideas on Amazon!

Dana Fox
Dana Fox
About me

I am a country loving Canadian with a mind that never sleeps. When I'm not running the Wonder Forest blog ship, you can find me creating artwork for phone cases and home decor, whilst managing the daily tasks of Dana Fox Creative. Visit me at the links below if you wanna be friends and follow along on Snapchat: wonderforest.


TECH TUESDAY: Fruit Smoothie Wallpapers
May 17, 2016
Why I Didn’t Reply to Your PR Email, and How to Fix it
May 13, 2016
Tech Tuesday
TECH TUESDAY: Pastel Paint Phone Backgrounds
April 19, 2016
Why Blogging Is Good for Self-Development
Why Blogging Is Good for Self-Development
April 11, 2016
Why You Shouldn't Be a Fashion Blogger
Why You Shouldn’t Be a Fashion Blogger
April 06, 2016
TECH TUESDAY: Get Intentional Desktop Wallpapers
April 05, 2016
TECH TUESDAY: Mind Over Matter Desktop Background
March 22, 2016
The Ultimate Blogger To-Do List (Now on Amazon!)
March 21, 2016
10 Secrets to a Stellar Blog Post
10 Secrets of a Stellar Blog Post
March 16, 2016
  • Anne Mohn

    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