Cómo crear un favicon desde un logotipo: tamaños, formatos y lista de control
Crea un favicon nítido desde tu logotipo, elige tamaños SVG, PNG e ICO adecuados y evita detalles que desaparecen en la pestaña del navegador.
Respuesta rápida
Para crear un favicon desde un logotipo, utiliza su elemento más reconocible, colócalo en un lienzo cuadrado, elimina el texto pequeño y pruébalo a 16 y 32 píxeles. Empieza con el generador de favicon y conserva un SVG maestro junto con versiones PNG.
Elegir una marca que funcione en pequeño
Un logotipo horizontal suele quedar ilegible en una pestaña. Es mejor usar el símbolo, un monograma o una letra gruesa. Mantén contraste y espacio libre. Si solo tienes una imagen borrosa, vectoriza primero el logotipo para conservar curvas limpias.
| Origen | Tratamiento recomendado | Problema habitual |
|---|---|---|
| Símbolo y nombre | Usar solo el símbolo | El texto se convierte en una línea |
| Monograma | Centrar una o dos letras | Desaparecen los trazos finos |
| Ilustración detallada | Reducir a una silueta | Las formas se unen |
| Logo transparente | Probar sobre claro y oscuro | Falta contraste |
Crear los archivos
- Usa un lienzo cuadrado 1:1.
- Elige transparencia o un fondo intencionado.
- Revisa 16, 32 y 48 píxeles.
- Exporta SVG y PNG de respaldo, por ejemplo 48, 192 y 512 píxeles.
- Añade el enlace al head y mantén estable la URL.
Google exige una forma cuadrada y recomienda una fuente mayor de 48 por 48 píxeles. Consulta la guía oficial de Google.
Lista de control
- La forma principal se reconoce a 16 píxeles.
- No queda ningún eslogan pequeño.
- Los bordes transparentes están limpios.
- Funciona con temas claros y oscuros.
- La URL es pública, rastreable y estable.
- El SVG está optimizado sin perder su viewBox.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
Usa un maestro escalable y prueba 16 y 32 píxeles. Para Google debe ser cuadrado y tener al menos 8 por 8 píxeles; se recomienda superar 48 por 48.
¿Conviene SVG, PNG o ICO?
SVG es nítido en navegadores modernos, PNG sirve como respaldo e ICO cubre sistemas antiguos. Un conjunto práctico puede incluir los tres.
¿Puedo usar el logotipo completo?
Solo si sigue siendo reconocible en una pestaña. Para marcas horizontales suele funcionar mejor el símbolo o las iniciales.