Look at the second animated GIF. It shows the background of the icon. Then it shows the foreground. But the important thing is the third layer, a mask which is applied by the device manufacturer. On some devices you might get round icons, on some rounded rectangles. Who knows, someone might some day use a triangle.
The point is the only part of your icon that’s going to show is what is in the hole in the mask. If you extend your icon imagery out side of the mask it will be cut off. So it’s best to have a background that fills the max area and a foreground that’s about half the space.