MXR's tutorial to making icon packs
For creating icons, try The Gimp. |
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.
| Firefox Icons | Mozilla Icons |
|---|---|
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.
