Qué es y cómo crear un favicon. Guía completa.

¿Qué hallarás en este contenido?

¿Qué es un favicon?

De acuerdo con Wikipedia, un favicon (abreviatura de icono favorito), también conocido como un icono de acceso directo, icono URL, icono de sitio web, icono de pestaña o icono de marcador, es un archivo de uno o más iconos pequeños, asociados a un determinado sitio web. La gran pregunta es cómo crear un favicon… pero antes de responderla, un poco de historia.

Desde su introducción en 1999, han hecho a la web más colorida y nuestros lugares favoritos más fácil de reconocer. Son especialmente vitales cuando tenemos varias pestañas, pues los sitios web los usan para destacarse entre la multitud. Cada sitio web debe tener un favicon, y cada navegador utiliza su propia forma de mostrarlos.

Tener un favicon es bueno para el reconocimiento de la marca, dando a tu sitio una identidad visual y la creación de confianza con tu público.

En este artículo, mostraremos cómo incluir uno en tu sitio. Vamos a hablar de por qué deberías usar un favicon, cómo crear uno y, después, cómo agregar uno a tu sitio.

Importancia del favicon

Como hemos mencionado anteriormente, un favicon es parte de la identidad del sitio web. Sin embargo, también es bueno para la usabilidad y la experiencia de usuario.

Entonces, ¿por qué tener un favicon es importante? He aquí algunas razones:

1) Destacar en navegadores Web

Primero que todo, un favicon permite a tu sitio ser más reconocible en los navegadores web. No es ningún secreto que la mayoría de los usuarios de estos días tendrán más de un sitio web abierto en sus navegadores. Tener un favicon les permite identificar tu sitio entre muchas pestañas abiertas.

2) Aspecto profesional

Además de ayudar a los usuarios a encontrar la pestaña que están buscando, imagina que tu sitio web es el único entre muchos (incluidos tus competidores) que no tienen un favicon. Ahora, ¿de cuál de esos sitios te gustaría realizar una compra?, ¿cuál luce más profesional?

Esos son exactamente los pequeños detalles en los que los usuarios basan sus decisiones de compra.

3) Mejora la experiencia móvil

En estos días, ofrecer una buena experiencia móvil es clave. Además de tener un sitio web responsive, un favicon puede significar darle a los usuarios la oportunidad de añadir su sitio web directamente a la pantalla de inicio del dispositivo.

4) Los Favicons crean conciencia de marca

Todos sabemos la importancia de los logotipos. Es lo que nos conecta visualmente a una empresa. ¿Qué haría McDonald’s sin los arcos dorados? ¿O Twitter sin el pequeño pájaro azul? Ya sea que esté derivado del logotipo de tu empresa o una representación visual totalmente nueva, un favicon funciona como un logotipo en miniatura. Ayuda a los usuarios de internet a recordar tu marca.

5) Marcadores

Con un favicon se tiene una mayor ventaja sobre los sitios web que no lo tienen, especialmente cuando se trata de guardar y mantener el marcador de un sitio favorito en el navegador.

¿Qué mostrar en favicon?

Porque sólo tienes 256 píxeles para trabajar, puede ser un poco difícil saber qué incluir en un favicon. Aquí están algunas ideas comunes:

Utiliza tu logotipo (o parte de él). Puedes leer aquí sobre cómo hacer un buen logo.
Si tu logotipo no se muestra bien en ese pequeño tamaño, utiliza una versión estilizada de la primera letra (o letras) de tu sitio web o del nombre de tu negocio.
Utiliza un icono que comunique lo que tu sitio hace o representa (por ejemplo, Google Analytics utiliza un pequeño gráfico para su favicon).

Cómo crear un favicon

Debido a que el favicon es un archivo gráfico de píxeles, puedes crearlo en la misma forma como una imagen .ico. Puedes hacer un favicon de las siguientes maneras:

Descargar un icono ya hecho
Dibujar desde cero en un editor de gráficos como Photoshop o utilizar un generador en línea
Convertir una imagen de casi cualquier formato a través de una aplicación especial

