Mostrando entradas con la etiqueta perfecto. Mostrar todas las entradas
Mostrando entradas con la etiqueta perfecto. Mostrar todas las entradas

22 octubre 2021

Cómo crear un favicon perfecto para tu marca

Descubre cómo crear y utilizar el favicon de tu marca



Generar un favicon con plantilla de Illustrator

Los favicon son una parte integral de una marca y aseguran que un sitio web, sea inmediatamente reconocible en los navegadores y aplicaciones de cualquier dispositivo.

Los consumidores tienen un concepto sobre los productos o servicios de una empresa que identifican y diferencian, de otros iguales o parecidos, gracias a la identidad de marca, representada visualmente por un logotipo.
Dicho esto, un logotipo es algo más que un punto de referencia visual en la esquina superior izquierda de un sitio web.

Los favicon son logotipos miniaturizados que establecen la identidad de una marca fuera de su sitio web y permiten mantener una presencia visual constante en lugares como:

  • Pestañas de navegadores
  • Barras de direcciones URL
  • Marcadores del navegador
  • Historiales de búsqueda en Internet
  • RSS Feeds
  • Pantallas de inicio móviles y de escritorio
  • Iconos de aplicaciones

A diferencia de las imágenes destacadas que Google, las redes sociales o los agregadores de RSS pueden seleccionar y usar en las publicaciones, no se puede seleccionar un favicon. Si no diseña y carga un favicon, aparecerá un marcador de posición genérico. 

¿Qué es un favicon?

Favicon es la abreviatura del inglés "Favorite Icon" (icono favorito). El favicon fue introducido
en Internet Explorer a finales de la década de 1990. Su propósito es ayudar a los usuarios a encontrar y distinguir rápidamente los distintos sitios web abiertos en las pestañas del navegador.


¿Por qué es importante tener un favicon en un sitio web?

Reforzar la identidad de marca

Los sitios web que no tienen favicon mostrarán un icono genérico en las pestañas del navegador, historiales de búsqueda, feeds RSS y demás: (Firefox, Google, Microsoft Edge)



Es un icono de globo genérico. Y los usuarios de Internet puede que no conozcan el término "favicon", pero entenderán que falta algo si ven esto. 
Puede que no parezca gran cosa pero los usuarios notarán este nivel de atención al detalle.


Ahora, si miras en la pestaña de tu navegador arriba, verás un ejemplo del favicon de este blog que es el icono del logotipo. Los favicon son una pieza valiosa para un sitio web y su marca.

Los sitios web que no tienen favicon se considerarán poco profesionales.

Mejorar la navegabilidad por Internet 

El ejemplo anterior muestra la diferencia en el aspecto de una pestaña con o sin favicon. 
Pero no se trata solo de marcar una pestaña. Así es como los usuarios de Internet pueden navegar rápidamente de regreso a un sitio web, gracias a la referencia visual de un favicon. 
Cada pestaña abierta (Facebook, Gmail, Blogger, etc) tiene su favicon fácilmente reconocible.





El favicon evita que los usuarios tengan que leer los metatítulos en las pestañas del navegador. Como otros iconos y logotipos que usamos en los sitios web, el favicon le dice visualmente a los usuarios qué sitio web es cada ventana abierta del navegador. Muy útil, sencillo y efectivo.


Incrementar el reconocimiento de la marca

Crear un favicon fortalecerá el reconocimiento de marca de la audiencia. 

Por ejemplo, el favicon de Google es una "G" con los colores de su marca.

El favicon tiene un fondo de relleno sólido (a diferencia de uno transparente), por lo que la "G" de colores con fondo blanco es estético y además rápido y fácil de reconocer.

Las personas familiarizadas con la marca Google, reconocerán al instante este favicon en cualquier lugar donde lo encuentren. 
Por ejemplo, aparece en las lista de lector de Feeds, en los marcadores de favoritos del navegador, en 
el historial de Internet y no sólo en el navegador de escritorio, el favicon se muestra en las listas de marcadores de los Smartphone. 

