How do I add a favicon for my wiki?

Version 16.1 by Vincent Massol on 2020/01/28

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

Get Connected