Ya tienes un logo. Lo que necesitas es ese logo convertido en el montón de archivos de icono diminutos que un navegador espera — un favicon.ico, un puñado de PNG a tamaños concretos, un web manifest y el HTML para conectarlo todo. Esa conversión es mecánica, y puedes hacerla en aproximadamente un minuto sin instalar nada.
La pega es que no todos los logos se reducen con gracia. Así que esto cubre tanto la vía rápida como cómo arreglar un logo que se convierte en papilla a 16 píxeles.
La versión corta
- Consigue tu logo como una imagen cuadrada — idealmente 512×512 o más grande, sobre un fondo transparente o sólido.
- Suéltalo en el Generador de favicon.
- Descarga el conjunto generado y suelta los archivos en la raíz de tu sitio.
- Pega el fragmento HTML proporcionado en tu
<head>.
Ese es todo el trabajo. El generador produce favicon.ico, PNG a 16, 32, 48, 180, 192 y 512, un webmanifest y las etiquetas <link> exactas — así que no estás recortando a mano seis imágenes ni adivinando la sintaxis del manifest.
Prepara tu logo primero — aquí es donde se gana o se pierde la calidad
Un favicon vive a 16×16 en la pestaña del navegador. Cualquier detalle que no pueda sobrevivir a ese tamaño está desperdiciado. Dedica dos minutos aquí y el resultado se ve nítido en todas partes.
Hazlo cuadrado. Los favicons son cuadrados. Un logo ancho y horizontal quedará con franjas o aplastado. Recorta al elemento más reconocible — normalmente la marca o una sola inicial — y céntralo en un encuadre cuadrado.
Quita el logotipo de texto. El nombre completo de tu empresa no será legible a tamaño de pestaña. "Acme Corporation" se convierte en un borrón gris. Conserva el símbolo, o una sola letra, y deja que el título de la pestaña cargue con el nombre.
Comprueba el contraste contra ambos temas. Las pestañas del navegador vienen en claro y oscuro. Un icono azul marino oscuro se desvanece en una pestaña oscura; un icono pálido se desvanece en una clara. Si tu marca es de un color plano, asegúrate de que ese color se lea en ambos. Un contorno sutil o una pequeña ficha de fondo sólido pueden ayudar.
Deja espacio para respirar. Añade un poco de margen dentro del cuadrado para que el icono no se apretuje contra los bordes. Se verá más equilibrado en cada hueco.
Empieza grande. Una fuente de 512×512 (o más grande) le da al generador detalle limpio desde el que reducir. Ampliar un logo diminuto primero solo deja el desenfoque cocido dentro.
¿Fondo transparente o sólido?
Ambos funcionan — depende del aspecto que quieras.
- Transparente deja que el fondo de la pestaña o de la pantalla de inicio se transparente. Limpio y moderno, y se adapta a los entornos claros/oscuros. Mejor cuando tu marca es una forma diferenciada.
- Ficha de fondo sólido (un cuadrado redondeado de color detrás de la marca) garantiza que el icono se lea sin importar lo que haya detrás. Esto es lo que hacen la mayoría de los iconos de app, y es la opción más segura si tu logo es fino o de bajo contraste.
En caso de duda, una ficha sólida en el color de tu marca es la opción robusta — nunca desaparece en un fondo a juego.
Después de descargar: dónde van los archivos
El generador te entrega un conjunto de archivos y un fragmento. Dos reglas de colocación lo cubren:
favicon.icova en la raíz de tu sitio (/favicon.ico). Los navegadores y Windows lo buscan ahí por su nombre incluso sin una etiqueta<link>.- Todo lo demás puede vivir donde quieras siempre que las rutas del fragmento HTML coincidan. La mayoría de la gente los suelta todos en la raíz y pega el fragmento tal cual.
Luego solo queda el fragmento del <head> — los enlaces de icono, el apple-touch-icon y la referencia al manifest. Pega, despliega, haz una recarga forzada, y deberías ver tu logo en la pestaña.
¿Por qué hacerlo en el navegador?
Porque tu logo nunca sale de tu máquina. Todo el proceso — leer la imagen, redimensionar a cada dimensión, empaquetar el .ico, escribir el manifest — ocurre localmente en tu navegador usando Canvas. Nada se sube a un servidor, no hay registro ni marca de agua, y tras tu primera visita la herramienta funciona sin conexión. Para un recurso de marca que quizá aún no hayas publicado, mantenerlo fuera de servidores de terceros es lo sensato por defecto.
Una vez que tu logo es cuadrado, de alto contraste y legible en pequeño, generar el conjunto completo es la parte fácil.