Qué es un favicon y para que sirve

Qué es un favicon y para que sirve

Print Friendly, PDF & Email
Qué es un favicon y para que sirve
Valora esta entrada
¿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.

Entradas relacionadas:

Enlaces en html: la etiqueta a
- 233
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Como hacer espacios en blanco con html
- 287
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Creación de formularios html
- 805
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Ejercicio html para practicar con etiquetas de texto más comunes
- 51
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
Ejercicio html de repaso. Corrige los errores de sintaxis.
- 31
Ejercicio html dónde se plantean algunos errores comunes de alumnos al escribir html y su correción. Incluye solución.
Respuesta a dudas típicas cuando aprendemos html por primera vez
- 55
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
- 36
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
Factores que afectan al tiempo de carga de una página web
- 355
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Libro digital navegable
- 45
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Como indicar a Google la modificación y corrección de contenidos mediante html
- 118
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.