1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Multiple Favicon files and how to implement

Discussion in 'Styling and Customization Questions' started by Emil JaBo, Sep 1, 2014.

  1. Emil JaBo

    Emil JaBo Active Member


    I used an online Favicon generator and it allowed me to specify custom favicons for different operating systems and sizes. The following image shows the files that it generated:


    Below are the instructions and the code that it generated to input into my webpage.
    1. Place ‘favicons’ folder in the root of your web site. If your site is http://mysite.com, you should be able to access a file named http://mysite.com/favicon.ico.
    2. Insert the following code in the <head> section of your HTML pages:
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
    <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
    <link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <meta name="msapplication-TileColor" content="#9fc1bf">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    Would anyone mind giving me an idiot proof guide on how to get these files to work for my forum? :)
    Last edited: Sep 1, 2014
  2. Emil JaBo

    Emil JaBo Active Member

    Is this even possible? :)
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The <head></head> area in XenForo is in this template:

    Admin CP -> Appearance -> Templates -> PAGE_CONTAINER
  4. Emil JaBo

    Emil JaBo Active Member

    Thanks Jake, I pasted the code in-between the <head> </head> and uploaded the Favicon folder to my root and couldn't see any favicon in the address bar. Do the instructions supplied by the website make sense, ie should it work? In an age of retina and many different devices I wanted to have a Favicon identity that worked well resolution wise on most of the popular devices and scenarios.

    I also tried just using the Favicon.ico file in the root and still saw no change. :)
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Please post your forum URL so I can inspect the live page to see that all locations are correct.

    Also note that browsers love to cache favicon images so changes might not be immediately apparent.
  6. Emil JaBo

    Emil JaBo Active Member

    Thanks Jake, please check your PM's. :)
    Last edited: Sep 1, 2014
  7. Emil JaBo

    Emil JaBo Active Member

    Solved, thank you Jake. :)

Share This Page