Encuentra tu Favicon en galerías especiales

A continuación, están los enlaces a distintas colecciones y galerías donde puedes descargar uno o más favicons.

http://www.thefavicongallery.com/ – La pequeña pero útil galería de favicons. Allí encontrarás iconos con una variedad de temas. Hay aproximadamente 300 de ellos. A fin de descargar el favicon que te guste, deberás hacer clic sobre el icono y simplemente guardarlo en tu computadora.
http://www.favicon.cc/ – Gracias a esta galería, no tienes que crear ningún favicon. Simplemente selecciona y descarga la imagen que más te guste. Ten en cuenta que, sólo puede ver 20 favicons por vez, por lo que esto ralentiza el proceso de selección un poco.
http://favicon-generator.org/gallery/ – Puedes elegir entre una pequeña pero útil colección de 84 piezas de favicon.

Cómo crear un favicon desde cero

La ventaja de crear un favicon desde cero es que tu icono será único, ¡lo cual es muy importante! Por lo tanto, es preferible dedicar de 5 a 10 minutos para crear tu propio favicon.

Hay dos formas de crear un favicon: puedes hacerlo a través de un editor gráfico profesional, como Photoshop o Inkscape, o puedes crear un icono favicon en línea a través de generadores.

Nos gustaría mostrar cómo crear un favicon usando los mejores generadores de favicon en línea.

Logaster

Cómo crear un favicon con Logaster.

La principal ventaja de este servicio es que no tienes que dibujar un favicon o convertirlo en un logotipo. Todo lo que necesitas hacer es introducir el nombre de tu sitio o compañía y elegir tu tipo de actividad.

Después, el servicio te propone crear un logotipo en primer lugar, porque sus diseños de favicon se basarán en su logotipo. No te preocupes, el proceso de creación de logotipos dura unos pocos minutos o incluso menos.

Después ese servicio creará decenas de diseños de favicon ya listos. Elige el icono, fuente y color correctos. Puedes descargar tu favicon en formatos .ICO o PNG en diferentes tamaños.

Para obtener más información acerca de cómo crear un favicon usando Logaster, haz clic aquí.

Vamos a tratar de «crear un favicon» con el servicio en línea Logaster.

Además, el servicio también crea logotipos, tarjetas de visita, sobres y membretes.

Favicon.cc

Cómo crear un favicon con Favicon.cc

Usando este generador puedes dibujar cada pixel del futuro favicon (hay 256 px). Ve al sitio. Allí verás una ventana en la que puedes empezar a dibujar tu favicon.

Cada caja en el área de trabajo es un píxel. Se debe pintar con el color adecuado. Puedes seleccionar un color de la paleta. También puedes mover la imagen si es necesario.

Para descargar el favicon realizado, haz clic en Descargar el favicon. Obtendrás tu favicon en formato .ICO.

Como opción adicional, puedes cargar tu propia imagen y hacer de ella un favicon. Simplemente haz clic en «Importar» y selecciona el archivo de imagen desde tu ordenador (con un tamaño de hasta 5 MB). Después, podrás editar el favicon un poco (utilizando la herramienta de dibujo).

Prodraw

Cómo crear un favicon con Prodraw.

Esta es una herramienta en línea para ayudarte a convertir tu logotipo, imagen o foto de archivo en el formato de icono .ICO. El servicio admite formatos JPG, GIF, PNG, BMP y TIF para cargar.

Tamaño de salida de 16×16 píxeles, 32×32, 48×48 hasta 128×128 píxeles.

El servicio también genera los iconos con diferentes niveles de nitidez.

Por lo tanto, todo lo que necesitas hacer es cargar tu logotipo y cambiar su tamaño o recortarlo si es necesario. Después de eso, podrás descargar tu favicon. Nota: sólo obtendrás una posible variante de tu favicon basado en tu logotipo.

Las dimensiones del favicon

¿Qué tamaños (px) tiene el favicon?

16×16: navegador favicon
32×32: Icono de acceso directo de la barra de tareas
96×96: Icono de acceso directo del escritorio

