divendres, 29 de març de 2013

Com crear un favicon.ico multi mides per a la nostra web

El favicon és la petita icona que apareix al navegador quan entrem a una pàgina, normalment al costat de l'adreça web, i que s'incorpora quan l'afegim als marcadors. Fa molt anys -quan els que poblàvem Internet érem una mena de comunitat altruista- n'hi havia prou amb una icona de 16x16, però amb el temps les resolucions dels monitors i les pantalles s'han anat fent més grans.

Avui en dia el favicon.ico no serveix només pels navegadors, sinó que conforma la nostra identitat visual quan algú afegeix l'enllaç a la pantalla del mòbil, de la tablet, etc. Aprofitant que el format .ico ens permet incloure vàries mides de la mateixa icona en un mateix arxiu (quina genialitat!), podem dissenyar el nostre logo a mides diferents optimitzades als diferents destins que pot tenir.

En aquest cas, es tracta de la icona de la meva web personal, www.fcerdans.net, per la que he adaptat el segell d'artista amb el que signo les obres i els Llibres Artesans. I una vegada més, contradient la dita "amb programari lliure moltes coses no les pots fer", apareix el nostre estimat GIMP i ens dóna la solució més fàcil, ràpida i intuïtiva possible.

Imatge en capes a diferents mides en el Gimp
Amb el GIMP el procediment és tan fàcil com:
- Partim de la mida més gran, en el meu cas 128x128, a poder ser en .png, que admet transparència.
- Dupliquem la capa i en canviem la mida. Els formats més necessaris són 16, 24, 32, 72, 114 i 128 píxels.
- Ajustem la icona a les necessitats de la nova mida (per optimitzar s'han de fer retocs, sobretot amb la de 16x16).
- Tornem a la capa inicial i la dupliquem altra vegada Així anem repetint el procés fins arrivar a la mida més petita, que seria la 16x16 píxels. Si es perden detalls hi ha una bona opció que és adaptar el logo; en el meu cas, per exemple, la versió 16x16 és molt simplificada.

Un cop tenim totes les capes optimitzades Només hem de guardar com .ico i ens apareix el diàleg de la captura. Podem seleccionar les mides que volem que s'incloguin a la icona i les que no.

Guardar imatge com a icona de Windows amb el Gimp
Guardant la icona; seleccionem les capes que volem afegir

Un tema molt diferent és com s'ha de dissenyar bé la icona, això donaria per un article molt més llarg; aquí em limito a donar-vos unes línies generals d'ajuda per si algun dia us trobeu en el cas.
Salut!
Publica un comentari a l'entrada