How To: Create A Custom IOS Blog Icon - B Loved Boston

Boston

Boston
Around Boston

Q&A

Q&A
Frequently Asked Questions

Shop Favorites

Shop Favorites
Shop My Favorites

How To: Create A Custom IOS Blog Icon

When I think of my phone or iPad I like to have "shortcuts" if you will to my favorite sites and when I found out that I could do the same for my blog and have a custom icon I couldn't wait to try it out - with the help of my tech savvy husband of course! At the end of this post I guarantee you'll be saying, why didn't I do this sooner!! 
How To Create A Custom IOS Blog Icon
What you'll want to do first regardless of if you are on Wordpress or Blogger is create your image icon. You want to make sure that you create a perfect square and that it's 152px by 152px as this is the standard for iPhone and iPad icons. We used Adobe to create the icon, but there are plenty of other design services that can help you achieve the picture. I did initially try PicMonkey and sadly the pixels just wouldn't work out and I wasn't able to create the perfect square I needed! You also want to keep in mind that this is a tiny image, so you don't want anything too busy or too hard to see with colors! For example I had originally wanted to include a heart but it was so small that you wouldn't be able to make out that it was indeed a heart! 
For those of you on Wordpress I did find instructions for you - they are just slightly different and also much quicker - lucky you! You can find them here!  
For those on blogger - you can keep reading for a step by step process! Don't be put off that there is "code" that you need to insert because I will be listing it out, so all you have to do is copy & paste! 

1. After you have created your image make sure you name it "apple-touch-icon-precomposed.png"

2. Save the image to a hosting site - I used PhotoBucket and then copy the direct link.
How To Create A Custom IOS Blog Icon
3. Go to Blogger > Template > At the top you'll see Backup/Restore...make sure you do this because you just never know! After you restored hit "Edit HTML"

4. Insert the following code right underneath <head> 
<link rel="apple-touch-icon-precomposed" href="http://YourImageDirectUrl.png" />
Make sure you put your own Direct Code from the image hosting site or else it wont work! 
How To Create A Custom IOS Blog Icon
**If you get an error message check your quotes because they can sometimes be copied over incorrectly. 

Adding this to your phone & iPad

1. On your phone or iPad, open the internet browser and then go to your blog
2. Click on the up arrow 
How To Create A Custom IOS Blog Icon
3. Add to home screen
How To Create A Custom IOS Blog Icon
4. Shorten your blog name - For example - mine had to be shortened to "B~Loved"
How To Create A Custom IOS Blog Icon
And then you're done!! It's like you have your very own App! 

Do you think this is something you'd add to your phone or iPad?

xo,
post signature

