WordPress y Divi

El ícono que sale en la pestaña del navegador mide dieciséis píxeles. Es más chico que esta letra. Y ahí es donde casi todo el mundo pone su logotipo completo — con el nombre, el eslogan y a veces el giro — que a ese tamaño se convierte en una mancha de color sin forma.

Qué pasa realmente a ese tamaño

Dieciséis píxeles de lado dan un cuadrito diminuto. Un logotipo de cuatro palabras necesitaría que cada letra midiera menos de un píxel de ancho. No es que se vea mal: es que no se ve, y el cerebro de quien tiene catorce pestañas abiertas no tiene de dónde agarrarse para encontrarte.

Ese mismo archivo se usa además cuando alguien guarda tu sitio en la pantalla de su teléfono y cuando lo agrega a favoritos. Son justo los momentos en que quieres ser reconocible de un vistazo.

La solución: quédate con una sola cosa

Hay que reducir la marca a un solo elemento: una inicial, dos letras, un símbolo. No es hacer un logotipo nuevo — es escoger la parte que ya es tuya y que sobrevive al tamaño. Con contraste alto y sin detalles finos.

Y hay que darle aire. Un elemento que toca los bordes del cuadro se ve apretado y pierde forma. Un margen de alrededor del diez por ciento por lado hace más diferencia que cualquier otro ajuste.

La prueba que casi nadie hace

Juzgar el ícono mirándolo grande en la computadora es el error de origen. Hay que verlo al tamaño real, y sobre los dos fondos donde va a vivir: la barra clara de un navegador en modo día y la oscura en modo noche. Un ícono de letras oscuras desaparece en modo noche, y nadie se entera porque quien lo diseñó trabaja en modo día.

La regla que quedó

Si no se reconoce a dieciséis píxeles, no es un ícono: es un logotipo encogido.

Son dos piezas distintas de la misma marca, y una no sustituye a la otra.

Cómo hacer el tuyo

  • Escoge el elemento de tu logotipo que funcione solo. Si tu marca no tiene ninguno, la inicial en tu tipografía y tus colores funciona perfectamente.
  • Arma un cuadrado de 512 píxeles con ese elemento centrado y con margen. WordPress genera solo los tamaños chicos a partir de ése.
  • Míralo encogido antes de subirlo. Reduce la imagen al diez por ciento en tu computadora: si a ese tamaño lo reconoces, ya está.
  • Súbelo en Apariencia → Personalizar → Identidad del sitio, en «Icono del sitio». Desde ahí WordPress lo usa en todos lados.