Add a favicon to your Moodle site

What is a favicon?

A favicon is a tiny picture that appears in the browser tab beside your site name. It also shows in bookmarks. It helps people spot your site among many open tabs. It is like a small logo badge.

Moodle is a program for running online courses. Where you add the favicon depends on your Moodle version and theme. Both ways are below.

Before you start

• Make a square picture, such as 32 by 32 pixels. A pixel is one tiny dot of a picture.
• Save it as favicon.ico, or as a PNG file if your version accepts one.
• Keep the file small and simple.

Method 1: Use the Logos setting (newer versions)

1. Log in to Moodle as an administrator.
2. Open Site administration.
3. Click Appearance.
4. Click Logos.
5. Find the setting named Favicon.
6. Drag your file into the box, or click the file icon to upload it.
7. Click Save changes.
8. Clear the Moodle cache. Go to Site administration, then Development, then Purge caches. Click Purge all caches.

Method 2: Replace the theme file (older versions)

Older Moodle versions do not have an upload box. They read the icon from the theme folder.

1. Open your hosting file manager, or connect with FTP. FTP is a way of copying files to a server.
2. Go to your Moodle folder, then open theme.
3. Open the folder of the theme you use. If you are not sure which one, see Site administration, Appearance, Themes, Theme selector.
4. Open the pix folder.
5. Rename the old favicon.ico to favicon-old.ico. This keeps a backup.
6. Upload your new favicon.ico.
7. Purge the caches as in Method 1.

Quick recap

• A favicon is the little icon in a browser tab.
• Newer Moodle: Site administration, Appearance, Logos.
• Older Moodle: replace favicon.ico in the theme's pix folder.
• Purge caches and refresh your browser.