Además, desde mayo de 2019, Google muestra un favicon en la página de resultados de búsqueda móvil (SERP). Al implementar un Favicon en su sitio web, sus resultados de búsqueda móvil serán más visibles, lo que puede resultar en una tasa de clics más alta.


Consejos para crear el favicon perfecto para tu marca

Se puede creer que con una versión redimensionada del logotipo ya es suficiente, esto no resultaría bien para un favicon, hay unos detalles a tener en cuenta.

1. Elegir un elemento destacable y reconocible de la marca.

Para algunas marcas, se podría utilizar el diseño del logotipo tal cual. 

ej. Apple con su manzana: 


Para las marcas que incluyen un texto con el nombre comercial y/o un eslogan, tienen que simplificarlo y diseñar algo especifico para el favicon. 

Gmail, por ejemplo, usa el icono M: 


2. Mantener una marca coherente pero simplificada

Obviamente, quieres que tu favicon sea reconocido y relacionado con tu marca. Debes usar tipografía, iconos y colores coherentes con tu identidad de marca.

Dicho esto, no querrás exagerar. Tu favicon cabe en un espacio muy pequeño, por lo que hay que tener cuidado con recargar el diseño.

Mira los favicon de otras marcas que te gustan y toma inspiración de ellas.



3. Decidir usar fondo transparente o relleno de color

Los favicons transparentes suelen ser para diseños basados ​​en iconos como el de Asana:


Uno de los beneficios de esto es que el icono se destaca claramente sobre el color de su fondo. 

El ejemplo anterior está en Chrome. Este ejemplo es de Safari:


Si se hubiera olvidado de guardar su favicon con un fondo transparente, habría un cuadro blanco antiestético a su alrededor en esta pestaña del navegador. 

Los favicons de relleno sólido son los mejores para los favicons basados ​​en letras como los de Stripe:



4. Diseña el favicon en varios tamaños estándar

Los favicon aparecen en distintos tamaños según la plataforma. Pueden ser tan pequeños como 16×16 píxeles, como 64×64 píxeles y más... En WordPress el editor recomienda un tamaño de 512×512px. 



El tamaño medio de los favicon de aplicaciones o accesos directos es de 152×152 px, pero puede llegar a 192×192 píxeles si desea ajustarlos exactamente para tabletas Android. 

Esta es, además, otra razón por la que un diseño más simple es mejor. Nunca se sabe cuánto necesitará aumentar o reducir su favicon.


5. Guardar el icono en varios formatos

Aunque los navegadores más populares han comenzado a aceptar favicon en otros formatos además de ICO, no todos tienen soporte universal. 

ICO y PNG disfrutan de soporte universal en las últimas versiones de cada navegador. Si bien GIF también lo hace, en realidad no es la opción ideal para un favicon. 

Criterios de diseño nos dice que hay que diseñar primero para el usuario y su experiencia libre de distracciones. Un favicon de navegador animado no es recomendable.

Si bien es posible que esté pensando en usar PNG, ya que es un formato más común, ICO es su mejor opción. Eso es porque puede guardar una o más imágenes, en diferentes tamaños y diferentes resoluciones, dentro de un solo archivo que es la forma más fácil de generar todas las instancias de favicon a la vez.

Para esto lo mejor es un archivo de plantilla para editar, aquí dejo un enlace a una plantilla para generar el icono en distintos tamaños cómodamente. Editando el diseño de la mesa principal se modifica el diseño en las demás mesas de trabajo preparadas para exportar el archivo automáticamente en varios tamaños.

Descargar plantilla generador de favicon para Illustrator





Post Labels

