ComboStrap Getting Started - How to configure the Favicons
Table of Contents
1 - About
This page is an HowTo that shows you how to choose and install a favicon with ComboStrap.
2 - Steps
2.1 - Choose a icon
You can design a icon image but you can also choose one from a free icon repository
Example with: https://materialdesignicons.com/
- Choose an icon
- Download the Svg file and rename it to logo.svg
- Go back in the Advanced Export and create a PNG with the biggest size
2.2 - Generate the favicons
- Go to the realfavicongenerator generator
- Upload your PNG image
- Answer the forms, follows the steps and download the package icon
2.3 - 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)
Example:
2.4 - Upload the logo.svg file
svg files are by default not permitted by Dokuwiki because they can include script, you therefore need to upload it directly to the computer to data/media from the dokuwiki installation directory.
You can then use your logo in the brand component of the top navigation bar with the icon component
Example:
<brand class="pt-0" title="ComboStrap Home" style="color:#075EBB">
<icon name="logo.svg" />
ComboStrap Beta
</brand>
- Result:
A lot of Dokuwiki components use the logo.svg file by default such as:
- The default template for the favicon
- The default manifest for the manifest
2.5 - 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
2.6 - Next Step