Apple Iconos táctiles

Apple iOS tiene una característica llamada «Añadir a inicio», que básicamente hace que tu sitio web móvil parezca un app en tu móvil. ¿Cómo?

Abre la aplicación Safari en tu dispositivo iOS.
Navega hasta el sitio para el que deseas crear un acceso directo.
Presiona el icono «Compartir», en la parte inferior. …
Selecciona el icono de «Añadir a inicio».
Dale un nombre a tu botón de enlace.

Nota: el archivo .ICO es el más ampliamente apoyado. A diferencia de PNG puede contener múltiples resoluciones y profundidades de bits, lo cual es muy útil en Windows. Internet Explorer utiliza favicons en una variedad de tamaños y un ICO es el único modo de ofrecer a estos.

El formato PNG admite la transparencia alfa y nos da el tamaño de archivo más pequeño posible. Su único inconveniente es que Internet Explorer no lo soporta (sólo acepta ICO).

Agregar un favicon en tu sitio web

Ahora que sabes cómo crear un favicon utilizando un creador en línea, guarda el archivo en el dispositivo en formato .ico.

Ahora debes cargarlo por FTP a tu directorio raíz del sitio web (esto sería la carpeta donde coloca el archivo index.html). Actualiza el código HTML en el elemento de su sitio. Aquí está el código de favicon que todos los navegadores aceptan:

<link rel=»icono de atajo» href=»Http://yourwebsite.com/favicon.ico» />

Guarda los cambios.

Eso es todo – después de un rato comenzará a conectar a funcionar.

¿Qué hay de WordPress?

Sólo necesitas preparar un archivo de imagen. Debe ser en forma cuadrada, y al menos de 512 píxeles de ancho y alto.

A continuación, ve a la pantalla de administración > Apariencia > Personalizar.

Luego haz clic en identificar el sitio. Ahora, haz clic en Seleccionar imagen en la sección de iconos del sitio, carga el archivo de imagen que preparaste a partir de la pantalla de pestaña cargar archivos y, a continuación, haz clic en «Seleccionar» y listo.

Algunos temas ya tienen integrada una interfase visual para que puedas agregar el favicon de una forma muy sencilla.

Aquí puedes encontrar más información acerca de cómo agregar el favicon para su sitio WP.

Bono adicional: otras imágenes importantes que necesitas tener en tu sitio web y aumentan la popularidad de tu marca

El logotipo es una de las más importantes imágenes que realmente necesitas tener porque es grande y se puede ver en cada página en el encabezado de tu página web.
Los avatares son importantes porque los usuarios pueden ver qué imagen representa a quien deja comentarios, pero también puedes tener tu propio avatar que te representa a ti y a tu negocio.
A veces, es una buena idea tener un banner de encabezado o incluso un banner animado en el encabezado del sitio web. Este banner puede incluir imágenes y textos de tus últimos mensajes o cualquier otra información útil para tus visitantes.
Iconos de medios sociales son muy útiles para identificar si el sitio web tiene perfiles en las redes. Asimismo, las personas pueden compartir tu contenido a sus propios perfiles de medios sociales utilizando los iconos específicos para ello.
Los menús son generalmente creados usando CSS, HTML y texto, pero a veces los desarrolladores web utilizan imágenes para los menús primarios, menús secundarios, los menús de la barra lateral, la barra superior de menús, footer y así sucesivamente.
Los emoticonos pueden mejorar la retroalimentación; el número de comentarios puede aumentar si se utilizan correctamente. También pueden ser usados para expresar emociones y sentimientos acerca de una persona o del contenido del sitio web.
Otros: Carritos de compra, íconos de búsqueda, feeds y así sucesivamente son otras imágenes importantes.

Conclusión

El favicon es una pequeña parte que por lo general no despierta demasiada atención, pero la verdad es que es un detalle muy importante de nuestro sitio web, tanto desde el punto de vista de interfaz de usuario como desde un punto de vista de marca.

¡No pierdas tu tiempo, hoy sabes cómo crear un favicon para diferenciarte de la multitud!