DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:favicons

Favicons

There are a number of types of favicons - the favicon.ico which combines a number of different size images into a single file used in the browser tab and bookmarks, individual PNG images used for various purposes (e.g. apple-touch/Web Clip), and animated favicon GIF images.

Displayed at 48x48px The default favicon.ico used with DokuWiki contains 8-bit PNG images of the dimensions 16x16px, 32x32px, and 48x48px.

Firefox example DokuWiki uses the favicon.ico from $DokuWiki/lib/tpl/images to generate the image used for Opensearch if a viewer wishes to add a custom search engine for a DokuWiki site.

Custom favicons

Favicons for the browser tab

If you wish to replace the default DokuWiki favicon.ico with your own you can place it in any of these places:-

  1. the web root (often /var/www)
  2. the root of the DokuWiki directory
  3. in $DokuWiki/data/media
  4. in $DokuWiki/lib/tpl/dokuwiki/images 1)

By default DokuWiki has a favicon.ico file in $DokuWiki/lib/tpl/dokuwiki/images

The following rules apply:-

  • a favicon.ico in the web root will only be used if there are no favicon.ico files in the $DokuWiki directory.
  • a favicon.ico in $DokuWiki/data/media will be used regardless of whether other favicon.ico files are beneath the web root directory.
  • a favicon.ico in $DokuWiki/lib/tpl/dokuwiki/images will only be used if there is no favicon.ico in $DokuWiki/data/media 2).

Here you can find a tutorial how to generate a multi-resolution favicon with GIMP: catalyst.net FIXME

Animated Favicons for the browser tab

If you'd like to display an animated gif Not for everyone instead of a static icon in the browser tab and you are using the default dokuwiki template (theme)3):-

  1. Edit doku.php and change
    ($conf['send404'] || preg_match('/^(robots\.txt|sitemap\.xml(\.gz)?|favicon\.ico|crossdomain\.xml)$/', $ID)) &&

    to

    ($conf['send404'] || preg_match('/^(robots\.txt|sitemap\.xml(\.gz)?|animated_favicon\.gif|favicon\.ico|crossdomain\.xml)$/', $ID)) &&
  2. Edit inc/template.php and change
    * Returns <link> tag for various icon types (favicon|mobile|generic)

    to

    * Returns <link> tag for various icon types (favicon|mobile|generic|animated)

    , and change

    * @param  array $types - list of icon types to display (favicon|mobile|generic)

    to

    * @param  array $types - list of icon types to display (favicon|mobile|generic|animated)

    , and finally, change

                case 'generic':
                    // ideal world solution, which doesn't work in any browser yet
                    $look = array(':wiki:favicon.svg', ':favicon.svg', 'images/favicon.svg');
                    $return .= '<link rel="icon" href="'.tpl_getMediaFile($look).'" type="image/svg+xml" /$
                    break;

    to

                case 'generic':
                    // ideal world solution, which doesn't work in any browser yet
                    $look = array(':wiki:favicon.svg', ':favicon.svg', 'images/favicon.svg');
                    $return .= '<link rel="icon" href="'.tpl_getMediaFile($look).'" type="image/svg+xml" /$
                    break;
                case 'animated':
                    $look = array(':wiki:animated_favicon.gif', ':animated_favicon.gif', 'images/animated_$
                    $return .= '<link rel="icon" type="image/gif" href="'.tpl_getMediaFile($look).'" />'.N$
                    break;
  3. Edit lib/tpl/dokuwiki/main.php and change
    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>

    to

    <?php echo tpl_favicon(array('favicon', 'mobile', 'animated')) ?>
  4. Edit lib/tpl/dokuwiki/mediamanager.php and change
    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
    <?php echo tpl_favicon(array('favicon', 'mobile', 'animated')) ?>
  5. (Optional) Edit lib/tpl/dokuwiki/lang/en/style.txt and change
    will be automatically used. You can also upload a ''favicon.ico'' there. If you use a closed
    wiki it is recommended to make the ''wiki'' (or root) namespace world readable in the ACL settings or your logo is not shown to not logged in users.

    to

    will be automatically used. You can also upload a ''favicon.ico'' or an ''animated_favicon.gif'' there.
    If you use a closed wiki it is recommended to make the ''wiki'' (or root) namespace world readable
     in the ACL settings or your logo is not shown to not logged in users.
  6. Place your animated_favicon.gif in any of locations DokuWiki looks for favicons.ico files and refresh your browser.

A work in progress — SFITCS 2017-03-17 01:00

If you'd like to help test how DokuWiki favicons are used for various things in different browsers you can download this zip archive containing favicon.ico files with Red, Yellow, and Green backgrounds. Each favicon.ico has a 16×16, a 24×24, a 32×32, a 64×64, and a 128×128 pixel PNG images in it. All are 24-bit, and display a number corresponding to their dimensions so you can see which size is used by various browser themes.

1)
NOTES: only tested with the default DokuWiki theme/template; this location may be overwritten on upgrades
2)
NOTE: the same rules may not apply to the favicon.ico used to generate the image used for Opensearch
3)
NOTE: a similar process will probably work with other themes - I haven't tested
tips/favicons.txt · Last modified: 2024-02-22 16:42 by 77.174.103.188

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki