firefox & mozilla icon packs

MXR's tutorial to making icon packs

You want to make icons for Firefox or Mozilla and you don't know where to start. This is the right place for you.

You need to know which icons are used by your browser. You can download default icon sets from our IconPack Resources page or read list of icons in the next table.

bookmark-window.ico
certManager.ico
certWindow.ico
deviceManager.ico
downloadManager.ico
extensionsManager.ico
help.ico
jsconsoleWindow.ico
loadDevice.ico
main-window.ico
metadata.ico
themesManager.ico
winInspectorMain.ico

Additional Icons
default.ico
chatzilla-window.ico

abcardWindow.ico
addressbookWindow.ico
bmPropsWindow.ico
bookmark-window.ico
chatzilla-window.ico
downloadManager.ico
editorWindow.ico
findBookmarkWindow.ico
findHistoryWindow.ico
help.ico
history-window.ico
jsconsoleWindow.ico
main-window.ico
messengerWindow.ico
msgcomposeWindow.ico
venkman-window.ico
winInspectorWindow.ico

Filetypes Icons
gif-file.ico
html-file.ico
image-file.ico
jpeg-file.ico
misc-file.ico
script-file.ico
xml-file.ico
xul-file.ico

Windows icon packs use 'ico' files and Linux icon packs have 'xpm' files. Converting is not too difficult at all and can easily be accomplished with a great icon tool such as Aha-soft IconXP, Iconomaker or The Gimp. Every new icon (with 'ico' extension) has to be converted into two 'xpm' icons with the following properties: 32x32 (16M) for *.xpm and 16x16 (16M) for *16.xpm. 32x32 and 16x16 is for size and 16M is default for colors). Just open your *.ico file, click on appropriate size that you want to convert (32x32 or 16x16) and convert it selecting "Export Image..." item from the file menu.

To use your new icons, you can install them manualy. Just place it in 'chrome\icons\default' directory within your browser's folder. If folders 'icons' and 'default' don't exist, you need to create them.

Now, when you have all icons, you need to make 'xpi' installer. It is a 'zip' archive with '.xpi' extension. Before you make your archive, get all your icons into an empty folder named "icons". You then need to create an 'install.js' in the parent folder of "icons". This javascript tells Firefox/Mozilla where to put your icons. It's a simple file that can be created with any text-editor (like Notepad). I've reproduced my 'install.js' below. The parts you should change are in red.

//<--------------------Begin MXR install.js for Mozilla-------------------->

const name            = "My Icon Pack";
const regname         = "/MXR/MozillaIconRestorer";
const version         = "1.0";

var err;
err = initInstall(name, regName, version);
logComment("initInstall: " + err);

var fProgram;
fProgram = getFolder("Program");
logComment("fProgram: " + fProgram);

err = addDirectory("", version, "icons", fProgram, "chrome/icons/default/", true);
err = performInstall();
logComment("performInstall() returned: " + err);

//<--------------------End MXR install.js for Mozilla-------------------->

Mozilla has different icons for every application form, for example 'main-window.ico' and 'messengerWindow.ico' are not the same by deffault. Firefox has a different philosophy - it has a same icon for every application form. You can design icons for every form (If that is a case, use deffault 'install.js' for Mozilla.) or you can make just one. Name it "default.ico", convert it into 'default.xpm' and 'default16.xpm' and xpi it with the 'install.js' file below. You don't need to make any folders. This iconpack is for Windows and Linux both.

//<--------------------Begin MXR install.js for Firefox-------------------->

const name            = "My Icon Pack";
const regname         = "/MXR/FirefoxIconRestorer";
const version         = "0.5";

// OS type detection
function getPlatform( )
{
    var platformStr;
    var platformNode;
    if('platform' in Install)
    {
        platformStr = new String(Install.platform);
        if (!platformStr.search(/^Macintosh/))
            platformNode = 'mac';
        else if (!platformStr.search(/^Win/))
            platformNode = 'win';
        else
            platformNode = 'unix';
    }
    else
    {
        var fOSMac  = getFolder("Mac System");
        var fOSWin  = getFolder("Win System");
        if(fOSMac != null)
            platformNode = 'mac';
        else if(fOSWin != null)
            platformNode = 'win';
        else
            platformNode = 'unix';
    }
    return platformNode;
}

platformNode = getPlatform( );
if (platformNode == 'mac') {					//mac version
  alert("MAC OS version currently not supported.");
}
else {
  initInstall(name, regname, version);
  dir = getFolder("Chrome", "icons/default");
  setPackageFolder(dir);
  if (platformNode == 'win') {					//win version
    const ico = "default.ico";
    addFile("", version, ico, dir, "", true);
    addFile("", version, ico, dir, "bookmark-window.ico", true);
    addFile("", version, ico, dir, "certManager.ico", true);
    addFile("", version, ico, dir, "certWindow.ico", true);
    addFile("", version, ico, dir, "deviceManager.ico", true);
    addFile("", version, ico, dir, "downloadManager.ico", true);
    addFile("", version, ico, dir, "extensionsManager.ico", true);
    addFile("", version, ico, dir, "help.ico", true);
    addFile("", version, ico, dir, "jsconsoleWindow.ico", true);
    addFile("", version, ico, dir, "loadDevice.ico", true);
    addFile("", version, ico, dir, "main-window.ico", true);
    addFile("", version, ico, dir, "metadata.ico", true);
    addFile("", version, ico, dir, "themesManager.ico", true);
    addFile("", version, ico, dir, "winInspectorMain.ico", true);
  }
  else {							//unix version
    const xpm = "default.xpm";
    const xpm16 = "default16.xpm";
    addFile("", version, xpm, dir, "", true);
    addFile("", version, xpm16, dir, "", true);
    addFile("", version, xpm, dir, "bookmark-window.ico", true);
    addFile("", version, xpm16, dir, "bookmark-window16.ico", true);
    addFile("", version, xpm, dir, "certManager.ico", true);
    addFile("", version, xpm16, dir, "certManager.ico16", true);
    addFile("", version, xpm, dir, "certWindow.ico", true);
    addFile("", version, xpm16, dir, "certWindow.ico16", true);
    addFile("", version, xpm, dir, "deviceManager.ico", true);
    addFile("", version, xpm16, dir, "deviceManager.ico16", true);
    addFile("", version, xpm, dir, "downloadManager.ico", true);
    addFile("", version, xpm16, dir, "downloadManager.ico16", true);
    addFile("", version, xpm, dir, "extensionsManager.ico", true);
    addFile("", version, xpm16, dir, "extensionsManager.ico16", true);
    addFile("", version, xpm, dir, "help.ico", true);
    addFile("", version, xpm16, dir, "help.ico16", true);
    addFile("", version, xpm, dir, "jsconsoleWindow.ico", true);
    addFile("", version, xpm16, dir, "jsconsoleWindow.ico16", true);
    addFile("", version, xpm, dir, "loadDevice.ico", true);
    addFile("", version, xpm16, dir, "loadDevice.ico16", true);
    addFile("", version, xpm, dir, "main-window.ico", true);
    addFile("", version, xpm16, dir, "main-window.ico16", true);
    addFile("", version, xpm, dir, "metadata.ico", true);
    addFile("", version, xpm16, dir, "metadata.ico16", true);
    addFile("", version, xpm, dir, "themesManager.ico", true);
    addFile("", version, xpm16, dir, "themesManager.ico16", true);
    addFile("", version, xpm, dir, "winInspectorMain.ico", true);
    addFile("", version, xpm16, dir, "winInspectorMain.ico16", true);
  }
  if (0 == getLastError()){
    performInstall();
  }else{
    cancelInstall();
  }
}

//<--------------------End MXR install.js for Firefox-------------------->

I was inspired to write this tutorial by Grayrest's tutorial from http://gr.ayre.st/moz/resources/tutorials/iconstutorial.shtml

Check out the old tutorial.

Best viewed with Firefox. Haven't got it yet? Well get it now!

Icon Packs | F.A.Q. | Submissions | Tutorials | Give us Your Feedback | View in other languages