15.7.14

TECH TUES: Create an App Icon for Your Blog


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:



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.

54 comments:

  1. I appreciate that you shared both a free and a paid program. I am lucky enough to have just gotten photoshop, but it's always nice to see designers talking about free programs as a step towards photoshop instead of acting like photoshop is the only way to go. Thanks for the advice!

    ReplyDelete
  2. Hello, thank you for sharing this tip! I think that's helpful, though I have a problem. I did everything but it doesn't work for me. Any idea why?

    ReplyDelete
  3. What is the problem you are having???

    ReplyDelete
  4. Here there is the initial part of my code, as you can see I added what you said... but it doesn't work :/

    ReplyDelete
  5. that code works for me, i just tried it on my test blog and when I bookmarked the site your icon appeared. What's your blog URL?

    ReplyDelete
  6. http://mayblossomstheblog.blogspot.it

    (thank you for your time:) )

    ReplyDelete
  7. Ah I see it's working in the Web View version but not your mobile version. Add the code as well right under this line:

    I will add this to the post as well!

    ReplyDelete
  8. HI, i have a mobile version of my blog too but i cant find the code which you mentioned above to paste accordingly :(

    ReplyDelete
  9. In fact even when I turned off my blog mobile version, the app icon still did not work for me?!?

    ReplyDelete
  10. thanks for this! it worked perfectly for me yay!
    maybemonica.blogspot.com

    ReplyDelete
  11. Hi Dana! Thanks so much for sharing. It's so simple! I just tried it and it works great!

    Marie
    freeseries.ca

    ReplyDelete
  12. Wow this is such a unique tip c:

    ReplyDelete
  13. Great tip, will try it soon. Thanks so much Dana!

    ReplyDelete
  14. Amazing tip! I have got to make one of these!

    ReplyDelete
  15. How can I download the app if I have an android?

    ReplyDelete
  16. Thanks so much for this Dana! Works a treat on my blog (ha - in fact I've just seen that you've commented on my post on Instagram!) So easy but really great! x

    ReplyDelete
  17. Thank you for the break down! I always wondered how this worked.

    ReplyDelete
  18. I can't get mine to work either :/ followed the steps exactly! x

    ReplyDelete
  19. Hi, I love this idea! I only have one problem I got it to work on the Web version of my site but I can't seem to get it to work on the mobile version and I added the code a second time under the code.

    ReplyDelete
  20. I love this idea! But will this work on a self-hosted wordpress blog?

    ReplyDelete
  21. Yes. I mentioned Wordpress in the post :) Any site that lets you edit the HTML headers will work.

    ReplyDelete
  22. it's not an app it's a bookmark.

    ReplyDelete
  23. Yes please read the bit about the mobile version in the post ;)

    ReplyDelete
  24. I did actually paste that bit of code in as well.

    ReplyDelete
  25. I don't understand the replace http://url bit :/

    ReplyDelete
  26. Nope, this didn't work for me.

    ReplyDelete
  27. You place the URL of your uploaded image there. Once you upload it to a photo hosting site like Photobucket they generate an image URL for you.

    ReplyDelete
  28. You paste the same code, the "<link href" code UNDER the "<b:if" mobile code, that is what you have done? Not pasting the mobile "<b:if" code... that is already in your header code.

    ReplyDelete
  29. Oh I see. My fault. Thank you for your help though!

    ReplyDelete
  30. I did do, the code is under that piece of code for Mobile :/ How strange!

    ReplyDelete
  31. I love this and can't wait to try it...I made an icon but I'm new to WP so I'm not sure where to place the code. I searched my templates and functions for the '' code but cannot find it anywhere. Am I doing something wrong? Thank you so much again for these tips!

    ReplyDelete
  32. It looks like the picture i created, has shown up very large at the top of the blog and i cant seem to remove it.

    help please :/

    ReplyDelete
  33. Hi Dana,


    I can't seem to get it working either.. I have done exactly as you said(also made sure I hadn't done what the other commenter's had done!) Any Ideas? I'm on blogger..

    ReplyDelete
  34. You didn't add the image URL correctly. Your code looks like this (minus the greater than/less than brackets):


    link href='http://s1175.photobucket.com/user/TheBusyBee39/media/BlogButton150x150_zps81d04422.png.html][IMG]http://i1175.photobucket.com/albums/r629/TheBusyBee39/BlogButton150x150_zps81d04422.png[/IMG][/URL]/your-image.jpg' rel='apple-touch-icon-precomposed'/

    it should look like this

    link href='http://i1175.photobucket.com/albums/r629/TheBusyBee39/BlogButton150x150_zps81d04422.png' rel='apple-touch-icon-precomposed'/

    you just copied the wrong Photobucket image code. You copied the Email and IM one instead of "Direct".

    ReplyDelete
  35. Disqus is shortening the url here but i think you get the idea. ;)

    ReplyDelete
  36. remove the code you added then make sure you pasted it into the HEAD section.

    ReplyDelete
  37. Thank you, would never of reilised!

    ReplyDelete
  38. Ok, So I have changed it but now its not working.... I'm not very good at this Lol

    ReplyDelete
  39. Dana,

    I've added the code below as well as below , used a direct link and still no luck getting the mobile app. Site I'm working on is www.smoonstyle.com if you could provide any feedback that would be great! Thanks for this wonderful post. :)

    ReplyDelete
  40. Hi Dana,


    For some reason, its working on my iPad, but not on my mobile. Any thoughts on why this might be happening? My blog is Fields of Sage and here is the coding I entered...










    Many thanks xx

    ReplyDelete
  41. Oh it's working now... I took the default 'html?m=1' from the end of the mobile address and it worked. Thank you :-)

    ReplyDelete
  42. Fab tutorial! I've blogged about your site and created my own icon following your instructions.

    http://www.quintonwench.com/2014/07/iPhonehomescreeniconforblog.html

    ReplyDelete
  43. What! No way - it worked and it looks great. Thanks Dana......of course pretty much all the tutorials you share regarding blog tips and tricks are awesome. You take care of that creative mind of yours ok!

    ReplyDelete
  44. Do I edit in the child theme or Genesis? Thank you..

    ReplyDelete
  45. If you're using Genesis, I recommend going into Genesis > Theme Settings and scrolling down to Header and Footer Scripts. Paste it into the first wp_head box :)

    ReplyDelete
  46. Hi Dana! This is a great tutorial- THANK-YOU! I was wondering where you got the wallpaper for your iPod! I just really like it…!

    ReplyDelete
  47. This is such a helpful post! I have tried it out and all was going swimmingly until I tried to save the template and it came up with this error message: Error parsing XML, line 5, column 1: Element type "head" must be followed by either attribute specifications, ">" or "/>".
    I have no idea what any of this technical jargon means so I don't know if I've done something stupid or missed something out but I'm not really sure how to change it to make it work.
    Any help would be gratefully appreciated. Thank you, Lily

    ReplyDelete
  48. Nevermind! I just tried it again and it worked. WAHOO, thank you so much Dana for all of your amazing and such helpful tips and lessons; you're so smart and generous for giving all of this information out for free! Thank you again, Lily.

    ReplyDelete
  49. Hi Dana! i have tried to make an icon but it is not working! There is no error in the coding but when I add it to a homescreen it just comes up as a screenshot of my blog!
    This is my code….





    If you could help that would be great! Thank you! My blog is www.daisiesanddewdrops.com

    ReplyDelete
  50. oh! It is only working for my iPad not on my mobile! Also, recently I changes the URL to a custom domain and now the icon is only working for my old domain (www.daisiesanddewdrops.blogspot.com) but the icon is not working for my new custom domain (www.daisiesanddewdrops.com)! :( Any help would be greatly appreciated! Thanks!! xxx

    ReplyDelete

 photo prev_02.jpg  photo next.jpg  photo home.jpg
Back to Top