How to configure the Favicons

Undraw Stepping Up

About

This page is an HowTo that shows you how to choose and install a favicon and your logo image with ComboStrap.

Steps

You can design your own logo but you can also be inspired by collection of logo

In our case we have chosen an icon directly from https://materialdesignicons.com/

  • Choose an icon

Material Design Choose Icon

  • Download the Svg file and rename it to logo.svg

Material Design Download Icon Svg

  • Go back in the Advanced Export and create a PNG with the biggest size

Material Design Download Icon Png Big

Generate the favicons

Upload the favicons

  • Then upload the below icon files with the media manager to the root location (ie DOKUWIKI_HOME/data/media/)
    • favicon.ico
    • favicon-32×32.png
    • favicon-16×16.png
    • apple-touch-icon.png
    • android-chrome-192×192.png (used in the manifest)
    • logo.svg

Example:

Mediamanager Favicon

To see where and how you can use your logo, see the logo page.

Create the facebook default

facebook has a dimension constraint on the image illustration. The image should be at minimum 200px by 200px.

We recommend then that:

  • you create an image with your photo editor:
  • and upload it at the root of your media manager (next to the other logos)

The facebook page will tell your more about the specific of a facebook card.

Verify

  • Refresh and delete the Browser cache by hitting the key combination
    • Ctrl + Shift + R - Chrome
    • or Ctrl + F5 - Firefox
  • Check that you see your favicon

Favicon Verification

OpenSearch Favicon

In the open search, unfortunately, the icon is the icon of the template and is hardcoded, there is nothing we can do to change it at this place. We still advertise it via sitelinks to search engines.

If you want it also at this place, you need to put it manually on the server at $DOKUWIKI_HOME/lib/tpl/dokuwiki/images/favicon.ico.

Next Step

Create a menu




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Stepping Up
How to create a top menu bar?

The theme system supports the creation of a slot page called header slot in order to create a menu bar at the top location of the page. * Create a page called :slot_header (at the root directory...
Undraw Stepping Up
How to get started with ComboStrap ?

This page helps you to get started with ComboStrap
Undraw Stepping Up
How to install Dokuwiki ?

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to install it. This page steps you through this phase of how to install Dokuwiki. If you have already a Dokuwiki Installation,...
Move Plugin Rename
Third Plugins - ComboStrap Getting Started

This page is an optional and informative step that highlights important information that you should now about third party plugins.


Recommended Pages
Favicon Verification
ComboStrap Site Metadata - Logo

A logo is an icon that illustrates your website and is part of what's called branding Your logo is used as default page image illustration: for social card such as facebook and twitter for search...
Undraw My Documents
Identity Management in ComboStrap

This page is about the identify forms and styling documentation
App Manifest Firefox
Strap - Web App Manifest

A Web App Manifest is a file that permits a user to install your application (website) in: a mobile or computer's home screen without an app store. You can see it by going to the following...
Undraw Dark Mode 2xam
Theme

A theme designs your entire website app. A theme is composed of: templates. Each template applies to one page and designs a layout. component styling You can apply: a bootstrap stylesheet or...



Task Runner