Convierte Tu Logo En Un Favicon
Tu logo tiene un logotipo, un símbolo y detalle fino. Con 16 píxeles de ancho, solo uno de ellos sobrevive. Elígelo deliberadamente antes de exportar nada.
Por qué el logo completo falla
Un favicon se renderiza tan pequeño como 16 píxeles de ancho. Un logo completo con un logotipo y detalle fino se convierte en una mancha gris a ese tamaño: el texto queda ilegible y el detalle colapsa en un amasijo.
La solución es tratar el favicon como su propio recurso derivado del logo, no el logo en sí. La mayoría de los favicons fuertes son un símbolo, un monograma o una única letra, porque es lo único que sobrevive al tamaño de pestaña.
Del logo al favicon
- 1
Extrae un elemento
Toma el símbolo de tu logo, o una única inicial si tu logo es un logotipo. Descarta el texto y cualquier cosa decorativa.
- 2
Simplifica hasta que se lea en pequeño
Elimina líneas finas, degradados y detalle interno. Busca una única forma contundente con alto contraste contra su fondo.
- 3
Diseña primero en el tamaño más pequeño
Haz zoom a 16x16 y hazlo legible ahí. Si funciona a 16 funciona en todas partes. Ampliar un diseño pequeño es fácil; lo contrario no.
- 4
Dale un fondo si hace falta
Una marca compacta suele leerse mejor sobre un fondo sólido o ligeramente espaciado que flotando de borde a borde. Esto también ayuda al apple-touch-icon, que iOS rellena sobre negro.
- 5
Exporta el conjunto completo
Genera el favicon.ico, los PNG y el apple-touch-icon a partir de la marca final para que cada tamaño provenga del mismo arte limpio.
Reglas de diseño que sobreviven al encogimiento
Alto contraste primero. La marca necesita separarse con fuerza de su fondo, porque los cambios tonales sutiles desaparecen en tamaños pequeños. Primer plano contundente, fondo simple.
Una forma, no tres. Un favicon que se lee como una única silueta funciona. Amontona varios elementos y se fusionan en ruido. Si dudas entre dos ideas, publica la más simple.
Vigila el espacio negativo. Los huecos finos entre formas se cierran a 16 píxeles y la marca se rellena en un borrón. Da espacio a las formas, o engrósalas para que los huecos permanezcan abiertos.
Preguntas frecuentes
¿Puedo usar mi logo como favicon?
No el logo completo. Extrae el símbolo o una única inicial y simplifícalo hasta que se lea a 16 píxeles, luego exporta el conjunto de favicon a partir de eso. Un logotipo completo se convierte en un amasijo en la pestaña.
¿Cómo hago un favicon a partir de un logo?
Toma un elemento del logo, quita el detalle fino, ajústalo a 16x16 para legibilidad, añade un fondo si la marca es compacta, luego genera cada tamaño de favicon a partir del arte final.
¿Por qué mi logo se ve borroso como favicon?
Tiene demasiado detalle para 16 píxeles. Las líneas finas, el texto y los degradados colapsan a ese tamaño. Simplifica a una única forma contundente y de alto contraste.
¿En qué tamaño debo diseñar un favicon?
Diseña primero en el tamaño más pequeño, 16x16. Si la marca se lee ahí, se lee en cada tamaño mayor. Ampliar un diseño pequeño y limpio es seguro; encoger uno detallado no lo es.