1

MacOSX and Windows use icon container files to show the best resolution. Windows uses ICO and holds a various sized images (see: Which icon sizes should my Windows application's icon include?) and Mac does same.

To me it looks like Linux icons (like Ubuntu) are using PNG. Don't they have a container file? They have to I'm sure of it I'm thinkg xpm but I'm not sure, what is it and what are the sizes that should go into this container file.

  • Any documentation on this file type, I'm going to try to use javascript and canvas to take a drawing of an icon. Resize it to make multiple drawings for to the dimensions needed for this container file. Then save it to file. Like I was able to do this for Windows .ico tells us how to encode to ico: http://msdn.microsoft.com/en-us/library/ms997538.aspx and I can easily replicate this in javascript like so:

    // Our own little ico encoder
    // http://msdn.microsoft.com/en-us/library/ms997538.aspx
    // Note: We would have been able to skip ICONDIR/ICONDIRENTRY,
    // if we were to use CreateIconFromResourceEx only instead of also
    // writing the icon to a file.
    let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    let XOR = data.length;
    let AND = canvas.width * canvas.height / 8;
    let size = 22 /* ICONDIR + ICONDIRENTRY */ + 40 /* BITMAPHEADER */ + XOR + AND;
    let buffer = new ArrayBuffer(size);
    
    // ICONDIR
    let view = new DataView(buffer);
    view.setUint16(2, 1, true); // type 1
    view.setUint16(4, 1, true); // count;
    
    // ICONDIRENTRY
    view = new DataView(buffer, 6);
    view.setUint8(0, canvas.width % 256);
    view.setUint8(1, canvas.height % 256);
    view.setUint16(4, 1, true); // Planes
    view.setUint16(6, 32, true); // BPP
    view.setUint32(8, 40 + XOR + AND, true); // data size
    view.setUint32(12, 22, true); // data start
    
    // BITMAPHEADER
    view = new DataView(buffer, 22);
    view.setUint32(0, 40, true); // BITMAPHEADER size
    view.setInt32(4, canvas.width, true);
    view.setInt32(8, canvas.height * 2, true);
    view.setUint16(12, 1, true); // Planes
    view.setUint16(14, 32, true); // BPP
    view.setUint32(20, XOR + AND, true); // size of data
    
    // Reorder RGBA -> BGRA
    for (let i = 0; i < XOR; i += 4) {
       let temp = data[i];
       data[i] = data[i + 2];
       data[i + 2] = temp;
    }
    let ico = new Uint8Array(buffer, 22 + 40);
    let stride = canvas.width * 4;
    // Write bottom to top
    for (let i = 0; i < canvas.height; ++i) {
       let su = data.subarray(XOR - i * stride, XOR - i * stride + stride);
       ico.set(su, i * stride);
    }
    
Community
  • 1
  • 1
Noitidart
  • 35,443
  • 37
  • 154
  • 323

2 Answers2

1

on linux it depends (a little) on the desktop you are using. the .desktop files for Qt for example are explained in detail here http://doc.qt.digia.com/qtextended4.4/desktopfiles.html

for gnome you might want to read here: https://developer.gnome.org/icon-theme-spec/

spec from open desktop is here: http://standards.freedesktop.org/desktop-entry-spec/latest/

edit on xpm: It's really simple, you define your colors and then you have a 2d-array specifiyng all pixels, it's like an ascii art ;D

maybe you could use imagemagix directly (e.g. as call to a server), if you can't here is the file format description on wikipedia. Luckily im is open source so you can have a look at their png to xpm conversion. Another tool that comes with source code and simple examples is here: http://www.uplawski.eu/technology/utilities/#xpmwriter

/* XPM */
static char *dummy[]={
"24 24 2 1",
"M c #3a27bf",
"_ c #FFFFFF",
"__M_____M_____A_________",
"__MM___MM____A_A________",
"__M_M_M_M___A___A_______",
"__M__M__M__AAAAAAA______",
"__M_____M_A______ A_____",
"________________________",
"__RRR____EEEEE__________",
"__R__R___E______________",
"__RRR____EEE____________",
"__RR_____E______________",
"__R_R____EEEEE__________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________",
"________________________"}

gives you an 24x24 exciting icon

mare's icon

wgitscht
  • 2,676
  • 2
  • 21
  • 25
  • Thanks mare, but this doesn't give me details on how to encode to xpm :( – Noitidart Dec 21 '14 at 04:50
  • that seems to be just one dimension image. i thought xpm was a container file with multiple images, like 16x16, 24x24, 32x32, 48x48? also it doesnt look like it supports transparencies, but the icons im seeing used have transparency. im confused a little can you please help understand :) – Noitidart Dec 21 '14 at 08:06
  • 1
    think of it as BMP for linux. it's just another file format, and it supports trasnparency. the container you where talking about is done with the .desktop file. – wgitscht Dec 21 '14 at 11:24
  • Thanks mare it turned out your links are very important so i accepted your solution. XPM doesnt support alpha though huh? Lke Png can have 50% transparent blue pixles? XPM can either have totall transparent or not huh? – Noitidart Jan 08 '15 at 20:40
  • Quick question @mare where can i find an iso for the Qt linux you meneionted, i was hoping to inistall that in my virtual box and test out my code. I got a bunch of gnome, i have ubuntu and linux and both use gnome. Can you please recommend other desktop linuxes which dont use gnome. – Noitidart Jan 08 '15 at 22:26
1

Icons can be anything from PNG, XPM, to SVG. XPM appears to be preferred for now as they are C-programmed pixmaps designed for X, but PNG and SVG are more portable. Why not offer options?

Makaze
  • 1,076
  • 7
  • 13
  • Well its not going to be used publically. User selects a mini-badge and then i create a new image out of the icon with a mini badge at bottom right now. Now I have to save this back to xpm. Is there any details on how to make that pixmap for XPM please? That would be awesome :) – Noitidart Dec 20 '14 at 21:18
  • If the icon is only for use online, you can just use a normal ICO file or PNG. They will render fine on all modern browsers. XPM is used for hard coding in programs and setting an icon theme on the Linux desktop itself. They are images written in C programming language. http://en.wikipedia.org/wiki/X_PixMap – Makaze Dec 20 '14 at 21:24
  • Thanks but its not online, its a firefox addon :) – Noitidart Dec 21 '14 at 04:49