How do I add a favicon for my wiki?

Last modified by Vincent Massol on 2024/03/07

For the Flamingo skin

  1. Log in as admin, go to the administration page, up to main menu bar: "Wiki" -> "Administer Wiki."
  2. Next, find the link "Themes" under the "Look and Feel" tab of the left-hand side navigation.
  3. On this page there is a field labelled "Skin", filled with the value XWiki.DefaultSkin (unless you have already customized it to some other value), and a button "Customize".
  4. Press the "Customize" button; you will be redirected to the XWiki.DefaultSkin page (or what the current skin page is).
  5. Click on "Attachments" and attach the following image files (you can attach several so that it works with various browsers):
    • icons.xwiki.favicon.ico - for legacy browsers. For recent browsers, it's recommended to use a PNG version, see below.
    • icons.xwiki.favicon16.png - for browsers supporting HTML5 ,a small (16x16px) version of the favicon in PNG format
    • icons.xwiki.favicon.svg - for browsers supporting favicons in SVG format. Note that if your browser supports SVG and you only provide a .png favicon then the SVG favicon used by the XWiki default skin will be used.
    • icons.xwiki.favicon144.png - for a 144x144px icon used by some mobile phones
  6. Clear your browser image cache


Not seeing your favicon

Show the page's HTML source in your browser and verify what HTML code is used. For example, imagine that you uploaded a icons.xwiki.favicon16.png image and refreshed your browser cache and it's not working. Checking the source may yield something like:

<link rel="icon" href="/xwiki/bin/skin/XWiki/DefaultSkin/icons.xwiki.favicon16.png" type="image/png" />
<link rel="icon" href="/xwiki/resources/icons/xwiki/favicon.svg?cache-version=1709016730000" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/xwiki/resources/icons/xwiki/favicon144.png?cache-version=1709016730000" />

This explains that if your browser is supporting SVG, then the second line is going to be used and not your PNG upload. You'll thus need to upload a SVG favicon to override the default favicon used.

Preventing view rights

If you prevent guest users to have view rights for the pages containing the favicons (for example by selecting "Prevent unregistered users from viewing pages, regardless of the page rights" in the Admin UI for Rights) then these favicons won't be displayed for guest users. One workaround is to replace the default favicons from the skin on the filesystem.

For the Flamingo skin, you'll find these favicons inside the XWiki WAR under the resources/icons/xwiki/ directory.

Get Connected