Creació del favicon del lloc web

Un favicon (de l'anglès favorites icon) és una petita icona que apareix al costat de la barra d'adreces de la majoria dels navegadors i és també la petita imatge que representa al lloc web quan el desem com a marcador a la carpeta de favorits. També es mostra a les pestanyes actives d'una sessió del navegador:

En paraules de la Viquipèdia, un favicon1)

és una icona que s'associa amb un lloc web. El nom prové del fet que en un principi s'usaven exclusivament per identificar gràficament els llocs web que es desaven en el navegador com a punts o adreces d'interès (el nom varia segons el navegador). Més endavant, amb l'adveniment de les pestanyes de navegació, també s'hi utilitzen, afavorint la identificació del lloc web visita

No és fàcil crear un imatge que identifiqui el lloc web en unes dimensions de 16px x 16px. Els bons favicon són una barreja de creativitat, enginy, originalitat i, en el millor dels casos, conté l'esquema de color del lloc web.

Quina és la millor estrategia per dissenyar el favicon del lloc web? L'opció mès senzilla i eficient és reduir el logotip del lloc web a les mides del favicon o seleccionar una part representativa d'aquest. Aquestes dues solucions les trobareu a molts llocs web. Veieu a continuació els següents exemples:

lloc web logotip favicon
XTEC
Merlí
Linkat

Creació del favicon amb el GIMP

En aquesta pràctica creareu un favicon a partir del logotip del lloc de web d'exemple que heu estat treballant al llarg d'aquest curs des del mòdul 3

Obriu ellogotip amb el GIMP. Dibuixeu una selecció rectangular que inclogui només el símbol de l'esquerra del logotip amb l'eina de selecció del GIMP.

Un cop teniu la selecció activa, cliqueu l'opció Escapça la selecció del menú Imatge.

Creeu una nova capa amb fons transparent.

Cliqueu a sobre del color de primer pla. S'obrirà la finestra Canvia el color de primer pla. Escriviu la notació HTML del color: #00abef

Seleccioneu el pot de pintura i ompliu la capa del color de primer pla. Deixareu de veure la capa de Fons

Desplaceu la nova capa a un nivell inferior mitjançant la fletxa que us marquem en la següent captura.

Seleccioneu la capa superior. Cliqueu amb el botó dret del ratolí. Us apareixerà un desplegable amb diferents opcions. Escolliu l'opció Fusiona amb la capa inferior per barrejar la capa la amb la capa inferior.

Seguidament, cliqueu al menú Imatge | Escala la imatge i escaleu la imatge a les dimensions d'un favicon: 16x16 píxels

Deseu els canvis de la imatge amb l'extensió .ico, us apareixerà la següent finestra:

Accepteu. Ja teniu disponible el favicon. Moveu l'arxiu favicon a l'arrel de la carpeta del lloc web (al mateix nivell que l'arxiu index.html). Ara només cal que obriu el fitxer index.html i afegiu les següents línies dins del contingut del <head>:

<link rel="shortcut icon" href="favicon.ico"/>
<link rel="icon" type="image/ico" href="favicon.ico"/>

Refresqueu el navegador i comproveu si es visualitza correctament el favicon tant a la pestanya com a la barra d'adreçes web.