Crear favicon.ico con transparencia png como Google

La importancia de crear un favicon correctamente para tu sitio web hace que aumente tu presencia online.

¿Y por qué es tan importante su personalización y donde se visualiza?

Disponer de un favicon personalizado y no genérico, hará que reconozcan tu marca fácilmente. Este icono se muestra en la pestaña del navegador junto al título de la página web además de cuando guardamos como favorito o marcador un sitio web.

Para el favicon de nuestro sitio web nos sirve cualquier imagen de tamaño 16×16 píxeles o más (32x32, 48x48, 64x64...), aunque no lo aconsejo ya que la redimensionará el navegador a 16x16.

Para conseguir que nuestro favicon.ico tenga la transparencia png sin arriesgarnos a que algunos navegadores no lo puedan visualizar, realizaremos los siguientes pasos:

• Creamos el icono en Photoshop, de 16x16, obviamente con el fondo transparente y todos los efectos de transparencia que queramos.
• Guardamos para la web en formato png-24.
• Utilizamos un programa para convertirlo como por ejemplo Zyro.
• Ahora solamente tenemos que colocarlo en  la carpeta raíz del sitio, con el nombre favicon.ico.

Es necesario utilizar un generador de favicon para convertir el png-24, ya que, si cambiamos la extensión manualmente no se visualizará en algunos navegadores..

Si queremos automatizar el trabajo, disponemos de herramientas online que automáticamente nos realizan todo el proceso, tanto de redimensionado como de exportado en diferentes formatos en función del tipo de dispositivo y/o aplicación. Algo que deberíamos tener en cuenta es que la imagen a cargar sea en formato cuadrado para que al recortarla quede bien ajustada. Una excelente opción online es Favicon Generator.

Crea ya tu favicon personalizado, potencia el SEO de tu web y ayuda a promocionar tu marca y sitio web.

Este artículo ha sido actualizado el 10-02-2023.