---json
{
    "aliases": [
        { "path": ":docs:getting_started:5_favicon" }
    ],
    "canonical": ":favicon",
    "description": "This page is an HowTo that shows you how to choose and install a favicon and your logo image with ComboStrap.\n\n\n\n\n\n\n\n\n\nYou can design your own logo but you can also be inspired by collection of logo\n\nIn our case we have chosen an icon directly from <https:\/\/materialdesignicons.com\/>\n\n\t*  Choose an icon\n\n\n\n\t*  Download the Svg file and rename it to logo.svgrealfavicongenerator generatormedia managerfavicon.icofavicon-.pngfavicon-.pngapple-touch-icon.pngandroid-chrome-.pnmanifestlogo.svlogo pagfac\u2026",
    "name": "Favicon Installation",
    "page_id": "ii2jsjqkhkaunk58kt7bd",
    "template": "holy"
}
---

===== About =====
This page is an ''HowTo'' that shows you how to choose and install a favicon and your logo image with [[:start|ComboStrap]].


===== Steps =====
==== Choosing a icon logo ====
You can design your own logo but you can also be inspired by [[docs:app:logo#collection|collection of logo]]


In our case we have chosen an icon directly from https://materialdesignicons.com/
  * Choose an icon
{{:material_design_choose_icon.png|}}
  * Download the Svg file and rename it to ''logo.svg''
{{:material_design_download_icon_svg.png?500|}}
  * Go back in the Advanced Export and create a PNG with the biggest size
{{:material_design_download_icon_png_big.png?500|}}

==== Generate the favicons ====

  * Go to the [[https://realfavicongenerator.net/|realfavicongenerator generator]]
  * Upload your PNG image
  * Answer the forms, follows the steps and download the package icon


==== Upload the favicons ====

  * Then upload the below icon files with the [[doku>media_manager|media manager]] to the root location (ie DOKUWIKI_HOME/data/media/)
      * ''favicon.ico''
      * ''favicon-32x32.png''
      * ''favicon-16x16.png''
      * ''apple-touch-icon.png''
      * ''android-chrome-192x192.png'' (used in the [[docs:app:manifest|manifest]])
      * ''logo.svg''

Example:

{{::mediamanager_favicon.png|}}


To see where and how you can use your logo, see the [[docs:app:logo|logo page]].

==== Create the facebook default ====

[[docs:social:facebook|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:
     * with the dimension of a [[docs:social:facebook|facebook card]] ''524×274''
     * where you copy your logo
     * and named ''logo-facebook.png'' (the [[docs:social:facebook#configuration|default value]])

  * and upload it at the root of your media manager (next to the other logos)


The [[docs:social:facebook|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

{{strap:favicon_verification.png|}}


==== OpenSearch Favicon ====

In the [[docs:app:search|open search]], unfortunately, the icon is the icon of the template and is [[https://github.com/dokuwiki/dokuwiki/blob/master/lib/exe/opensearch.php#L17|hardcoded]], there is nothing we can do to change it at this place.
We still advertise it via [[:docs:type:website#internal_search_engine|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 ====

<btn color="white">
[[7_menu|Create a menu]]
</btn>