Clicky

Cómo crear un favicon para tu sitio web

favicon iconos

Guía paso a paso para crear un favicon con Logaster

A pesar del nivel de conocimiento que tienes, a menudo se descuidan algunas cosas durante el desarrollo de un sitio web.

Un ejemplo perfecto es el favicon del sitio web. ¿Sabes lo que es un favicon? ¿Lo usas efectivamente?

¿Qué es un favicon?

Un favicon es un pequeño icono de 16×16 o 32×32 píxeles, que normalmente contiene un logotipo, la primera letra de la marca o una imagen típica que refleja el tipo de negocio o el tema del sitio web.

Por ejemplo en nuestro caso es una a minúscula con la tilde de la ñ, haciendo referencia a la primera letra del título y la ñ del dominio (conocido como nombre de dominio internacionalizado - "Internationalized Domain Name - IDN").

favicon apañados

¿Por qué es importante el favicon?

Las funciones del favicon son las siguientes:

•  Marca.
•  Identificación del sitio web por parte del usuario (usabilidad).
•  Da un aspecto profesional al sitio web.

A continuación más detalles sobre los principales beneficios del favicon.

Reconocimiento de marca

Un favicon es algo así como la identidad de un sitio web. Como se mencionó en la introducción, el favicon ayuda a los usuarios a recordar tu sitio web entre otros visualizados. El favicon ayuda al usuario a encontrar tu sitio fácilmente y acceder al historial de navegación, resultados de búsqueda de Google o una lista de favoritos de sitios en tu navegador.

Ya sea que se trate del historial de navegación, los resultados de búsqueda en Google o una lista de favoritos de sitios en tu navegador, un favicon ayuda al usuario a encontrar tu sitio y acceder fácilmente a él.

Credibilidad

Los usuarios tienden a juzgar a los vendedores de bienes y servicios a través de Internet sobre cuán profesional es su sitio. Si no tiene un favicon (los motores de búsqueda muestran el sitio sin favicon con un ícono de documento en blanco), lo que puede conducir fácilmente a la pérdida de credibilidad, especialmente cuando las personas lo comparan con sus competidores.

Visitas repetidas

barra de marcadores de un navegadorSe sabe que las personas responden mejor a las imágenes que al texto. Supongamos ahora que un visitante de tu sitio web tenía prisa por visitarlo por primera vez y decidió agregarlo a los marcadores para volver más tarde. Supongamos que esta persona decide luego volver a visitar tu sitio web utilizando los marcadores. Tienes suerte si el favicon es reconocible, como una letra G notable y única para Google y el usuario te encontrará. Si no hay un favicon, tu sitio puede perderse en la lista de marcadores.

Ahorra tiempo del usuario

El favicon ahorra el tiempo que el usuario necesita para identificar un sitio en marcadores, historial u otros lugares donde el navegador agrega el favicon para una identificación rápida. Simplemente hace la vida más fácil para el visitante promedio de tu sitio web.

Beneficios para el SEO

Si tu sitio web tiene un favicon, será más visible en los resultados de búsqueda en comparación con los que no lo tienen y, por lo tanto, podrá atraer más visitantes.

¿Cómo crear un favicon?

Hay muchas herramientas que puedes usar para crear un favicon en pocos minutos. Si no tienes habilidades de diseño o no sabes cómo hacerlo, intenta crear un favicón usando Logaster.

Para hacerlo, sigue los pasos siguientes:

Paso 1. Ve a Logaster y pincha en el menú "Crear" → "Favicon"

Logaster crear favicon

Paso 2. Crea un logo

Logaster es un generador de logotipos en línea, por lo que para crear un favicon debes primero crear un logotipo. Logaster ofrecerá el favicon que necesitas según tu logotipo. Pero no te preocupes, no tomará mucho tiempo y esfuerzo.

crear un logotipo con Logaster

Paso 3. Introduce el nombre de tu sitio web (o compañía), elige el tipo de negocio.

crear un logotipo con Logaster, escribir  nombre

Paso 4. Elige el logo que te gusta

Una vez que se proporcione toda la información necesaria, Logaster generará varias docenas de logotipos.

muestras de logotipos

¿Cómo elegir el diseño correcto?

En primer lugar, debes comprender que el logotipo que sirve de base para su favicon puede ser imperfecto. El objetivo de Logaster es crear un favicon, y el logo puede ser modificado más tarde.

