This is how you can add different apple-touch-icons and favicons using a Theme hook

oliverraduner · September 2015

This is how you can add various custom apple-touch-icons and favicon to your theme:

In your /themes/[MyTheme]/ folder create or edit a file "class.mythemenamethemehooks.php"
Make sure you have all your touch-icons and favicon files below the Theme's root folder (e.g. /themes/[MyTheme]/design/)

The content of this Theme-Hooks PHP-file can be something like this:

<?php if (!defined('APPLICATION')) exit();

class MythemenameThemeHooks implements Gdn_IPlugin {

   /**
     * No setup required
     */
   public function Setup() {
   }

   /**
     * No disable actions required
     */
   public function OnDisable() {
   }

   /**
    * Add icons to page <head></head>
    */
   public function base_render_before($Sender) {
      if (is_object($Sender->Head)) {
        // Changing the Status Bar Appearance
        $Sender->Head->addTag('meta', array('name' => 'apple-mobile-web-app-status-bar-style', 'content' => 'black'));

        // Set Theme Favicon
        $Sender->Head->setFavIcon('/themes/MyTheme/design/favicon.png');

        // Add Theme apple-touch-icons
        $Sender->Head->addTag('link', array('rel' => 'apple-touch-icon-precomposed', 'content' => '/themes/MyTheme/design/apple-touch-icon-precomposed.png'));
        $Sender->Head->addTag('link', array('rel' => 'apple-touch-icon', 'content' => '/themes/MyTheme/design/apple-touch-icon-iphone.png'));
        $Sender->Head->addTag('link', array('rel' => 'apple-touch-icon', 'sizes' => '76x76', 'content' => '/themes/MyTheme/design/apple-touch-icon-ipad.png'));
        $Sender->Head->addTag('link', array('rel' => 'apple-touch-icon', 'sizes' => '120x120', 'content' => '/themes/MyTheme/design/apple-touch-icon-iphone-retina.png'));
        $Sender->Head->addTag('link', array('rel' => 'apple-touch-icon', 'sizes' => '152x152', 'content' => '/themes/MyTheme/design/apple-touch-icon-ipad-retina.png'));

        // ...and for Android & Nokia Devices
        $Sender->Head->addTag('link', array('rel' => 'icon', 'sizes' => '192x192', 'content' => '/themes/MyTheme/design/apple-touch-icon-ipad-retina.png'));
      }
   }

}

For further reads on apple-touch-icons and favicons for other devices, read these sources:

oliverraduner · September 2015

Code Gist for above code sample enhanced:

https://gist.github.com/oliveratgithub/8d6542a61845a79bd917 <-- use this one instead of the previously posted code!

This is how you can add different apple-touch-icons and favicons using a Theme hook

Comments