I've played with this and I can't see how you obtained that Android image in your first post with the sharply delineated, though incorrect, colour boundaries. Nor do I understand how your iPad can display such sharply defined boundaries on an 8x8 jpg. However.
I'm sure that your jpg is written correctly but an 8 x 8 bitmap has only two vertical pixels for each colour. To see this anything that displays the image at a size visible to a human has to scale up the image. As jpg is a compressive algorithm it throws away the highest spacial frequencies resulting in fuzzy boundaries between colours. The smaller the image the larger the fuzzy boundaries in relation to the size of the image. Because you are always seeing a scaled image what you see is highly dependent on the scaling algorithm used.
I modified your code to produce progressively larger jpg size in multiples of 8 and sure enough, with larger images the apparent colour boundaries get sharper and sharper as expected. I'm afraid that jpg is not a suitable encoding for such small images. I does make me wonder if the iPad does some optimisation when generating or displaying small jpgs that preserves the detail.
I think you have hit a fundamental limit on Android that such small images are not suitable for jpg encoding. As it is icons you appear to need just giving the microcontroller a file with an array of colour values would give correct result as and a much smaller file
