Què és un favicon

que és un favicon

Segur que, en més d'un ocasió, has escoltat parlar d'un favicon. Això està molt relacionat amb el disseny web, i és un punt important que en tota pàgina, ja sigui una botiga en línia, un bloc, un web, etc. et van a demanar. però, ¿Què és un favicon? Per a què serveix? I el més important de tot, com es fa?

Si tens molts dubtes sobre això, aquí anem a donar-te les claus perquè ho entenguis i, sobretot, perquè puguis presentar-lo dins del teu projecte i quedis amb una millor presentació. T'ho assegurem!

Què és un favicon

Què és un favicon

Anem a començar explicant-què és un favicon perquè ho entenguis. I, per això, res millor que donar-te un exemple pràctic. Imagina que ara mateix estàs navegant (de fet, ens estàs llegint). Però no tens només una pestanya, sinó diverses d'elles. Et deus haver adonat que, en cadascuna d'elles, apareix el nom del que reflecteix aquesta pàgina, ja sigui Youtube (perquè estàs escoltant música de fons), Gmail (perquè tens obert el teu correu) o aquesta pàgina.

A la banda de cada nom, a l'esquerra, t'apareix una petita imatge, en quadradet. La de Youtube i Gmail segur que la identifiques amb els logos que tenen, però, i la resta de pestanyes?

Doncs això que veus és en realitat el favicon. En altres paraules, es tracta d'un icona que guarda relació amb la pàgina que estàs visitant, per això és tan important el prestar atenció a aquest detall, perquè quan agregues a favorits o accessos directes una pàgina, el favicon es converteix en la «imatge» d'aquesta pàgina i és pel que cal cuidar el seu disseny perquè es relacioni a la perfecció (i sobretot es vegi bé per distingir-ho d'altres).

Aquest petit icona sol tenir una mida establert que està en 16 × 16 píxels (encara que també es pot posar en 32x32px). Dins el mateix has de tenir cura que tot el que posis es vegi de manera correcta ja que, en cas contrari, apareixerà com una taca poc identificable (i que donarà molt mala imatge de la teva pàgina).

Per què és tan important el favicon?

Per què és tan important el favicon?

Ara que saps el que és el favicon, i que has localitzat aquest en les pàgines que obres habitualment, t'has adonat que avui dia cada vegada són menys pàgines a les que els falta? Això és perquè realment és molt important per donar una visió d'elegància i de saber fer. És a dir, que vas a transmetre una imatge de marca o de corporació que es preocupa pels detalls.

No obstant això, el favicon també té altres usos com són:

  • Servir d'identificació de la teva pàgina. Normalment aquest favicon està relacionat amb el logotip que tens a la teva pàgina web, només que a una mida més petita. Però quan el logo és massa gran i no es veurà al botonet, es tendeix a triar una cosa que relacioni amb el mateix.
  • Ajudaràs a que els usuaris que tinguin guardada la teva pàgina puguin identificar-la visualment. Així, tot i que no es recordin de la url, o de el nom de l'empresa, per la imatge de la favicona sí que la van a localitzar.
  • Per estar «a bones» amb el SEO. Això cal prendre-ho amb pinces. I és que tenir o no tenir un favicon no afectarà directament a l'SEO (és a dir, que no et va a posicionar millor o pitjor per tenir-lo o no). Ara bé, cada vegada és més habitual que, quan un navegador entra en una pàgina, busca aquest favicon i, quan no ho troba, llavors dóna un error 404. I ja saps que aquests errors no són bons per al SEO d'una pàgina.

Com fer un favicon

Com fer un favicon

Després del que s'ha vist, és clar que un favicon és un element imprescindible a l'hora de tenir una pàgina web. Ara bé, ¿com es fa un?

Has de saber que, en la majoria dels casos, el que fa és escollir el logotip d'aquesta web, o si és massa gran, una cosa que l'identifiqui. Per exemple, imagina que tens una web de televisió que has anomenat d'alguna manera. Però això, en el favicon, és massa gran. En canvi, pots posar una imatge d'una televisió perquè ho relacionin. En aquests casos sí es recomana que porti els mateixos colors que la teva web perquè ho identifiquin millor.

I ara bé, com podem crear un favicon? Doncs tens diverses opcions:

Photoshop, Gimp ...

En altres paraules, parlem de programes d'edició d'imatges ja que un favicon es crea exactament igual que una imatge. Això sí, has de guardar-la en format ico perquè la reconegui com a tal perquè no es pot deixar com jpg, gif o similar.

Aquesta forma de fer-ho et permet personalitzar molt millor el favicon, aconseguint crear-lo des de zero i donant-li l'acabat que tu vulguis. Normalment per això es treballa amb una imatge en una mida normal i després s'adapta a la mida d'aquest botó.

Després de fet, s'ha de pujar i provar en diferents navegadors per veure si es veu bé, és representatiu i, sobretot, s'entén.

Usant eines online

En aquest cas ens referim a pàgines web que s'ocupen de convertir qualsevol imatge que vulguis en un favicon en qüestió de segons. Però també tens l'opció de dissenyar directament amb aquestes pàgines el teu favicon.

Si vols el primer (pujar la imatge i convertir-la), aleshores podeu Favicon Generator o Favic-o-matic. Però si vols el segon (dissenyar-de zero), aposta per favicon.io o x-icon editor.

amb WordPress

La teva pàgina està feta en WordPress? I saps que pots usar aquest sistema per crear el teu favicon. Per a això pots utilitzar alguns plugins que et permeten crear aquest botó basant-se alguna imatge que hagis pujat (o que pugis). També a través de «Aparença / Personalitzar» pots fer-ho.

Un cop tens el favicon fet, només has de posar-ho a la teva web i que aquesta ho reconegui per poder mostrar-se a la zona esquerra del nom de la teva pàgina, així com a l'hora de guardar-la en favorits. D'aquesta manera et reconeixeran fàcilment sense necessitat de parar-se a llegir si és la pàgina que realment volien visitar.


Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.