code/SEO_Icons_SiteConfig_DataExtension.php
public function updateCMSFields(FieldList $fields)
    {

        //// Favicons Tab

        $tab = 'Root.Metadata.Favicons';

        //// Favicon

        $fields->addFieldsToTab($tab, array(
            LabelField::create('FaviconDescription', 'Favicons are `favourite icons` used by browsers in a number of ways whenever an icon is necessary e.g. tabs, history, bookmarks, dashboards.<br />@ <a href="https://en.wikipedia.org/wiki/Favicon" target="_blank">Favicon - Wikipedia, the free encyclopedia</a>')
                ->addExtraClass('information')
        ));

        //// HTML4 Favicon

        // check favicon.ico & set status
        $icoStatus = ReadonlyField::create('HTML4FaviconStatus', 'Favicon ICO<pre>type: ico</pre><pre>size: (multiple)<br />16x16 & 32x32 & 64x64 px</pre>', 'favicon.ico error');
        if (Director::fileExists('favicon.ico')) {
            $icoStatus
                ->setValue('favicon.ico found')
                ->addExtraClass('success favicon');
        } else {
            $icoStatus
                ->setValue('favicon.ico not found')
                ->addExtraClass('error');
        }

        // header & fields
        $fields->addFieldsToTab($tab, array(
            HeaderField::create('HTML4FaviconHeader', 'HTML4 <span class="aka">( favicon.ico )</span>'),
            LabelField::create('HTML4FaviconDescription', 'It is recommended you simply have a `favicon.ico` file in the webroot.')
                ->addExtraClass('information'),
            $icoStatus
        ));

        //// HTML5 Favicon

        // header & fields
        $fields->addFieldsToTab($tab, array(
            HeaderField::create('HTML5FaviconHeader', 'HTML5 <span class="aka">( favicon.png )</span>'),
            LabelField::create('HTML5FaviconDescription', '@todo Description')
                ->addExtraClass('information'),
            UploadField::create('HTML5Favicon', 'Favicon PNG<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload)
        ));

        //// Pinned Icons Tab

        $tab = 'Root.Metadata.PinnedIcons';

        //// Pinned Icons Information

        $fields->addFieldsToTab($tab, array(
            LabelField::create('PiniconDescription', 'Pinned icons are OS-specific desktop shortcuts to pages on your website, they allow you to configure additional theming options to make pages appear more `native` / `web-app-y` within the OS.<br />Given they are OS-specific, they (obviously!) have a different format for each one :(')
                ->addExtraClass('information')
        ));

        //// Pinned Icon Title

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('PiniconTitleHeader', 'Pinned Icon Title <span class="aka">( a.k.a. App Name )</span>'),
            // description
            LabelField::create('PiniconTitleDescription', 'When adding a link to the home screen, the user can choose a caption. By default, this is the bookmarked page title, which is usually fine. However, iOS and Windows 8 let you override this default value.')
                ->addExtraClass('information'),
            TextField::create('PiniconTitle', 'Application Title')
                ->setAttribute('placeholder', 'default: page title')
        ));

        //// iOS Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('IOSPiniconHeader', 'iOS Pinned Icon <span class="aka">( a.k.a. Touch Icons, Web Clips )</span>'),
            // information
            LabelField::create('IOSPiniconDescription', 'iPhone and iPad users can pin your web site on their home screen. The link looks like a native app.<br />@ <a href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" target="_blank">Configuring Web Applications - iOS Developer Library</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('IOSPinicon', 'iOS Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload)
                ->setDescription('iOS will fill the transparent regions with black by default, so put your own background in!')
        ));

        //// Android Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('AndroidPiniconHeader', 'Android Pinned Icon <span class="aka">( a.k.a. Android Chrome Icons, Launcher Icons )</span>'),
            // information
            LabelField::create('AndroidPiniconDescription', 'Add to Homescreen is a also a feature of Android Chrome. Your visitors can mix their natives apps and web bookmarks.<br />@ <a href="https://developer.chrome.com/multidevice/android/installtohomescreen" target="_blank">Add to Homescreen - Google Chrome</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('AndroidPinicon', 'Android Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload),
            // background
            TextField::create('AndroidPiniconThemeColor', 'Theme Color<pre>type: hex triplet</pre>')
                ->setAttribute('placeholder', 'none')
                ->setAttribute('size', 6)
                ->setMaxLength(6)
                ->setDescription('Starting with Android Lollipop, you can customize the color of the task bar in the switcher.')
        ));

        //// Windows Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('WindowsShortcutHeader', 'Windows Pinned Icon <span class="aka">( a.k.a. Windows 8 / Metro Tiles )</span>'),
            // information
            LabelField::create('WindowsShortcutDescription', 'Windows 8 users can pin your web site on their desktop. Your site appears as a tile, just like a native Windows 8 app.<br />@ <a href="https://msdn.microsoft.com/en-us/library/dn455106" target="_blank">Creating custom tiles for IE11 websites (Windows)</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('WindowsPinicon', 'Windows Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload),
            // background
            TextField::create('WindowsPiniconBackgroundColor', 'Background ( Tile ) Color<pre>type: hex triplet</pre>')
                ->setAttribute('placeholder', 'none')
                ->setAttribute('size', 6)
                ->setMaxLength(6)
        ));

        // @todo Safari Pinned Tab ~ maybe ??

    }
