Tell Me About It Tuesday | {Tech-Apple Icons}

Welcome!

Today’s Tell Me About It Tuesday is: Tech Tips!

if you are new here each Tuesday is Tell Me About It Tuesday but it alternates Tech Tips & Product/Items I love
 

Today I want to tell you how to create a homepage icon for your blog in case anyone ever adds a direct link to your blog on their iPad/iPhone/iPod homescreen.

You know the icons. The rounded corner, shiny looking app icons. You can have one and have it automatically appear when someone clicks “Add to homescreen” from their web browsers on their i-whatever device.

Pretty neat huh?

how to add apple touch icons to your website

It’s one more way to brand yourself.

and Branding. Is. EVERYTHING.

Ok. Ready?

Definition of what we are creating: an Apple touch icon is basically a favicon for Apple mobile devices, and, if set, is displayed when a user saves a web page to their home screen.

First you should check and see what pops up when you add your blog to an i-device homescreen. To do that follow these steps:

  1. Open Safari on the device & navigate to your blog.
  2. Click this icon at the bottom of the screen (or top if it’s an iPad)
  3. A whole menu of options should come up. Click “Add to home screen”
  4. Next the ‘add to home screen’ screen comes up and you should be able to title it whatever you want. I recommend your site name to avoid confusion.
  5. Next you will see the icon pop up on your home screen when you click ‘add’ It will most likely just be a screen shot of your website. Which is not pretty in small icon format:

So let’s change that!

First you need an icon that is sized 129 pixels high by 129 pixels wide. Do not worry about making rounded corners or that shiny reflection thing. Apple does that automatically (or if you don’t want that I can show you how to code it so it shows up as a flat square).

Make sure you save your icon as a .png file.

Need help creating one? You have 2 options: Hire me to make one for $5 OR download the free photo editing software GIMP (which is by far the BEST free photo editing/graphics software–very similar to photoshop) and create one yourself!

Next you need to take your saved .png file and upload it either in your blog’s media section (wordpress users), through FTP if you know how is best but just the regular media section will work, or photobucket if you use blogger.

You will need to copy & paste the direct link to the image url so save it somewhere you can find it (just open a blank text document in Word or any text editor on your computer).

Navigate to your blog’s <head> section and add this code (changing the RED part to your images direct link url):

<LINK REL=”apple-touch-icon” HREF=”YOUR-IMAGE-LINK-HERE” />

OR if you want it to show up with rounded corners but NOT glossy use this code (you can only use one, not both):

<LINK REL=”apple-touch-icon-precomposed” HREF=”YOUR-IMAGE-LINK-HERE” />

Need help finding your <head> section?

If you use wordpress (self-hosted) and have the Headway theme:

  1. Go to your dashboard and click on “Headway”
  2. Then click on “Configuration” and then Scripts & Analytics.
  3. Your Head section is the first section in that tab. Add the code & click save.

If you use wordpress (self-hosted) and have the Genesis theme:

  1. Install the plugin called: Genesis Simple Hooks
  2. Navigate to Genesis–>Simple Hooks.
  3. The first one (called wp_head) is where you put your code. Then save.

If you use Blogger:

  1. Head into your dashboard and enter the ‘edit HTML’ portion of your site
  2. Use your ‘find’ option (PC users click control plus the F key at the same time, Mac users click command plus the F key at the same time) and type in <head>. This will bring you to the right section in the HTML.
  3. Place your code directly under <head> and save.

Want to see what all that hard work gets you?

On my sites my pretty button looks like this:

Tell me in the comments please:

Do you have one of these set up yet?

Did you even know it was possible?

As always:

Have a happy day,

If you like what you just read please Subscribe so you don’t miss a thing!

Enter your email address to get posts delivered directly to your inbox:

It is totally FREE!

Follow me on Twitter & Facebook for updates in between blog posts & also sneak peaks!!

Related Posts Plugin for WordPress, Blogger...Pin It
Be Sociable, Share!