69 comments

  1. WOW, I had no idea you could do this! Thanks so much for sharing, your directions are awesome! Happy almost FRIDAY!!!!

    ReplyDelete
  2. This is sooo cool! I wish Marc could help me with stuff like this! lol xo

    ReplyDelete
  3. How cool is this?!! And it sounds easy enough. Going to give it a try!

    ReplyDelete
  4. What a fun tutorial! I can't wait to try this! Thanks girl.
    xo, Whitney and Blaire
    Peaches In A Pod

    ReplyDelete
  5. What?!?? How fun is this? Now I need to come up with a logo of some sort LOL. Darn my ridiculously long blog name! Definitely trying this out later though!

    <3, Pamela
    Sequins & Sea Breezes

    ReplyDelete
  6. What a great idea!! I have my Blogger homepage set up as a button but didn't think to do my actual blog :)

    ReplyDelete
  7. Before I got my new phone (which has WAY less storage, ugh), I had all of my favorite bloggers as icons!! Love it!

    ReplyDelete
  8. Very impressed girl!!! That is amazing!!!!! I totally want to do this! Thanks for the step by step!!!!

    ReplyDelete
  9. Your icon came out great. I am on Wordpress but I made one too. So much easier.

    ReplyDelete
  10. Holy crap this is incredible! You guys are an amazing team <3

    ReplyDelete
  11. This is so fun!! Can't wait to try it out!

    ReplyDelete
  12. Girl you are so tech savvy! I want my own button! :)

    ReplyDelete
  13. woot! now i just need to figure out how to do this for WP but i'm sure i can! :) good work on the step by step guide!

    cheshirekatblog.com

    ReplyDelete
  14. Such a good idea!! Seriously though, why haven’t I done this before??

    ReplyDelete
  15. Love this! My husband actually has my blog as an icon on his phone but Its not as fancy haha! I think it's just a screen shot or soemthing since he didn't insert a picture. Now I need to do this!

    <3 Shannon
    Upbeat Soles

    ReplyDelete
  16. Cool! I probably won't do it because I just access and edit through Blogger on my phone. I'm trying to keep my apps down because I'm always nearly out of space.

    ReplyDelete
  17. Ahh this is so, so cool! I cannot wait to try this out! I never even realized this was something that could be done - thanks for sharing!!

    ReplyDelete
  18. This is awesome!! I didn't even know you could save websites to your home screen so definitely adding a few of my favorites to mine today - thanks lady!

    ReplyDelete
  19. What an awesome tutorial! I had no idea that you could do this - definitely trying it out in the coming days!

    ReplyDelete
  20. This is so amazing!!?? Who knew?? I'm going to work on this now!!

    ReplyDelete
  21. I love when other bloggers share their tips and tricks....love this! Thanks for sharing - I pinned it so I can give it a go this weekend!

    ReplyDelete
  22. Definitely going to have to give this a try! Thanks for sharing, Biana!
    xo Southern Style

    ReplyDelete
  23. I love little tricks like this! Thank you so much B!!

    ReplyDelete
  24. Omgsh this is so cool I can't take it!! And honestly--you laid out the steps so easily I think even a very non techy person like myself can accomplish it :) Thanks for sharing!!

    Tori
    FashioinBlingGirlyThings

    ReplyDelete
  25. No way!! How cool is this?! I had no idea you could do this! Definitely have to try it out! Thanks!

    ReplyDelete
  26. How amazing is this?! I have seen people do this and was like why could I not figure this out! Such a fab idea, cause I honestly visit my site enough!

    Denise | Fashion Love Letters

    ReplyDelete
  27. Ooooh I must try this over the weekend! I have noticed if you save a site/blog to your home screen, it (sometimes) adds an icon from the site for you. I like being able to customize it to make it stand out more. Being able to shorten the name before is also a fairly new thing, I think!

    ReplyDelete
  28. Omg, this is such a great idea!! I'm going to do this right away. :)

    ReplyDelete
  29. I love this idea, definitely need to do this. Thanks for sharing!

    prosecco in the park

    ReplyDelete
  30. this is so nifty!! i had no idea you could do this.

    ReplyDelete
  31. Great job! This is an awesome tutorial! THank you for sharing!

    ReplyDelete
  32. Oh my gosh! That is so awesome! Thank you for sharing.

    ReplyDelete
  33. This just blows my mind... so techy :)

    ReplyDelete
  34. Pretty cool! Now I just need to upgrade my iPhone..Sigh lol.

    ReplyDelete
  35. Such a cute idea!!! iPhones... they can do practically anything it feels like! :)
    xoxo
    Brooke|LookBrooke

    ReplyDelete
  36. How smart are you for figuring this out!! I think I might just try.. it might take me a little while but I'll give it a go!

    ReplyDelete
  37. Ahh, such a good idea! Thanks for sharing!

    ReplyDelete
  38. This is so cool! I'd love to do this for my iPad (I'm still in Android land for my phone :) ).

    ReplyDelete
  39. Holy cow! This is awesome! I'm going to do this!

    ReplyDelete
  40. That is so cool! Who knew you could do that? Thanks for sharing!

    ReplyDelete
  41. You and Gary are so tech-savvy! This is SO cool! Thank you for sharing!!

    ReplyDelete
  42. This is so smart and cute and of course I'm thinking, why didn't I know about htis sooner!? Cheers to sharing, friend :)

    ReplyDelete
  43. this is awesome! I need to do this because I'm all the time having to type my address in. Thanks for sharing!

    ReplyDelete
  44. Um this is amazing!! I had no idea this could be done! Thanks for the awesome tutorial!
    xoxo Danielle
    For the Love of Leopard

    ReplyDelete
  45. Welllll this might be the coolest thing ever!!! I love what you picked for yours :) Thanks for sharing!

    ReplyDelete
  46. Thanks for sharing this girl! I love this idea and had no idea it was possible! Gotta love tech savvy guys:)

    xoxo
    Karen
    http://kensingtonwest.me.uk

    ReplyDelete
  47. Love this girl! I never thought to create a link to my blog since I just use the WordPress app for everything, but this makes it so easy to go to my actual blog.

    ReplyDelete
  48. This is awesome! I am sure with plenty of frustration I may give this a try! Thanks for sharing!!

    ReplyDelete
  49. Oh my! Goodness Gracious! This is fabulous, I'll be doing this right away! Xo, Stephanie

    ReplyDelete
  50. This is the coolest and so helpful. Thanks B!!

    xx 365Hangers

    ReplyDelete
  51. AHHH thank you for this. I did something similar to this and it wasn't working so well. Yay!

    ReplyDelete
  52. Such a great idea - Im on blogger - and followed the steps by steps. But somehow it didn't work for me. Oh wells.

    ReplyDelete
  53. This is genius, Biana! Thank you for sharing!

    - Deniz
    www.dressedupdeniz.com

    ReplyDelete
  54. Uhhhh why didn't I know about this sooner lol?! Headed to try this out right now....

    ReplyDelete
  55. You are getting so good with the techy side of blogging! I am so impressed!

    ReplyDelete
  56. This is awesome, thanks for sharing!

    ReplyDelete
  57. I don't know how I missed this post yesterday. Woah, this is so cool. I'm going to do it! Thanks for sharing!

    ReplyDelete
  58. This is such a good idea- I should definitely do it on my ipad so my blog is more accessible- usually I only do blogging things from my computer. Also- this is random, but kind of relates- ever since Bloglovin' updated, every time I see the little B' icon that goes next to the address bar I think it's your blog! haha

    ReplyDelete
  59. I've seen this as a possibility before, but the idea NEVER joined with my blogging. Thank you so much for sharing this, what an awesome idea. Just as you say it's like your blog has it's own app! So cool!!

    Much Love,
    -Stephanie Eva
    www.stephanieheva.blogspot.com

    ReplyDelete
  60. This is awesome!! I have a folder for my blog and had the page in the folder but could NOT figure out how to get an icon for the page. Love this and it totally worked. I even got my image to work in picmonkey!

    ReplyDelete
  61. How stinking adorable is this?!?! I LOVE IT! I may try it. There may be a tantrum. lol

    ReplyDelete
  62. How cool is that! Sometimes technology is way over my head! :)

    ReplyDelete
  63. This is so cool. Just added the page to my pocket. Can't wait to create and picture later and add to my home screen. xo, Amanda

    ReplyDelete

I read and respond to each and every one of your comments via email! Thank you for taking the time to read!