Append link-element to DOM

Question

I'm trying to add touch icons for a webpage. This page is handled by a CMS (LifeRay) and since I don't have access to the templates I can't add the elements to my head element by altering the template. Thus, I thought that I could maybe create the elements in the DOM by using JavaScript.

I tried this:

var touchIcon57 = document.createElement('link');
touchIcon57.setAttribute('rel', 'apple-touch-icon');
touchIcon57.setAttribute('sizes', '57x57');
touchIcon57.setAttribute('href', 'icon57x57.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon57);

var touchIcon72 = document.createElement('link');
touchIcon72.setAttribute('rel', 'apple-touch-icon');
touchIcon72.setAttribute('sizes', '72x72');
touchIcon72.setAttribute('href', 'icon72x72.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon72);

var touchIcon114 = document.createElement('link');
touchIcon114.setAttribute('rel', 'apple-touch-icon');
touchIcon114.setAttribute('sizes', '114x114');
touchIcon114.setAttribute('href', 'icon114x114.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon114);

var touchIcon144 = document.createElement('link');
touchIcon144.setAttribute('rel', 'apple-touch-icon');
touchIcon144.setAttribute('sizes', '144x144');
touchIcon144.setAttribute('href', 'icon144x114.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon144);

var touchIcon512 = document.createElement('link');
touchIcon512.setAttribute('rel', 'apple-touch-icon');
touchIcon512.setAttribute('sizes', '512x512');
touchIcon512.setAttribute('href', 'icon512x512.png');
document.getElementsByTagName('head')[0].appendChild(touchIcon512);

This adds the elements to my DOM, but when I try to add it to my home screen in my iPhone, there is no icon.