El ícono a menudo se usa como favicon. Si deseas seleccionar un color o fuente diferente, puedes editar los elementos de diseño (fuente, color, texto) en el paso 3 de la creación del logotipo. Descubre cómo editar el logo aquí. Cuando hayas finalizado pincha en "Guardar".

Logaster crear logo y editar

Paso 5. Crea y elige el diseño de favicon

Ahora se mostrará una nueva pantalla del "Asistente de creación de favicon" donde podrás elegir entre varias propuestas. Logaster genera varios genera docenas de hermosos favicons y listos para usar. Selecciona tu diseño favorito. La vista previa que ves te permite ver cómo se verá tu favicon en el sitio web.

Logaster, muestras de favicon

Si es necesario cambiar el favicon, puedes hacerlo editando el logo, porque los favicons se basan en logotipos. Es por eso que si deseas, por ejemplo, otro color de favicon, debes volver a la página web del logotipo, editar el color y crear el favicon desde el principio.

Para encontrar inspiración para un favicon visita uno de los siguientes sitios web:

•  The Favicon Gallery
•  Delta Tango Bravo
•  Fresh Favicons

Paso 6. Descargar el favicon

Puedes comprar el favicon a un precio de sólo $ 9.99 o comprar un paquete de diseño que incluye no solo el favicon, sino también el logotipo, la tarjeta de presentación, el sobre y el membrete. Averigüa cómo comprar el Kit de Marca aquí. Primero tienes que crear una cuenta gratuita en Logaster:

Crear cuenta en Logaster

Depués de iniciar sesión, aparecerá en tu cuenta el favicon que hemos guardado en los pasos anteriores. Una vez que hayas pagado, el favicon está disponible en los formatos ico y png para descargar.

descargar favicon desde Logaster

¿Dónde puedo usar el favicon?

Puedes usar el favicon:

•  En línea;
•  En dispositivos móviles. El usuario puede agregar un favicon a la pantalla de inicio de su dispositivo (como un marcador) - Android, IOS, Windows Phone, etc;
•  Aplicaciones para PC/Mac.

¿Cómo instalar un favicon en tu sitio web?

Una vez que hayas creado el favicon, su instalación en el servidor no toma más de un par de minutos y se realiza en dos etapas. Necesitas acceder al directorio raíz de tu sitio web y al editor de texto para cambiar el código HTML del sitio web.

Paso 1.

Es necesario subir el archivo favicon.ico al servidor. Para hacer esto, necesitas descargar e instalar un cliente FTP, por ejemplo, FileZilla.

Luego ingresa tus datos como IP del servidor, nombre de usuario y contraseña y sube el archivo. Más instrucciones detalladas sobre cómo cargar el archivo de favicon aquí.

Paso 2.

Ahora necesitas editar la página HTML de tu sitio web para ayudar a los navegadores a encontrar la imagen del favicon. Mientras está abierta la ventana FTP, encuentra y descarga el archivo index.html o header.php del servidor (puede tener otros nombres, por ejemplo en Joomla! suele estar en la ruta: /home/nombre_usuario/public_html/templates/nombre_template/layouts/default.php).

Antes de editar el código, asegúrate de hacer una copia del archivo para recuperarle en caso de errores.

Abre tu archivo de inicio web en un editor de texto: Bloc de notas, Notepad ++, Sublime Text.

Si su sitio web está hecho de HTML plano, inserta el código siguiente en el área del archivo "index.html", y no te olvides de cambiar "tu_sitio.com" con la dirección de tu página web:

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

código HTML parfa el favicon

El código también se puede copiar en la página de creación de favicon en el sitio web de Logaster.

código de favicon en Logaster

Si utilizas WordPress, inserta el código de abajo en la zona de tu archivo "header.php".

'link rel="shortcut icon" type="image/x-icon" href="//favicon.ico" gt="" code="" />

Si usas Joomla deberás localizar el archivo como he dicho antes y el código sería algo como esto:

'link rel="shortcut icon" href="/template-" />"¹baseurl; ?>/images/favicon.ico" gt="" code="" />

La mayoría de los navegadores modernos son lo suficientemente inteligentes como para saber cómo encontrar el archivo de favicon, incluso si el formato de imagen de favicon es de 16 × 16 píxeles, tiene un nombre favicon.ico y se almacena en el directorio raíz de tu sitio web.

Esperamos que este artículo te brinde información útil que te ayude a crear un favicon, lo que hará que tu sitio web sea más exitoso y atractivo.

Jesus_Caceres