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

Black Cat vs Firestar vs Silver Sable?

Spider-man needs a partner or side-kick. I prefer crime fighting partner vs side-kick tho.

Marvel is rumored to be hiring Josh Brolin for Thanos as the mega-villain for their cinematic universe. This means Guardians of the Galaxy & Avengers. Both are super teams.

Fox has teased a mega-villain for the X-Men super-team to go up against in their latest movie. FYI, X-Men: Days of Future Past has a post credit scene. I think Fantastic Four is also being rebooted. Yes that is a super-team as well.

DC still playing catch-up but they are going in with the heavy hitters Bats & Boy Scout with a rumored Amazon in the mix. We all know the goal is the Justice League super-team

Meanwhile, I think Sony is in trouble. Right now they have the "Web Head" going up against multiple villains and the formula is kinda stale. Franchise fatigue not withstanding, our favorite web slinging, trash talking super-hero has the "Sinister Six" super villain group to fight but who can h…