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:

Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 238
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 542
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Factores que afectan al tiempo de carga de una página web
- 255
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...
Como hacer espacios en blanco con html
- 117
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.
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 583
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Como indicar a Google la modificación y corrección de contenidos mediante html
- 60
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?
Anclas html
- 423
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
La importancia de la etiqueta < title > para el SEO
- 129
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Ejemplo de creación de página web con capas y migración a HTML5
- 742
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Resumen de como comentar código en html, css y javascript
- 311
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
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.