{Comments}

  1. I wish I had an iphone or i something or other so I could make one like that. Pretty neat!
    shelly recently posted..Holiday Gift Guide 2012: Taking Submissions

    • Shelly, You don’t need an iPhone or i-something to make one & have one. Its there so that your blog readers who have an i-device can see it ;) So you should still add one to your site’s code! :)

  2. I will PIN this because I LOVE it! Thanks, Kristi!

    Becky B.
    http://www.organizingmadefun.com
    Organizing Made Fun
    Becky@OrganizingMadeFun recently posted..OMF to the Rescue: Master closet organizing dilemma!

  3. That was awesome, thanks! I found you on Pinterest… i totally didn’t even attempt to make the icon pretty, because i don’t think i can follow the instructions, but i love having the icon on my iphone!

    Cindy

  4. This is genius, and I’m doing it!

  5. I stopped reading when you said “hire me for $5″. Can this be something you add to bag of tricks you’re already working on?
    Adrienne recently posted..The Five Year Panic

  6. Hi Kristi,

    I added my home page to my i phone desktop. But got lost after that. Can I hire you to finish everything for me? I can pay you via paypal.

    Look forward to hearing from you!

    Jane
    Finding Fabulous
    http://www.findingfabulousblog.com

  7. Hi Kristi!!

    First of all, thank you so much for this great tutorial!! You made it so simple to follow!

    Question, I have a blog via blogger. I’ve followed your instructions, but when I add the icon to my phone it’s not showing up. Do you know if this takes time before it will “activate?”

    FYI, I noticed that blogger does change what I typed in a bit but nothing that should disable it. It just rearranges the REL and the HREF.

    I sincerely appreciate any guidance!

    Thanks so much!!

  8. I love tutorials for stuff like this!!! Off to make mine today. Thanks, girl!
    xo,
    Shannon
    Shannon aka design recently posted..September Recap

  9. I tried and got this error… Error parsing XML, line 5, column 11: Open quote is expected for attribute “{1}” associated with an element type “REL”.

    HELP!

  10. Will this work on a WordPress site that is not self-hosted?

    • Carol, I’m not sure. You have to have access to a place to put the code. Check in your settings to see if you do. Usually before the closing tag in html.

  11. I did not know this was possible! I just set one up on my site – thank you!

  12. Sweet! i did it! Thanks! had no idea you could do this.

  13. Hello there! This is a great tutorial – so easy to follow. Thank you! One quick question. Is there something I need to be doing after hitting save to update the icon on my iPhone from the one I added during the test? The code is saved in the head section of my (WordPress) blog, but the icon I added during the initial test is unchanged.

    Thank you!

    xoxo,
    Meredith (& Gwyneth too)
    Meredith & Gwyneth recently posted..Printed, Purple, Pony and Practically Minimalist

    • Meredith, you have to delete your test icon and add it again once the icon is saved in the code. :) iPhone doesn’t auto-update the icons (boo!) Glad it was helpful and thanks for stopping by and commenting!

  14. I need a little help… I followed the instructions (even took note of the comments above, I am on blogger) and the template was successfully saved. But I’m trying to create the bookmark on my phone, using the web version, and it still isn’t appearing when I create it? It’s still coming up as a screen shot of my site. :9

    • Bobbi, I keep getting this issue with blogger blogs recently. I’ll have to go play around with my code on blogger and see what (if anything) they have changed and see if I can get it to work again! Thanks for letting me know there is an issue!

  15. Same issue as the above comment on blogger. I’ve tried it all and even changed it from ” to ‘ all throughout the link. That took away the error message, but it still is showing up as a screenshot.

    Any help would be much appreciated! Great tutorial though! Super easy to follow and a fabulous and useful idea!!

  16. Hi Kristi,
    Great tutorial! I think I followed it perfectly, but the new image still isn’t showing up on my phone. I’m thinking my error is in copying the image url….when I uploaded the image to my media library in my dashboard, where do I find the direct link to the image url? Thanks so much! Hopefully I can get it, it’s such a neat idea!
    -Shara

  17. I’ve tried this and followed it to a tea several times and I keep getting an error… giving up :(

  18. Thank you so much for the tutorial! I did everything as well, but it still won’t upload with the correct icon. I already had code in that particular section, so I just separated them by a tag. Was that right? Should I have done something else? I’m on WP Genesis.

    Thanks so much!!!
    kierste recently posted..{mailing easter eggs}

    • Kierste, I’ll have to do some digging as to why this isn’t working for people as much as it was before. I’ll post an update here when I find out why (I’m thinking when they upgraded wordpress some of the code might have changed). Thanks for letting me know & for stopping by and commenting!

  19. I’ve always wondered if there was a way you could do that. Just changed mine — thanks so much for the easy tutorial!
    Danielle recently posted..Three Pinterest Features You Might Be Missing Out On

  20. You. Are. Awesome! Took me less than 15 minutes to do this!! THANK YOU!
    Mallory recently posted..These Aren’t The Worst Days

  21. Hi Kristi,
    I just made a button for my blog and got it to work on my phone. How do readers get my button now?
    Thanks,
    Annie
    Annie @ What’s Annie Making recently posted..Five For Friday – J Crew Factory Edition

    • Hi Annie! Write a post and let them know that if they want to save a link to your blog on their phone they can open their web browser (on the phone) and click “add to home screen” That’s it! Your pretty button should show up! :) Thanks so much for stopping by and I’m glad you got a pretty new button out of it! :)

  22. What an amazing trick! I recently did this with my own blog using your tutorial. Thanks so much for sharing!

    I’m featuring your post on my blog today for a round-up of blogging tips & tricks. I’d love for you to check it out: http://www.framedfrosting.com/2013/04/round-up-of-blogging-tips-tricks.html

    Danielle at Framed Frosting
    Danielle recently posted..Round-Up of Blogging Tips & Tricks

    • Danielle,
      Thanks so much for including me in your round up! I’m actually reciprocating the bloggy love today in my “Share Saturday’ post if you want to swing by and check it out!

  23. Thanks so much! This tutorial was super easy and it worked perfectly which is something I don’t find very often when it comes to technical bloggy stuff! I really appreciate it :)
    Melissa Belanger recently posted..Pretzel Pork Chops

  24. Quick question! Does this work for Android?
    Melissa Belanger recently posted..Pretzel Pork Chops

    • Kristi says:

      Melissa, I’m not sure if it works or not for Android. I don’t have one to check ;) I would suspect it doesn’t but feel free to check it out on an Android phone and let me know!

  25. I must be doing something wrong cause this will not work for me. this is the 3 time i have tried from a different website that has posted to do this. all the codes are the same and all the comments say that they work. Something must be wrong with me. Im using blogger but it wont show up on my phone.
    also my templet wont save any of the changes i make. so that is also a problem. ha sorry i know that there isnt a question here but if anyone has had the same problem as me then i would love it if you could help me out.

    thanks
    kylielyn

  26. Found this tutorial on Pinterest this morning & it worked perfectly for me (on a Blogger site and for someone who knows ZERO HTML!) – thanks!!
    Crystal recently posted..What We Believe

  27. I created a really cute logo that matches my blogs header but I can’t find where to paste the code into my blog. I’m wordpress self hosted with the Forever theme. Do you have to Headway or Genesis for this to work?
    Ashley Leona recently posted..I’m joining the Bloglovin network!

    • Hi Ashley! Sorry it took me a few days to reply–I was in labor when you commented ;) You’ll need to look around your theme and find where the html is. Usually if you can find your Theme Settings or where the code section is. I’ve never used the Forever theme so I can’t tell you specifically but if there was a forum you can ask or Google the theme and see where the section is that might point you in the right direction!

Trackbacks

  1. [...] “wasting time” on Pinterest, I found this fantastic site. Blogger, Kristi, of creativekristi.com is a proud Military wife and mother of two, living in [...]

  2. [...] How to add a pretty button to your blog code so that it appears as an app button on iPhones & iP… [...]

  3. [...] Danielle at Framed Frosting has a great Round-Up of Blogging Tips & tricks (which I am not just including because she linked to my post on how to create a custom blog app icon for your reader’s home screens.) [...]

Speak Your Mind

*

CommentLuv badge