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 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.


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

Follow (CLICK TO FOLLOW ALONG AND STAY UPDATED)
Dana Fox
Dana Fox
blog
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!

YOU MIGHT ALSO LIKE

daily-blogging-tasks
My Essential Daily Blogging Tasks
February 05, 2016
Host
How & Why You Should Host a Twitter Chat
January 28, 2016
blogger-failures
6 Common Causes of Your Repeating Failure as a Blogger
January 22, 2016
sm-no-drama-llama
Tech Love: No Drama Llama
January 12, 2016
best-blogging-tips
The Best Blogging Tips Of The Year
December 28, 2015
black-fri-bloggerssm
Exclusive Black Friday Weekend Deals for Bloggers
November 27, 2015
improve-writing
How To Improve Your Writing Skills
November 12, 2015
lettering
5 Courses to Learn Hand Lettering at Home
November 10, 2015
blogger-to-wordpress
Transitioning from Blogger to WordPress Smoothly
November 03, 2015
  • http://www.paperswallowevents.com/blog Stacia

    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!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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!

  • http://scatteredpicturestheblog.blogspot.it/ Elisa

    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?

    • http://thewonderforest.com Dana Fox

      What is the problem you are having???

      • http://scatteredpicturestheblog.blogspot.it/ Elisa

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

        • http://thewonderforest.com Dana Fox

          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?

          • http://scatteredpicturestheblog.blogspot.it/ Elisa

            http://mayblossomstheblog.blogspot.it

            (thank you for your time:) )

          • http://thewonderforest.com Dana Fox

            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!

          • http://scatteredpicturestheblog.blogspot.it/ Elisa

            Thank you!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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?

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    What is the problem you are having???

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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?

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    http://mayblossomstheblog.blogspot.it

    (thank you for your time:) )

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Thank you!

  • S MFN Shyuhaila ∞

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

    • http://thewonderforest.com Dana Fox

      Are you on Blogger?

      • S MFN Shyuhaila ∞

        yes I am!

        • http://thewonderforest.com Dana Fox

          your section is right near the top of the code. you paste the code I provided above right below that, have you done that?

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • S MFN Shyuhaila ∞

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Are you on Blogger?

  • http://maybemonica.blogspot.com/ maybemonica

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

    • http://thewonderforest.com Dana Fox

      Yay!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    yes I am!

  • $100998592

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

    Marie
    freeseries.ca

    • http://thewonderforest.com Dana Fox

      awesome!! xo

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

    Marie
    freeseries.ca

  • Guest

    Wow this is such a unique tip c:

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Wow this is such a unique tip c:

  • http://12-1photographyblog.com Wendy Stains

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Yay!

  • http://threeloudkids.com/ Stephanie R.

    Amazing tip! I have got to make one of these!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Amazing tip! I have got to make one of these!

  • Tamanna Talwar

    How can I download the app if I have an android?

    • http://thewonderforest.com Dana Fox

      it’s not an app it’s a bookmark.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    How can I download the app if I have an android?

  • http://www.beakupcrafts.co.uk Beak Up Crafts

    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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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

  • http://KristinFleming.com/ Kristin

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • http://www.crazyblondegal.com/ Frankie CH

    I can’t get mine to work either :/ followed the steps exactly! x

    • http://thewonderforest.com Dana Fox

      Yours works for web view. Follow the instructions for mobile view as well :)

      • http://www.crazyblondegal.com/ Frankie CH

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • http://www.officallyhana.blogspot.com Hana Santiago

    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.

    • http://thewonderforest.com Dana Fox

      i don’t see the code added to your header in the mobile view. make sure you are adding it below that mobile code within the section. It should be just below where you pasted the web version one, near the top of the code.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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.

  • Guest

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

    • http://thewonderforest.com Dana Fox

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • Guest

    I tried it and it works…kinda. The picture I created doesn’t seem to show up and instead, the icon is a screenshot of the mobile version of my blog. Is there a way to fix this?

    • http://thewonderforest.com Dana Fox

      Yes please read the bit about the mobile version in the post 😉

      • Guest

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

        • http://thewonderforest.com Dana Fox

          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.

          • Guest

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Yes please read the bit about the mobile version in the post 😉

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • Gemma

    I don’t understand the replace http://url bit :/

    • http://thewonderforest.com Dana Fox

      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.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • Gemma

    Nope, this didn’t work for me.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Nope, this didn't work for me.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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.

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • http://livingthegourmet.com/ Tammy Pappas

    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!

    • http://livingthegourmet.com/ Tammy Pappas

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

      • http://thewonderforest.com Dana Fox

        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 :)

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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!

  • Guest

    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 :/

    • http://thewonderforest.com Dana Fox

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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 :/

  • http://thebusybee39.blogspot.co.uk Bethany W

    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..

    • http://thewonderforest.com Dana Fox

      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”.

      • http://thewonderforest.com Dana Fox

        Disqus is shortening the url here but i think you get the idea. 😉

        • http://thebusybee39.blogspot.co.uk Bethany W

          Thank you, would never of reilised!

        • http://thebusybee39.blogspot.co.uk Bethany W

          Ok, So I have changed it but now its not working…. I’m not very good at this Lol

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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..

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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%5D%5BIMG%5Dhttp://i1175.photobucket.com/albums/r629/TheBusyBee39/BlogButton150x150_zps81d04422.png%5B/IMG%5D%5B/URL%5D/your-image.jpg&#39; rel='apple-touch-icon-precomposed'/

    it should look like this

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

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Disqus is shortening the url here but i think you get the idea. 😉

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    Thank you, would never of reilised!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • http://www.rebeccabrayman.com Rebecca Brayman

    Dana,

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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 http://www.smoonstyle.com if you could provide any feedback that would be great! Thanks for this wonderful post. :)

  • Anna Davis

    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

    • Anna Davis

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

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

  • http://vanillasnaap.blogspot.co.nz/ Vanilla Snaap

    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!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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 :)

  • Emily

    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…!

    • http://thewonderforest.com Dana Fox

      The floral one or the yellow one? The flower one is just a photo I found somewhere… I don’t remember, sorry! and the yellow one I just googled polka dot backgrounds!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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…!

  • Lily Vale

    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

    • Lily Vale

      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.

      • Lily Vale

        Oh, hang on… it’s only working on my iPad, not iPhone… I added the code under the mobile section as well. Do I need to give it time to work or anything?

      • http://thewonderforest.com Dana Fox

        Glad you figured it out! That trailing slash at the end of the link href code is key 😉

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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.

  • daisiesanddewdrops

    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 http://www.daisiesanddewdrops.com

    • http://thewonderforest.com Dana Fox

      ^^ like i said in the instructions above, add the link href code below the data:blog.isMoble code as well 😉

      • daisiesanddewdrops

        Oh thanks so much i did not get that! Also I did not change my domain, my uncle did because he does lots of coding, so i will ask him why he used iframe! Thanks for your help!

        • daisiesanddewdrops

          Ahhh! I added the the new link but it still doesn’t work! Sorry for all this but do you know why it might not be working on mobiles even thought i added the link under the mobile bit !??

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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 http://www.daisiesanddewdrops.com

  • daisiesanddewdrops

    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

    • http://thewonderforest.com Dana Fox

      You have your site in an iframe on your new domain name. Any reason you did that? I highly recommend not doing that because your search rankings and stuff will never work right. Your main site will also still always be your blogspot address because you really haven’t changed the domain properly… which is why your icon isn’t working there either. Please check out my post on setting up a custom domain properly on Blogger: http://www.thewonderforest.com/2013/08/how-to-set-up-custom-domain-in-blogger.html for help! Also make sure you follow the instructions in this post for adding the code to mobile.

      • Guest

        Oh thanks! I did not set up the new domain my uncle did because he does lots of coding but I will ask him. Also I did put the code for mobiles but it is still not working! Thanks for your response!

  • https://www.blogger.com/profile/16765434513591686519 info@designedbydana.com

    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

  • http://www.acertainromance.net Andy // A Certain Romance

    Hi Dana,

    it works great on my iPad but can’t seem to make it work on my iPhone. I’ve followed the instruction and read the comments, but I still can’t figure it out. I copied the code under :

    but when I save my template, I get this message:

    Error parsing XML, line 686, column 5: The element type “b:if” must be terminated by the matching end-tag “

    Do you know what the problem might be?

    • http://thewonderforest.com Dana Fox

      Did you add in that bit or did you paste the second code under the pre-existing one that is already in your header section? The error means your statement is open and needs to be closed. If you added in another instance of it…. …. with no ending that error will appear.

  • http://www.mimislittlelifeythings.blogspot.co.uk/ Emily Rhodes

    Thanks for this tutorial! My icon looks great, just like an app aha! Really helpful and I sussed out all the coding in the end! :)

  • http://www.darlingprepster.com/ Ashliegh

    Hey Dana!! This is such an awesome tip and i’m so excited to install this to my blog! I just tried yet I cannot for the life of me get it to work! I’ve read through all the comments below to try to solve the problem but, i got nothing. Here’s the code that I have installed:

    But I get this when I try to save it on my template: Error parsing XML, line 782, column 5: The element type “b:if” must be terminated by the matching end-tag ““. So I added the ” to the end of the whole sequence but on my iPhone the bookmark comes up as a screenshot of my blog on the app not the icon I had chosen.

    I appreciate your help!!!!

  • Georgia Kane-Frazer

    It may have took a short while but everything is working great, this is perfect for my small business, Thank you Dana (Iv shared on all platforms)

    • http://thewonderforest.com Dana Fox

      thanks for sharing! and glad you got it working :)

  • Erin

    Hey Dana,
    I have followed your instructions and this is the code I have. I keep checking to see if it has worked on both my iPhone and my iPad and neither have worked. Is the code correct…what am I doing wrong!? Thank You


    • http://thewonderforest.com Dana Fox

      What is your blog URL?

  • http://cuteiinstgram.blogspot.com/ Cuteinstgram

    You are an amazing person <3 thank you for this Much Love :*

    http://cuteiinstgram.blogspot.com

  • http://www.thewonderofstyle.com/ Clare Verwoerd

    Yeyy, it worked, thank you so much Dana :) xox

  • http://snobbibobbi.wordpress.com Nyree

    I wish I could do this trick but I can’t get into my html on wordpress without buying it.

  • http://www.bloggingwithgraceylee.com Bloggingwithgraceylee

    do you know how I can do this on square space?

  • http://www.roguebirders.com Christopher Collins

    Like others, it is not working for me on Blogger. If I am on my phone and set ?m=0 (showing full site) it works perfectly. When viewing the mobile version, I get the default page screencap image. This code is in my template html. Any advice would be great. Thank you!

  • https://www.thepetitepassions.com Petite Passions Blog

    Amazing! Now I need to work on a better icon but at least I know it works!
    Thanks Dana