Rodrigo's Blog

Creación de un icono para tu web

Cuando entramos a una web se puede leer el título de la misma en la pestaña del navegador. Al lado, podemos encontrar un icono que es la marca de identidad de la web. Existe una gran variedad de iconos con distintos colores, formas y diseños.

¿Por QUÉ es importante?

Nos podemos llegar a preguntar porqué es importante un icono, y la respuesta es muy simple, el icono no es más que la representación de nuestra propia marca.

Además, el icono tiene que tener concordancia con el título,  el logo, y el nombre del sitio. Todos estos elementos están relacionados.

Puede que tu icono forme parte de tu logo, podemos ver ejemplos en grandes webs.

iconos-sociales

¿Qué icono debería usar?

Teniendo en cuenta la relevancia que tiene el icono debemos escoger uno sencillo y que sea fácil de recordar para el usuario.

El objetivo a la hora de crear un icono es que el usuario asocie el icono a la web, por ejemplo: si vemos un pájaro blanco en un fondo azul, automaticamente pensamos en twitter. Como este, existen muchos otros ejemplos.

crear un icono sencillo y rápido

Hace poco subí a instagram un pequeño video fast motion, en el cual mostraba cómo crear un icono sencillo.

Aunque sea un video rápido, podemos ver que solo se usan dos fuentes distintas para las letras, la de las llaves es Roboto y la de la letra es Pacifico. Ambos tipos de letra las podemos encontrar en google fonts.

Después, un objeto en forma de circulo para poder ponerlo de fondo. Y por último, juego un poco con el contraste de los colores.

Lo importante al hacer el icono es que esté acorde a la web. En mi caso , usé la letra R de Rodrigo dentro de dos llaves, que suelen usarse en la mayoría de lenguajes de programación.

Por último, agregamos el icono a nuestro head:

Si quieres ver mas mini-tutoriales te recomiendo que me sigas en Instagram. Además, enseño los proyectos en los que trabajo actualmente.

Espero que esto os sea de utilidad, pronto seguiré subiendo más posts.

Compartelo en tus redes!

próximo Publicación

Atrás Publicación

© 2019 Rodrigo's Blog

Tema de Anders Norén