HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

oliverraduneroliverraduner Contributing to Vanilla since 2010Switzerland ✭✭
edited September 2015 in General Banter

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

  1. In your /themes/[MyTheme]/ folder create or edit a file "class.mythemenamethemehooks.php"
  2. Make sure you have all your touch-icons and favicon files below the Theme's root folder (e.g. /themes/[MyTheme]/design/)
  3. 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
            // 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:


Sign In or Register to comment.