How to change your Moodle’s Favicon

12875

What’s a Favicon?  A Favicon is the little image that shows on most browser tabs or in the address bar next to the URL of the site that you’re visiting; this is based on a file usually named “favicon.ico”.

Post Pages - Post Inline - WIRIS
The m with a mortar board is the standard Moodle favicon.

For Moodle sites it looks something like this:.  This little icon is one of the first impressions someone gets from your site and is included as a standard for all Moodles.  That being said, you can easily change it to better reflect your site, school, organization or personal tastes by editing one file the applied theme folder.

Here’s how to change your Favicon.

First, either locate a new Favicon that you like or create your own.  I found a few cool ones in the Moodle forums of yore which include some cool color variations on the standard little icon: (click the link to download a zip containing those “flavicons” which were created by Timothy Takemoto.

If you have something else in mind, try creating your own based on an image or freehand at a site like http://www.favicon.cc/.  Beware though, creating 16 x 16 pixel images that look good is harder than you might think.

Once you have your image it’s time to navigate to your theme folder via FTP or web FTP (or have your network administrator do it) and replace the favicon.ico file with your own.  Here’s what the file structure looked like for changing the favicon.ico file in my “Pretty Simple¹” theme folder.

Where “joedle” is the name of my Moodle’s folder.  Replace that file, clear your cache and voila.  You and your users should see a new Favicon displayed when you next visit the site.

For more information check out the original Favicon discussion at Moodle.org: http://moodle.org/mod/forum/discuss.php?d=3487

¹Pretty Simple developed by Dan Humpherson [link]

7 COMMENTS

  1. or you can get a Favicon made, apparently, for as little as $10 bucks if you don’t want to try yourself. Note that this is not an endorsement of faviconservice.com. I’ve never used them (and hadn’t heard of them until this comment).

  2. It’s actually super easy if you manage your website.

    1. create or find art that will represent your favicon
    2. download infranview for free
    3. import art into infranview
    4. change pixels on image to 16X16 (if not done aleady)
    5. decrease color depth to 16 colors
    6. Save file as “favicon.ico” to your root folder or desired work station folder.
    7. Open your header.html and/or type this into your header tags

    8. put files to server
    9. Saved $10

    For more thorough instruction:
    http://www.clickfire.com/favicon-tutorial/

  3. FTP should work still on Moodle 2.x (the file structure is different for the courses though, compared to 1.9). You just need to make sure that your FTP connection is to the top level where you can upload to the right folder. Or if you’re using a shared hosting/virtual hosting there is usually a web-based file structure access which is what is detailed in the post.

    If you’re using Moonami, I would check with their support to see if it’s possible.

  4. Is there a Moodle extension which would allow me to access the root directory on the server from the Administrator’s menu – instead of having to FTP into that site?

  5. I just installed Moodle 2.9 and I am using the More theme. Is there a way to upload the favicon.ico file without FTP-ing into the site? Like through the admin dashboard?

    If so can you give me the steps to do so?

    I already have the favicon created.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.