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






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?



Linking up with The Deliberate Mom & A Touch of Grace

xo,

post signature

Share:

69 Comments

  1. P!nky
    March 19, 2015 / 10:14 am

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

  2. Claire | Fashion + Feathers
    March 19, 2015 / 10:16 am

    That's awesome!! Thanks for sharing.

  3. Stacy G
    March 19, 2015 / 10:20 am

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

  4. Amanda | Kids and Cabernet
    March 19, 2015 / 10:52 am

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

  5. Whitney and Blaire
    March 19, 2015 / 11:00 am

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

  6. Pamela {Sequins and Sea Breezes}
    March 19, 2015 / 11:15 am

    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

  7. Kristina @ Medicine and Manicures
    March 19, 2015 / 11:19 am

    What a great idea!! I have my Blogger homepage set up as a button but didn't think to do my actual blog πŸ™‚

  8. Joey Hodges
    March 19, 2015 / 11:38 am

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

  9. Amanda Elizabeth - Meet @ the Barre
    March 19, 2015 / 11:40 am

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

  10. awhite
    March 19, 2015 / 11:50 am

    Too stinkin' COOL. Love this!

    -Ashley
    Le Stylo Rouge

  11. Kerry @ Till Then Smile Often
    March 19, 2015 / 12:00 pm

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

  12. Kate at Green Fashionista
    March 19, 2015 / 12:00 pm

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

  13. B @ The Sequin Notebook
    March 19, 2015 / 12:05 pm

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

  14. Jenn
    March 19, 2015 / 12:15 pm

    Girl you are so tech savvy! I want my own button! πŸ™‚

  15. kerri @ cheshire kat
    March 19, 2015 / 12:22 pm

    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

  16. Ashley
    March 19, 2015 / 12:30 pm

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

  17. Shannon Jenkins
    March 19, 2015 / 12:41 pm

    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

  18. SMD @ lifeaccordingtosteph
    March 19, 2015 / 12:54 pm

    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.

  19. M @ The Sequin Notebook
    March 19, 2015 / 12:57 pm

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

  20. Katie Elizabeth
    March 19, 2015 / 1:00 pm

    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!

  21. Karly @ What Karly Said
    March 19, 2015 / 1:11 pm

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

  22. Lindsay @ Lovely Life Styling
    March 19, 2015 / 1:16 pm

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

  23. Jaelan @ Making Mrs. M
    March 19, 2015 / 1:17 pm

    How fun! That's a great idea.
    Making Mrs. M

  24. sara [at] journey of doing
    March 19, 2015 / 1:22 pm

    That's so genius!!

  25. Katie @ yellowmangolife.blogspot.com
    March 19, 2015 / 1:30 pm

    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!

  26. Zelle B.
    March 19, 2015 / 1:33 pm

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

  27. Maddie
    March 19, 2015 / 1:37 pm

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

  28. Tori
    March 19, 2015 / 1:52 pm

    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

  29. Courtney B
    March 19, 2015 / 1:54 pm

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

  30. Denise
    March 19, 2015 / 1:59 pm

    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

  31. Dorrie @ Rt 1 US 1
    March 19, 2015 / 2:03 pm

    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!

  32. Jax
    March 19, 2015 / 2:11 pm

    Omg, this is such a great idea!! I'm going to do this right away. πŸ™‚

  33. Lyndsay
    March 19, 2015 / 2:12 pm

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

    prosecco in the park

  34. Kristen
    March 19, 2015 / 2:48 pm

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

  35. Pamela @ alittleglitter.com
    March 19, 2015 / 2:49 pm

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

  36. Calamity Lace
    March 19, 2015 / 3:05 pm

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

  37. Rebecca Jo
    March 19, 2015 / 3:51 pm

    This just blows my mind… so techy πŸ™‚

  38. Caroline @ Windy City Chic
    March 19, 2015 / 4:09 pm

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

  39. Brooke
    March 19, 2015 / 4:42 pm

    Such a cute idea!!! iPhones… they can do practically anything it feels like! πŸ™‚
    xoxo
    Brooke|LookBrooke

  40. Christina Lea Loves
    March 19, 2015 / 5:00 pm

    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!

  41. Carly Messmer
    March 19, 2015 / 5:19 pm

    Ahh, such a good idea! Thanks for sharing!

  42. Meg Taylor
    March 19, 2015 / 5:27 pm

    This is so cool! I'd love to do this for my iPad (I'm still in Android land for my phone πŸ™‚ ).

  43. Kelli @ A Deeper Joy
    March 19, 2015 / 6:20 pm

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

  44. Unknown
    March 19, 2015 / 6:29 pm

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

  45. Pink and Fabulous
    March 19, 2015 / 6:32 pm

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

  46. Anonymous
    March 19, 2015 / 7:18 pm

    This is so smart and cute and of course I'm thinking, why didn't I know about htis sooner!? Cheers to sharing, friend πŸ™‚

  47. Lindsay T.
    March 19, 2015 / 8:23 pm

    whaaat I had no idea you could do this!!

  48. Paige @ Reasons to Come Home
    March 19, 2015 / 8:26 pm

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

  49. Unknown
    March 19, 2015 / 8:36 pm

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

  50. Nadine
    March 19, 2015 / 8:36 pm

    Welllll this might be the coolest thing ever!!! I love what you picked for yours πŸ™‚ Thanks for sharing!

  51. Anonymous
    March 19, 2015 / 9:30 pm

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

    xoxo
    Karen
    kensingtonwest.me.uk

  52. Tiffany {A Touch of Grace}
    March 19, 2015 / 10:26 pm

    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.

  53. LifeasKLK
    March 19, 2015 / 11:00 pm

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

  54. Stephanie Chalk
    March 20, 2015 / 12:24 am

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

  55. 365HANGERS
    March 20, 2015 / 12:38 am

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

    xx 365Hangers

  56. Kayla MKOY
    March 20, 2015 / 1:41 am

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

  57. Stephanie Smallsen
    March 20, 2015 / 1:41 am

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

  58. Unknown
    March 20, 2015 / 3:54 am

    This is genius, Biana! Thank you for sharing!

    – Deniz
    dressedupdeniz.com

  59. Andy Adler
    March 20, 2015 / 12:46 pm

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

  60. JumpingJE
    March 20, 2015 / 12:57 pm

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

  61. Heather
    March 20, 2015 / 3:16 pm

    This is awesome, thanks for sharing!

  62. Katie at Better Off Benedict
    March 20, 2015 / 3:23 pm

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

  63. Carly
    March 20, 2015 / 5:15 pm

    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

  64. Stephanie Roberts
    March 21, 2015 / 7:13 pm

    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
    stephanieheva.blogspot.com

  65. Kay R.
    March 22, 2015 / 5:34 am

    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!

  66. Amanda - Voyage of the MeeMee
    March 23, 2015 / 12:19 am

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

  67. Julie @ Just the Joy's
    March 23, 2015 / 4:37 pm

    How cool is that! Sometimes technology is way over my head! πŸ™‚

  68. Behind the Mirror
    March 23, 2015 / 11:07 pm

    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

  69. Unknown
    May 5, 2015 / 8:25 am

    fred perry polo shirts
    coach outlet
    karen millen dresses
    soccer jerseys
    asics shoes
    babyliss
    gucci outlet
    foamposite shoes
    cheap snapbacks
    rolex watches
    salomon shoes
    louis vuitton
    oakley sunglasses
    ed hardy clothing
    burberry outlet online
    michael kors outlet
    nike roshe run
    true religion jeans
    toms shoes
    abercrombie and fitch
    abercrombie
    michael kors canada
    ray ban uk
    prada handbags
    michael kors outlet
    nike air max uk
    michael kors outlet
    louis vuitton uk
    air jordan shoes
    mcm handbags
    oakley sunglasses
    oakley sunglasses
    cheap oakley sunglasses
    air jordan 4
    hollister clothing
    tory burch outlet
    cheap nhl jerseys
    kate spade outlet
    lululemon outlet
    discount oakley sunglasses
    caiting0504