Favicon, que es y como crear uno para nuestra pagina joomla

Un favicon, o icono de favorito, es una pequeña imagen que aparece asociada a la url de una página web, normalmente se muestra al lado de la url o cuando salvamos el enlace en favoritos o vemos el historial de navegación. Se utiliza para poder identificar de forma sencilla las páginas y es muy interesante disponer de un icono que represente nuestra web.






Basicamente un favicon es una imagen, normalmente en formato png o gif, con un tamaño de 16x16 o 32x32 pixels y 16 colores básicos.

Para generar un favicon podemos ayudarnos de nuestro editor de imágenes favorito o utilizar editores online como http://www.favicon.cc/. También existen servicios online que, a partir de una imagen dada, nos ayudan a generar el favicon como por ejemplo http://www.htmlkit.com/services/favicon/.

De manera general, para poner un favicon en una página web utilizaremos el tag link con la siguiente sintaxis y dentro de las etiquetas head de la página.


link rel="shortcut icon" href="favicon.png" type="image/png"


Dependiendo del formato de la imagen utilizada debemos variar el atributo type para adaptarlo al tipo utilizado. Por ejemplo, si nuestro favicon es un gif, el atributo type deberá ser "image/gif".

En el caso concreto de utilizar joomla el disponer o no de favicon dependerá de la plantilla en concreto que estemos utilizando. Normalmente las plantillas tienen un favicon implementado por lo que cambiar el icono por uno personalizado y que identifique claramente nuestra web es tan sencillo como sustituir el fichero favicon.ico que se encuentra en la ruta mi_joomla/templates/mi_template/favicon.ico de la instalación.

En el caso de que la plantilla que estemos utilizando no tenga un favicon tan solo tendremos que añadir el código html correspondiente en la plantilla. Para ello accedemos a la administración de joomla y en el menú extensiones -> gestor de plantillas -> mi template, pulsamos "editar" y posteriormente "editar html" con lo que veremos la plantilla html de nuestra web, añadimos el código siguiente en la sección de cabecera y haciendo que href apunte a nuestro icono y pulsamos el botón guardar.











Una vez hecho ésto ya tenemos un favicon personalizado para nuestra web que sirve para que nuestros visitantes nos identifiquen de forma rápida entre toda la lista de favoritos.

Como mejorar el rendimiento de una web


Cuando somos webmaster de un sitio web una de las cosas a las que debemos prestar atención es el rendimiento general de nuestro sitio, es decir, conseguir que el tiempo que tarda en cargar cada página sea lo más corto posible con el fin de no aburrir al usuario y que se vaya de nuestra web, quizá para siempre. Otra de las ventajas de la optimización de la web es la disminución del consumo de ancho de banda.

Aunque no hay unas reglas generales para detectar los problemas y el origen del problema de lentitud pueden ser muy diversos (base de datos sin índices, sobrecarga del servidor, excesivo consumo de memoria, etc) en mi experiencia se puede optimizar considerablemente el tiempo de carga de una web centrandonos en unos pocos puntos.

a) Disminuir el número de peticiones http. Hay formas de reducir el número de solicitudes http sin necesidad de comprometer el diseño de las páginas. Sobre todo en relación a las imágenes se puede disminuir el número de peticiones utilizando CSS sprites. Ésto es que varias imágenes de una pagina se combinan en una sola y se muestra

b) Disminuir el tamaño de la información de cada petición http. Ésto se puede conseguir, en relación a las imágenes, utilizando formatos de imagen adecuados y con la calidad más ajustada posible a la web. También se puede reducir comprimiendo los ficheros CSS o javascript y eliminando comentarios del código de la página. También debemos verificar que las páginas se estén sirviendo comprimidas utilizando directivas GZIP.

c) Cachear los contenidos descargados. Ésto se puede hacer utilizando Etags para cada tipo de contenido. Por ejemplo podermos hacer que el tiempo de expirado de las imágenes jpg sea de 1 año, por lo que el browser del usuario, al descargar la página en diferentes ocasiones, comprobará que ya dispone de la imagen y no la volverá a descargar, ahorrandonos así peticiones http y consumo de ancho de banda.

d) CSS al inicio y javascript al final. Con ésto conseguimos que la página se pueda comenzar a mostrar una vez descargados los CSS y los javascript al final de la página con lo que conseguimos que la renderización de la página y la descarga de los js puedan realizarse en paralelo.

e) Paralelizar la descarga de contenidos. Utilizando CDN para páginas con gran concurrencia de usuarios. Un CDN es un conjunto de servidores web distribuidos en varias localizaciones que nos permiten paralelizar la carga de contenidos de una página.

Para poder valorar éstos aspectos, y otros muchos, podemos utilizar dos herramientas online que nos facilitarán la vida y con las que podremos ver la evolución de nuestra página según los cambios que hagamos.

GTmetrix

websiteoptimization

En cualquiera de ellas nos informan, de manera bastante clara, los puntos más criticos que tenemos que abordar para mejorar el tiempo de carga.