Qué es un favicon y para que sirve

Qué es un favicon y para que sirve

Print Friendly, PDF & Email
¿Eres de los que se fijan en todos los detalles de una página web cuando navegas por internet?

Es posible que después de leer esta entrada si no lo haces ya empieces a hacerlo.

El favicon en realidad es una herramienta práctica.

También me ayuda a saber hasta que punto se ha llegado a personalizar una página web o no.

Existen muchos gestores de contenidos como Joomla o WordPress que directamente te mostrarán allí el logotipo.

Si el diseñador que hizo la página no se esforzó en personalizar este detalle… entonces dice mucho de su grado de profesionalidad o tal vez es que le pudieron las prisas o el presupuesto.

Así que cuando implemento proyectos intento no descuidar este detalle.

Veamos en la entrada de hoy que es el favicon y para que sirve.

Qué es un favicon

Un favicon es una imagen que permite identificar una página web directamente desde la pestaña del navegador.

Es útil por ejemplo cuando tienes muchas pestañas abiertas y te ayuda a acceder directamente a la página que te interesa.

ejemplo de favicon pestaña Chrome
Ejemplo de favicon en una pestaña de un navegador Chrome

Típicamente tienen las medidas 16px*16px , 24px * 24px o 32px * 32px.

Personalmente procuro utilizar siempre la medida 32px * 32px. Aunque tal vez lo más importante es que te fijes que son cuadrados. Podrías no tener un favicon en proporción 1:1 pero entonces no quedan tan bien.

Usos de un favicon

En la definición de fav icon ya hemos comentado que nos sirven para identificar una web cuando tenemos muchas pestañas abiertas.

También sirve como herramienta de marca corporativa. Típicamente puede ser el imagotipo del logo.

Y como imagen identificativa cuando alguien guarda una página en los marcadores de su navegador (favoritos)

Como hacer un favicon

Encontraremos favicones con extensión .png, .jpg o .ico

No es un formato que podamos trabajar fácilmente si no estás familiarizado.

Así que a menudo lo más práctico es usar generadores de favicones.

En internet hay a montones.

Por ejemplo este.

Actualización 10/10/2018

Este apartado es una actualización con contenido cortesía de C.Toro. ¡Muchas gracias por tu recomendación!

Reproduzco literalmente su experiencia 😉

Mientras que favicon-generator.org es una buena herramienta, no permite descargar varios tamaños para distintas plataformas al mismo tiempo.

Después de investigar un poco, encontré esta otra herramienta y quería sugerírtela por si te interesa mencionarla junto a la otra.

https://www.websiteplanet.com/es/webtools/favicon-generator/

Esta herramienta permite crear favicons a partir de imágenes de hasta 5 MB de formato JPG, PNG o GIF, e incluso desde una galería. Así como también permite generar favicons para diferentes tamaños de pantalla y resoluciones al mismo tiempo.

Configurar un favicon para el navegador

Si utilizas un CMS para hacer tu página web es muy fácil.

Normalmente hay plugins para hacerlo con total comodidad o incluso tu theme te permitirá subir una imagen jpg o png.

En el caso de que hayas «picado» tu web manualmente otra opción es instalar mediante html.

La instrucción que debes escribir es una de las dos:

<link rel="shortcut icon" type="image/png" href="http://dominio.com/favicon.png"/> <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

¡Hola!

Deseo que esta entrada te haya sido de utilidad. ¡Desde luego los favicon si que lo son!

Nos leemos mañana, como siempre, con un nuevo contenido en el blog.

Finalmente te animo a seguirme en mi perfil de linkedin.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.