---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.",
    "name": "Favicon Installation",
    "page_id": "ii2jsjqkhkaunk58kt7bd",
    "template": "holy"
}
---
====== Favicon Installation ======

===== 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 [[http://localhost:8080/start?ns=&tab_files=files&do=media|Media Manager]]  (([[doku>media_manager|media manager]])) to the root location (ie DOKUWIKI_HOME/data/media/)
  * Click on this link [[http://localhost:8080/start?ns=&tab_files=files&do=media]] and upload the following files
      * ''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|}}




==== Next Step ====

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

\\
\\
\\

===== Support =====

==== 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 advertise it via [[:docs:type:website#internal_search_engine|sitelinks]] to search engines.

Most of the search engine, support it this ways, if you really **really** want it, you need to put it manually  at ''%%$DOKUWIKI_HOME/lib/tpl/dokuwiki/images/favicon.ico%%''.