How do I add a favicon for my wiki?

Version 17.1 by Vincent Massol on 2022/03/15

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 in the XWiki.DefaultSkin (unless you have already customized it), 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/IE browsers until IE10. For recent browsers, it's recommended to use a PNG version, see below.
    • icons.xwiki.favicon16.png - for recent browsers supporting HTML5 ,a small (16x16px) version of the favicon in PNG format
    • icons.xwiki.favicon.svg - for browsers supporting favicons in SVG format
    • icons.xwiki.favicon144.png - for a 144x144px icon used by some mobile phones
  6. Clear your browser image cache

Define a specific favicon for a subwiki in Flamingo skin

  1. Log in with an administrator account
  2. Upload the PNG and/or SVG file(s) in your desired location, for example the XWiki page of the subwiki
  3. Go to the administration page, from the Drawer pick "Administer Wiki"
  4. Go to the section "Look & Feel" -> "Presentation" -> "Header" -> "HTTP META INFO" field
  5. Add these lines with the proper location of your files:
    <link rel="icon" href="path/favicon.png" type="image/png" />
    <link rel="icon" href="path/favicon.svg" sizes="any" type="image/svg+xml" /> 

For older Skins (colibri, toucan, etc ..)

  1. First, you'll need administrator privileges.
  2. Once logged in as an admin, go to the administration page, up to main menu bar: "Wiki" -> "Administer Wiki."
  3. Next find the link "Page Elements" under the "Look and Feel" tab of the left-hand side navigation.
  4. There you will find a field labelled, "HTTP Meta Info"
  5. Add the following lines in the HTTP Meta Information:
    <link rel="icon" href="$xwiki.getSkinFile("favicon.ico")" type="image/x-icon"/>
    <link rel="shortcut icon" href="$xwiki.getSkinFile("favicon.ico")" type="image/x-icon"/>
  6. Then, visit the XWiki.DefaultSkin page and attach a favicon.ico file.
  7. Finally, the most important, refresh your browser cache. Depending on your operating system all you need to do is the following key combination:
    • Windows: ctrl + F5
    • Mac/Apple: Apple + R or command + R
    • Linux: F5


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.

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

Get Connected