La mayoría de las páginas web profesionales utilizan iconos para que los visitantes puedan encontrar más fácilmente lo que buscan así como para crear una imagen distintiva. ¿Sabías que tú también puedes añadir iconos a tu página web incluso sin tener conocimientos de diseño web? En este artículo, te vamos a recomendar las mejores plataformas de iconos gratis para páginas web que existen y cómo introducir estos iconos en tu sitio.
Los iconos de páginas web y su importancia
Un icono es una imagen o un símbolo que puedes introducir en tu página web. Funciona como un botón o un enlace en el que puedes hacer clic o simplemente como un elemento decorativo.
Los iconos facilitan la navegación. Son reconocibles y ayudan a las personas a moverse por tu web, como las señales de tráfico. Una lupa te indica dónde está la barra de búsqueda, un teléfono te dice dónde encontrar el número de teléfono, un carrito de compras te muestra los productos que quieres comprar, etc. Estos símbolos comunes hacen que una página web desconocida sea fácil de manejar.
Los iconos pueden ser parte de tu marca comercial. Los iconos de los sitios web pueden reforzar los colores, el estilo, el tono y el logo de tu marca. En otras palabras, son parte del conjunto que hacen que tu estilo sea especial y distintivo.
Los iconos favorecen el diseño general de tu página web. Los iconos son una forma muy útil de añadir espacios en blanco a tus páginas. Este espacio visual de descanso hacen que tu sitio sea más legible y no dé la sensación de que está recargado o apretado.
Los iconos son universales. Es fácil crear una página web multilingüe, pero los iconos son una forma fantástica de transmitir tu mensaje de un modo que todo el mundo lo entienda, independientemente del idioma o el país.
Note: Puede que hayas oído hablar del término favicon. Es ese pequeño icono personalizado que aparece al lado de tu dirección de internet en las pestañas del navegador. Normalmente es una mini versión de tu logo. Aquí encuentras más información sobre cómo añadir un favicon a tu página web.
Plataformas de iconos gratis
Hay millones de plataformas de iconos, muchas de las cuales te permiten usar sus iconos de diseño de forma gratis o de pago. Numerosas páginas web de fotos de archivo han empezado a ofrecer iconos también. Hemos hecho una lista de algunas de nuestras favoritas donde puedes encontrar iconos gratis.
iconmonstr
iconmonstr tiene su sede en Alemania y cuenta con miles de iconos para elegir. Son algo básicos, pero son gratis para uso comercial y te permiten cambiar el tamaño y los colores.
Flaticon.com
Flaticon.com tiene una enorme variedad de iconos gratis para páginas web. La selección y los diseños son fantásticos, pero si quieres utilizarlos gratis, tienes que crear una cuenta y mencionar al autor del icono de forma clara en tu página web. Si prefieres no tener que hacer la mención, tienes que pasar a un plan de pago.
Flaticons.net
Flaticons.net es otra fuente estupenda para encontrar y personalizar iconos. Puedes descargar iconos gratis, así como personalizar el tamaño, el color, la forma e incluso el color de fondo de estos.
Nota: Puedes conseguir exactamente el mismo color si tienes su “código de color”. Este código es un valor alfanumérico que identifica un color y asegura que siempre sea el mismo. Para encontrar el código de un color, utiliza una extensión como ColorZilla o EyeDropper. Estas herramientas pueden averiguar los colores de cualquier página, incluida la tuya.
GraphicBurger
Los iconos de GraphicBurger destacan porque tienen un estilo único y te dan la sensación de que no los vas a encontrar en ninguna otra parte. Vienen en sets, aunque no puedes cambiar ni el color ni el tamaño.
Iconfinder
Iconfinder tiene una enorme selección de sets de iconos en diferentes estilos. La mayoría son gratis, pero también tienes opciones de pagar individualmente si tan solo necesitas algunos en particular y no quieres pagar una suscripción mensual o anual. Así que puedes comprar el uso de un icono directamente por unos dólares y luego te olvidas.
Good Stuff No Nonsense
Para iconos que parecen hechos a mano en lugar de los genéricos, echa un vistazo a Good Stuff No Nonsense. Brindan iconos con un toque más personal y manual que se adaptan mejor a ciertos tipos de negocios. En esta página encontrarás sets de iconos tanto gratuitos como de pago.
Cómo utilizar los iconos en tu página web
La mayoría de las plataformas para iconos funcionan de la misma manera. Ofrecen miles de iconos para elegir en diferentes colores y formas. Puedes descargar un icono o un set de iconos. En cualquier caso nosotros recomendamos descargarlos en un archivo PNG, ya que funciona para la mayoría de los casos.
Casi todas las páginas web de iconos ofrecen algunos iconos gratuitamente, pero probablemente tengas que crear una cuenta y adquirir un plan de pago o realizar algún pago si quieres más opciones para personalizarlos o utilizarlos sin indicar la fuente.
Ten en cuenta las licencias
La mayoría de estas páginas de iconos gratis únicamente existen porque los diseñadores donan sus trabajos para que otras personas hagan uso de ellos. ¡Gracias por ello!
Sin embargo, esto significa que algunos ponen a disposición iconos gratis para su descarga siempre que menciones al artista en tu página web e incluyas un enlace al sitio de donde has obtenido el icono. Algunas plataformas se conforman con una pequeña mención en el pie de página, pero otras requieren una mención más visible justo debajo del icono. Lee la letra pequeña, porque algunos iconos están disponibles para su uso en páginas web, pero no puedes utilizarlos como logo empresarial o en productos de marketing.
Cómo añadir el icono a tu página web
Con Jimdo, siempre puedes añadir un icono donde puedas subir una imagen. Simplemente cárgalo a tu galería y después selecciónalo desde un bloque de imagen. Puedes utilizar el icono como una imagen, un fondo o un vínculo. Para más ideas e instrucciones, lee nuestro artículo cómo personalizar el diseño de tu página web
Nota: Si tienes Jimdo Creator, podrás colocar tus iconos al lado del texto con el elemento imagen y un elemento columna.
Consejos para usar iconos en tu página web correctamente
Utiliza los símbolos habituales. Esta es una de las áreas donde querer innovar no es la mejor idea. Elige iconos que sean obvios y conocidos, especialmente si un icono es direccional, es decir, si alguien tiene que entenderlo o hacer clic en él. Si solo es decorativo, tienes algo más de libertad, pero procura no pasarte. Mezclar el significado de los iconos o confundir a las personas con iconos al azar es un error común de experiencia de usuario que cometen las personas al diseñar sus propias páginas web.
Acompaña el icono con texto si el significado no es 100% claro. No todo el contenido de tu web va a tener un icono que lo represente a la perfección. Por ello, si crees que puede resultar confuso, es una buena idea añadir un poco de texto al icono. Con ello, también lograrás que personas con discapacidades que les impidan ver los iconos puedan acceder al contenido de tu web. Lo más importante por tener en cuenta en cuestión de iconos es que están pensados para complementar tu contenido, no para sustituirlo.
Prueba los iconos con los visitantes de tu página web. Un icono que resulta obvio para ti puede no serlo tanto para otra persona. Por esta razón, siempre recomendamos hacer algunos test básicos de usabilidad con tu página web, lo que se traduce básicamente en conseguir algunos voluntarios para ver cómo se manejan con tu web y ver si se quedan atascados o no entienden algo. Con esto sabrás si las personas están comprendiendo tus señales correctamente.
Mantén la coherencia con tus iconos. Los iconos cumplen mejor su función si tienen todos el mismo estilo. Esto es lo que les da el toque profesional y pulido. Por tanto, cuando emplees iconos en tu web, el tamaño, el color y el estilo deben ser los mismos para todos. (Por suerte, la mayoría de las plataformas de iconos ofrecen los iconos más utilizados en un set, por lo que no hay que estar buscando en diferentes partes ni mezclarlos). Y ten en cuenta la colocación; es decir, si decides añadir texto a la derecha, izquierda, abajo o arriba de los iconos, que sea siempre de la misma manera.
No abuses de los iconos. Una vez que te das cuenta de lo fácil que es utilizar un icono, puede resultar tentador ponerlos por toda tu página web. Simplemente recuerda que, como en la mayoría de los casos, las cosas es mejor usarlas con moderación. De lo contrario, tu web puede acabar siendo confusa y desorganizada.
También puedes crear tus propios iconos
Como hemos dicho antes, es mejor utilizar iconos que las personas ya conocen. Sin embargo, si no has encontrado el icono que estabas buscando en ninguna de las plataformas, puedes crear el tuyo propio. Aquí te damos algunas ideas para ello:
- ¿Quieres utilizar tu propio logo como icono? Si has utilizado el Logo Creator de Jimdo, por ejemplo, puedes añadir este logo como una parte decorativa de tu página web. Echa un vistazo a esta guía sobre cómo personalizar el diseño de tu página web.
Diseña un logo para que tu empresa destaque.
- ¿Quieres crear un icono a partir de una foto? Aquí tienes un tutorial sobre cómo editar fotos sin Photoshop que puede ayudarte.
- ¿Quieres hacer algo único? Quizás sea el momento de trabajar con un diseñador profesional. Una persona experta puede diseñar algo muy definido, pero que se sienta especial. Puedes contactar con un diseñador directamente buscando en Google, a través de LinkedIn o mediante plataformas de diseño como Behance, Dribbble, y 99designs.
¿Ganas de probar los iconos en tu web?
Los iconos son una forma sencilla pero efectiva de hacer tu página web intuitiva y recordable. Simplemente procura elegir un icono que comunique claramente el mensaje y complemente el texto sin olvidar los cuatro factores principales: tamaño, color, ubicación y coherencia. Prueba con algunos de los iconos de los sitios mencionados y ¡diviértete!