public function updateCMSFields(FieldList $fields)
    {

        //// Favicons Tab

        $tab = 'Root.Metadata.Favicons';

        //// Favicon

        $fields->addFieldsToTab($tab, array(
            LabelField::create('FaviconDescription', 'Favicons are `favourite icons` used by browsers in a number of ways whenever an icon is necessary e.g. tabs, history, bookmarks, dashboards.<br />@ <a href="https://en.wikipedia.org/wiki/Favicon" target="_blank">Favicon - Wikipedia, the free encyclopedia</a>')
                ->addExtraClass('information')
        ));

        //// HTML4 Favicon

        // check favicon.ico & set status
        $icoStatus = ReadonlyField::create('HTML4FaviconStatus', 'Favicon ICO<pre>type: ico</pre><pre>size: (multiple)<br />16x16 & 32x32 & 64x64 px</pre>', 'favicon.ico error');
        if (Director::fileExists('favicon.ico')) {
            $icoStatus
                ->setValue('favicon.ico found')
                ->addExtraClass('success favicon');
        } else {
            $icoStatus
                ->setValue('favicon.ico not found')
                ->addExtraClass('error');
        }

        // header & fields
        $fields->addFieldsToTab($tab, array(
            HeaderField::create('HTML4FaviconHeader', 'HTML4 <span class="aka">( favicon.ico )</span>'),
            LabelField::create('HTML4FaviconDescription', 'It is recommended you simply have a `favicon.ico` file in the webroot.')
                ->addExtraClass('information'),
            $icoStatus
        ));

        //// HTML5 Favicon

        // header & fields
        $fields->addFieldsToTab($tab, array(
            HeaderField::create('HTML5FaviconHeader', 'HTML5 <span class="aka">( favicon.png )</span>'),
            LabelField::create('HTML5FaviconDescription', '@todo Description')
                ->addExtraClass('information'),
            UploadField::create('HTML5Favicon', 'Favicon PNG<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload)
        ));

        //// Pinned Icons Tab

        $tab = 'Root.Metadata.PinnedIcons';

        //// Pinned Icons Information

        $fields->addFieldsToTab($tab, array(
            LabelField::create('PiniconDescription', 'Pinned icons are OS-specific desktop shortcuts to pages on your website, they allow you to configure additional theming options to make pages appear more `native` / `web-app-y` within the OS.<br />Given they are OS-specific, they (obviously!) have a different format for each one :(')
                ->addExtraClass('information')
        ));

        //// Pinned Icon Title

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('PiniconTitleHeader', 'Pinned Icon Title <span class="aka">( a.k.a. App Name )</span>'),
            // description
            LabelField::create('PiniconTitleDescription', 'When adding a link to the home screen, the user can choose a caption. By default, this is the bookmarked page title, which is usually fine. However, iOS and Windows 8 let you override this default value.')
                ->addExtraClass('information'),
            TextField::create('PiniconTitle', 'Application Title')
                ->setAttribute('placeholder', 'default: page title')
        ));

        //// iOS Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('IOSPiniconHeader', 'iOS Pinned Icon <span class="aka">( a.k.a. Touch Icons, Web Clips )</span>'),
            // information
            LabelField::create('IOSPiniconDescription', 'iPhone and iPad users can pin your web site on their home screen. The link looks like a native app.<br />@ <a href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" target="_blank">Configuring Web Applications - iOS Developer Library</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('IOSPinicon', 'iOS Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload)
                ->setDescription('iOS will fill the transparent regions with black by default, so put your own background in!')
        ));

        //// Android Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('AndroidPiniconHeader', 'Android Pinned Icon <span class="aka">( a.k.a. Android Chrome Icons, Launcher Icons )</span>'),
            // information
            LabelField::create('AndroidPiniconDescription', 'Add to Homescreen is a also a feature of Android Chrome. Your visitors can mix their natives apps and web bookmarks.<br />@ <a href="https://developer.chrome.com/multidevice/android/installtohomescreen" target="_blank">Add to Homescreen - Google Chrome</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('AndroidPinicon', 'Android Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload),
            // background
            TextField::create('AndroidPiniconThemeColor', 'Theme Color<pre>type: hex triplet</pre>')
                ->setAttribute('placeholder', 'none')
                ->setAttribute('size', 6)
                ->setMaxLength(6)
                ->setDescription('Starting with Android Lollipop, you can customize the color of the task bar in the switcher.')
        ));

        //// Windows Pinned Icon

        // CMS fields
        $fields->addFieldsToTab($tab, array(
            // header
            HeaderField::create('WindowsShortcutHeader', 'Windows Pinned Icon <span class="aka">( a.k.a. Windows 8 / Metro Tiles )</span>'),
            // information
            LabelField::create('WindowsShortcutDescription', 'Windows 8 users can pin your web site on their desktop. Your site appears as a tile, just like a native Windows 8 app.<br />@ <a href="https://msdn.microsoft.com/en-us/library/dn455106" target="_blank">Creating custom tiles for IE11 websites (Windows)</a>')
                ->addExtraClass('information'),
            // icon
            UploadField::create('WindowsPinicon', 'Windows Icon<pre>type: png</pre><pre>size: 192x192 px</pre>')
                ->setAllowedExtensions(array('png'))
                ->setFolderName(self::$SEOIconsUpload),
            // background
            TextField::create('WindowsPiniconBackgroundColor', 'Background ( Tile ) Color<pre>type: hex triplet</pre>')
                ->setAttribute('placeholder', 'none')
                ->setAttribute('size', 6)
                ->setMaxLength(6)
        ));

        // @todo Safari Pinned Tab ~ maybe ??

    }
Adds tabs & fields to the CMS.

@param FieldList $fields