Skip to main content

Tips & Tricks / Use Apple Touch Icons for your Blog or Website

If you save bookmarks to the Home screen on Mobile Safari you may want to try this out on your own blog.

Here is how to use Apple Touch Icons for your Blog or Website.

These instructions are for blogger / blogspot which I use for both my personal blog and my podcast.

You will need the following:
  1. An icon or image you want to represent your site.
  2. A simple image editor to resize the image. 
  3. Dropbox or somewhere to host the image files.
  4. A bit of HTML coding.
You need a total of five images to handle all the resolutions on iOS.

I used preview on OSX to duplicate and resize my png file. I placed it in a folder inside my Dropbox Public folder
Now for the HTML CODE:
Here is the basic code you will need to put this after HEAD on your blog's html

then replace the image source with the public link generated by dropbox. portions of the code snipped for privacy.

Go to Blogger Template then edit HTML paste it right after head (see photo) and save

Now on Mobile Safari when you save to Home Screen you will have a nice custom icon.
BTW this also worked on my Android device using Chrome with no special tricks.

However it will not work with the mobile version of blogspot. I have that disabled anyway.

Source 1, Source 2


Comments

Popular posts from this blog

Tips & Tricks|Orientation Aware Backgrounds

I just wanted to share some stuff I learned over at xda-dev's forum today.
--
Anyway as the title states this is about today themes and Orientation Aware Backgrounds. It's really quite simple
--
All you need is 2 images [3 if you want to change the Start Menu image as well] of the proper resolution.
--
QVGA:
tdywater_320_240.gif [Landscape Image] = 320 x 240 image
tdywater_240_320.gif [Portrait Image] = 240 x 320 image
stwater [Start Menu Image] = 190 x 290 image
--
VGA:
tdywater_640_480.gif [Landscape Image] = 640 x 480 image
tdywater_480_640.gif [Portrait Image] = 480 x 640 image
stwater [Start Menu Image] = 399 x 586 image
--
What you do is copy the files to \Windows directory and viola! Orientation Aware Backgrounds!
--
Notes: The theme's default images will be used once you switch themes. So you would need to copy the files back again to \Windows dir for it to work again, what I do is I have placed Wallpaper sets in ZIP files on my Storage Card so I can change and change as desired.…

Honey glazed donut #foodspotting

Taken at Starbucks Bluewave Marquinton

Western breakfast - Frankfurter & Scrambled Egg w/ Toast

Taken at UCC Vienna Cafe