WordPress macOS Linux diseño gráfico Error color plantilla CentOS 7 Plesk PHP RGB SSH Servidor Windows XAMPP aplicación web colores gratis logo pantone sitio web video Edición de Vídeo Plugin Recursos Solución SysAdmin acceso diseño diseño web edición editar imagen mac nube página web sistema software software libre tamaño 2020 Audiovisuales CMS CentOS 6.9 Google HEX HTML PHP.INI Puertos URL actualización actualizar ai aplicaciones aplicación aspecto básicos certificado comercio electrónico conexión corazón desarrollo web emails emotiva flores footer fotografía frase functions.php gratuito iMac illustrator imagenes login mantenimiento mapas motivación online optimización página rendimiento tema texto velocidad verano web $cfg .new 1 TB 1&1 2021 2022 21.5 22 2D 3D 500GB 6.4.3 A0 A1 A2 A3 A4 A5 A6 A7 A8 Abierto AfterEffects Alexa Amazon COVID-19 Captura Videojuegos Capturar Pantalla Capturar Vídeo y Audio Cheat Sheet Classic Blue CleanMyPC Cloud Cloud Server Coronavirus Código Código Abierto DIN Daylimotion Developer ELRepo ETIMEDOUT Grabación de Vídeo Guía H1 Herramientas Hoja de Referencia Homebrew Huawei I+D Illuminating Javascript Kernel LMS Live Streaming MIME Mail MySql NPM Núcleo OPPO Onyx PEAR PH Permisos Productos SEM SSL Terminal Tutoriales UX Ultimate Grey Videotutoriales Web Services WooCommerce Xiaomi abuelos accesibilidad activado admin adminiración adolfo agencia agua almacenamiento alt altura amor ampliar ancho animacionlogo app apple apps aprende archivo archivos arranque arte ataque ataques atico auriculares axioma año banco banners barcos basic 2 becquer beneficios bing bitcoin blog bodas booteable buscadores calendario caminando cancion captura de pantalla cara carpeta casa chmod cliper comandos conexion configuración contacto contraseña control convertir copywriter corazones correo cortar crear cuenta curso cámara reflex código libre das depurado derrotas desarrollo aplicaciones descargar deseo desintalar dibujo direccion disco SSD distro dns domina dominio don quijote dos mil doubleclick duda editor email encriptar esfuerzo español esquema de colores estudio estándar examina exposición familia favicon fecha filezilla formación formato formulario fracasos ftp fuentes fuerza bruta funcion función git golosina googleads grado gratuita gráficos guerrero gustavo h2 hacemos herramienta hijos hotel http https humano humanos icono iconos ideas inaccesible incertidumbre indispensables inspiración instagram instalar internet invalid inversión j balvin jeff bezos jscomposer karol g keyworks largo plazo launchpad libre liderazgo limpieza lirios living coral logoanimation límite lógica manual manzanita mar marinero marketing online medidas mejorar memoria metaetiquetas mi miel migrar miro modificar modificar.cambiar modo moscas motivadora mover mp3 mp4 mueren mujer mundo musical más móviles neón ni contigo ni sin ti nicky jam nietos node.js nulled oficina olas omnivus opensource optimista optimizar padres palabras clave paleta panal pantallas pantallazo panza papel pareado particion partición pastel pc pegar penthouse perfecto personalización personalizado personalizar personas pesca petunia photoshop phpMyAdmin pie de página planos poblado poderoso poesía posible posicionamiento preferido prestaciones prisiones privacidad privada privado programas proporcional protocolo publisites quijote rechazado redactium redactor de contenidos reflexión reggaeton relacion relación remitente remix resolución restablecer resurgir rosas rápido samsung sancho screenshot sea seguridad seguro sentimientos seo ser servicios simulador sistemas slider revolution smartphone smtp snapshot spam subida tablets temp dir tendencia terabox titulo tmp trabajo txt título ubuntu unidad usb utilidad vacío vectoriales vencer ventas veo versiones verso very peri vicio videologo videos webp www youtube éxitos