javascript - link 要素を DOM に追加する

Question

Web ページにタッチ アイコンを追加しようとしています。このページは CMS (LifeRay) によって処理されます。テンプレートにアクセスできないため、テンプレートを変更して head 要素に要素を追加することはできません。そこで、JavaScript を使えば DOM の要素を作成できるのではないかと考えました。

私はこれを試しました：

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);

これにより要素が DOM に追加されますが、iPhone のホーム画面に要素を追加しようとすると、アイコンが表示されません。