Generador d’icones de web

Què és una icona de web i on apareix

La icona de web és el petit quadrat que identifica un lloc web. El nom original ve d’«icona de preferits»: el primer navegador que la va mostrar la posava al costat de les adreces desades als preferits.

La veus a les pestanyes, al costat del títol, amb 16 píxels d’amplada o 32 en pantalles d’alta resolució. També identifica el web als preferits i a l’historial. En desar el lloc a la pantalla d’inici d’un telèfon, es converteix en icona d’aplicació. Google també la mostra al costat del nom del web als resultats.

A tot arreu té la mateixa feina: fer-se reconèixer d’un cop d’ull entre altres icones.

Per què cal tot un conjunt de fitxers

Cadascun d’aquests usos va aparèixer en un moment diferent i demana el seu format. L’eina de més amunt els crea tots a partir d’una imatge.

Les pestanyes, els preferits i l’historial fan servir favicon.ico: un fitxer amb versions de 16, 32 i 48 píxels. És el format més antic. Si una pàgina no indica cap icona, els navegadors encara busquen favicon.ico a l’arrel del web.

Si parteixes d’un SVG, també reps favicon.svg. Els navegadors que admeten icones SVG el poden fer servir. Com que està fet de formes i no de píxels, manté la nitidesa a qualsevol pantalla.

L’iPhone i l’iPad fan servir apple-touch-icon.png quan es desa el web a la pantalla d’inici. Fa 180 píxels d’amplada i d’alçada. Com que l’iPhone pinta de negre la transparència, sempre hi posem un fons sòlid: el teu color, o blanc si tries transparent.

L’Android i els webs instal·lats com a aplicació fan servir icon-192.png i icon-512.png. Els troben a través de site.webmanifest, un petit fitxer de text que indica el nom del web, si l’has escrit, i on són les icones grans.

Els PNG independents de 16 a 48 píxels serveixen per als serveis que demanen PNG. Per als resultats de cerca, Google llegeix els enllaços d’icona de l’HTML de la pàgina d’inici.

Com afegir les icones al teu web

Si tu o qui desenvolupa el web podeu editar-ne els fitxers, són dos passos.

Primer, descomprimeix la descàrrega i posa els fitxers a la carpeta arrel del web, on hi ha la pàgina d’inici. Comprova-ho afegint /favicon.ico a l’adreça: s’hauria d’obrir la icona.

Després, enganxa les línies HTML del README (també les mostra l’eina) a la capçalera del codi de les pàgines, on es defineix el títol. Hi ha una línia per a l’ICO, una per a la icona d’Apple i una per al manifest, més l’SVG si en tens.

Normalment les pàgines comparteixen una plantilla i només cal enganxar-les una vegada. Elimina abans les línies d’icona antigues, o el navegador pot continuar triant-les.

Si fas servir un creador de webs, pots estalviar-te els dos passos: puja icon-512.png a l’ajust d’icona del lloc i l’eina hi afegirà l’HTML.

Com fer que el logotip funcioni a 16 píxels

En 16 × 16, tota la icona són 256 petits quadrats de color. La majoria de logotips no s’han dissenyat per a això.

Comença pel símbol, no pel nom. Un nom de vuit lletres dins 16 píxels deixa només dos píxels per lletra. Si no tens símbol, fes servir una inicial gran i gruixuda: aguantarà millor que una lletra fina.

Treu-ne detalls. Les línies molt fines i els espais petits es confonen amb el voltant; l’eslògan es torna una taca.

El que compta és el contrast clar-fosc. Les pestanyes canvien segons el tema i una icona blau marí desapareix en una barra fosca. Si el símbol és fosc, dona-li un fons clar a l’eina, o a l’inrevés.

El marge entre el logotip i la vora del quadrat requereix equilibri. Si és excessiu, el dibuix queda petit; si és massa estret, l’iPhone pot retallar-ne les cantonades en arrodonir la icona.

Mira les previsualitzacions clares i fosques a mida real, sense ampliar. El comprovador de logotips gratuït va més enllà: redueix el fitxer a 32 píxels i mesura quants detalls s’hi conserven.

Quan convé redibuixar en lloc de reduir

De vegades no hi ha remei. En una il·lustració detallada o un 3D basat en ombres, el detall és el disseny i a 16 píxels desapareix. Aquesta eina canvia la mida, però no redibuixa el logotip.

Això no vol dir que sigui un mal logotip, sinó que és per a espais grans. Dibuixa’n expressament una versió petita: símbol simplificat o inicial amb el tipus de lletra de la marca. Conserva els colors i algun tret de la forma perquè es relacionin. Una inicial clara sempre és millor que una miniatura borrosa.

Necessites un símbol nou? El generador de logotips amb IA el dibuixa a partir del nom i, si vols, una descripció breu. Les plantilles de logotips inclouen el símbol en un fitxer separat quan en tenen. Tots els logotips comprats aquí ja inclouen les icones de web.