Programari lliure dins de l’àmbit de la nostra llengua, sense deixar de costat la globalització

El Favicon

Detalls
CMS 'Joomla!'
El Favicon o Icona de Web

El 'Favicon' (abreviatura de l'anglés 'favorites icon'), o icona de punts o d'adreces d'interés, és una icona que s'associa amb un lloc web. El nom prové del fet que en un principi s'usaven exclusivament per a 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 visitat.

Per crear un 'favicon', cal que la imatge tinga una mida de 16x16 píxels, i un format '.ico' per a tots els navegadors, tot i que els navegadors més moderns també poden tindre una mida de 32x32 px, inclús més grans i tot, també suportaran formats com, GIF, JPG, BMP...

Canviar el 'Favicon'

Canviar el 'favicon' del seu lloc és una tasca relativament senzilla.
Creeu una imatge de 16x16 píxels. Feu servir programari gràfic com 'Photoshop', 'Gimp', 'Paint.net' o 'Windows Paint'. Alternativament, pot utilitzar també una eina en línia com:

Convertisca a format '.ico' usant llocs en línia gratuïts com:

L'arxiu creat ha de tindre l'extensió '.ico'. Copieu l'arxiu al directori '/joomla/templates/' i reanomenar-lo a 'favicon.ico'. Obriu un navegador. Pot veure la seua nova icona? Si és així, felicitats. Si no, això no vol dir necessàriament que haja fet alguna cosa malament. Els navegadors estan dissenyats per minimitzar el trànsit de dades, de manera que no refresquen el 'favicon' cada vegada que mostren una pàgina. Ni tan sols refrescar la pàgina (F5) ajudarà. Us cal fer un refresc més a fons:

  • Mozilla; Firefox; Safari: premeu 'Shift' (majúscules) mentre fa clic a recarregar, o premeu 'Ctrl-Shift-R' ('Cmd-Shift-R' a Apple Mac).
  • IE: premeu la tecla 'Ctrl' mentre fa clic a 'Refresh', o premeu Ctrl-F5.
  • Konqueror: simplement feu clic al botó Recarregar, o premeu 'F5'.
  • Els usuaris d'Opera poden haver de netejar completament la seua memòria cau 'Eines → Preferències'.
  • Chrome: 'Shift-F5'.

Si res d'això funciona, haurà d'esborrar tots els arxius temporals d'Internet i l'historial, i després obrir la pàgina de nou.

El meu 'favicon' està en un altre lloc

Algunes plantilles contenen codi que redirigeix el navegador a un altre directori o a un altre arxiu d'icona. Per determinar on hauria d'estar el seu nou 'favicon', examini 'http://elseulloc.com/templates/la_seua_plantilla/index.php' i busque codi que continga el text:

<link rel="shortcut icon"

Allí hi trobareu el directori i el nom del fitxer de la icona. Copie la seua icona a aquest lloc i delega el nom al què està apuntant aquest enllaç. Assegureu-vos que el servidor web tinga accés a aquest arxiu. Mire el següent exemple:

<link rel="shortcut icon" href="http://elseulloc.com/templates/la_seua_plantilla/icon/favicon.ico" />

Si no vol canviar només l'arxiu 'favicon.ico' en el seu respectiu directori de la plantilla pot trobar la referència a aquest arxiu en el document 'html.php'. La ruta és "........\libraries\joomla\document\html\html.php". Això evita que la icona canvie si fa servir: '<link rel="shortcut icon" href="http://elseulloc.com/templates/la_seua_plantilla/icon/suicono.ico" />' al html de la plantilla i no elimina el fitxer 'favicon.ico' (per què cridar a la icona dues vegades?).

Extracte de l'arxiu html.php

// Try to find a favicon by checking the template and root folder
        $path = $directory . DS;
        $dirs = array( $path, JPATH_BASE . DS );
        foreach ($dirs as $dir )
        {
            $icon =   $dir . 'favicon.ico';
            if (file_exists( $icon ))
            {
                $path = str_replace( JPATH_BASE . DS, '', $dir );
                $path = str_replace( '\\', '/', $path );
                $this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
                break;''
 
 

Exemple - Creació, descàrrega i modificació del 'Favicon'

Creació i descàrrega

 

Podem crear els favicoms amb qualsevol editor d'imatges o com ací explique des d'alguna de les webs que ràpidament ens creara les icones (animada i estàtica) partint d'una imatge desada al nostre disc dur. El 'Joomla' ens mostra un 'favicon' per al lloc d'administració i el mateix favicon per al frontend:

En aquest cas pretenc posar un 'favicon' animat per al lloc extern i el mateix 'favicon' però estàtic per al lloc d'administració. El primer és crear i desar una imatge al nostre disc dur, convé que la imatge no siga molt gran perquè no es distorsione massa. Anem per exemple a la pàgina web de 'FavIcon from Pics':

En (Image to Use:) premem el botó (Navega...) per buscar la imatge desada, la seleccionem i premem en (Generate FavIcon.ico):

Podem afegir a l'animació, desplaçament de text, per fer-ho a (Your favicon preview:) premem en (Edit):

En (Customize your favicon:) editem els camps del text, color del text i fons del text i després premem en (Download FavIcon Package), desem el fitxer:

Descomprimim  i veurem:

  • animated_favicon1.gif el favicon animat.
  • favicon.ico el favicon estatic
  • ReadMe.txt l'aguda.
Posar o modificar el 'Favicon' al 'Front-end'

El primer és pujar al servidor el nostre 'favicon', en el meu cas la deixaré al mateix lloc que es troba l'antic 'favicom' (/var/www/joomla/templates/rhuk_milkyway), com al Front-end vull el 'favicon' animat triaré la imatge "animated_favicon1.gif". Podem esborrar o reanomenar l'antic 'favicon' per donar pas al nou. Després editem l'arxiu 'index.php' que es troba al mateix lloc (/var/www/joomla/templates/rhuk_milkyway), i afegirem aquestes línies entremig de les etiquetes <head> i </head>:

  • ruta_del_favicon/animated_favicon1.gif" >

Al meu cas, l'editaré amb 'NANO':

$ sudo nano /var/www/joomla/templates/rhuk_milkyway/index.php

Afegim les línies i clic a (F2); (S) i (Intro).

Posar o modificar el 'Favicon' al 'Back-end'

Per modificar el 'favicon' de l'administració pel nou 'favicon' estàtic és ben senzill, pugem el 'favicon' anomenat 'favicon.ico' al mateix directori on es troba el 'favicon' antic i el sobre-escrivim, l'antic 'favicon' es trobara en la plantilla d'administració que utilitzem, al meu cas la ruta és: /var/www/joomla/administrator/templates/khepri/favicon.ico.

 

Per veure altres configuracions del 'Joomla!' podeu anar a, 'Documentació' => 'Eines del Sistema' => 'CMS - Sistema de Gestió de Continguts' => 'CMS - Joomla', d'aquest lloc, o des d'aquest enllaç CMS joomla!.
 
Guia - Joomla! 3.x, Fàcil