Desde una imagen, un texto o un emoji. Te entrega el favicon.ico, todos los PNG que hacen falta, el manifest y el HTML listo para pegar.
¿De qué lo hacemos?
Sube tu logo en PNG o SVG. Lo mejor es una imagen cuadrada con el símbolo solo, sin el texto de la marca.
Con una o dos letras funciona mejor. Tres ya se ve apretado a 16 píxeles.
Forma
Así se ve en la pestaña
Incluye favicon.ico, los PNG de 16, 32, 48, 180, 192 y 512, el site.webmanifest y un léeme con las instrucciones.
Qué archivos hacen falta de verdad en 2026 y por qué tu logo completo no funciona como icono.
Es el error más repetido. Un logo horizontal con el nombre de la empresa, reducido a 16 píxeles, se convierte en una mancha gris ilegible. A ese tamaño no se distingue una letra.
Lo que funciona es el símbolo solo, sin texto. Si tu marca no tiene símbolo, usa la inicial en una tipografía gruesa sobre un fondo de color sólido con mucho contraste. Eso se reconoce incluso de reojo entre veinte pestañas abiertas.
Por eso esta herramienta te muestra la vista previa al tamaño real y no ampliada. Si a 16 píxeles no se entiende, no lo publiques.
| Archivo | Para qué |
|---|---|
| favicon.ico | Compatibilidad. Muchas herramientas lo piden en la raíz sin leer tu HTML |
| favicon-32.png | El que ve la mayoría en la pestaña del navegador |
| apple-touch-icon.png | Cuando alguien guarda tu sitio en la pantalla de inicio de un iPhone |
| icon-192.png | Android y aplicaciones web instalables |
| icon-512.png | Pantalla de carga al instalar la aplicación web |
| site.webmanifest | Nombre, colores e iconos cuando se instala tu sitio |
Las guías viejas pedían veinte o treinta tamaños distintos, con archivos para Windows Tiles y navegadores que ya no existen. Hoy con estos seis quedas cubierto.
Vas a obtener los archivos de iconos, el manifest y un léeme con estas mismas instrucciones.
La misma carpeta donde vive tu página de inicio. En cPanel suele llamarse public_html. No los metas en una subcarpeta de imágenes.
Copia el bloque de HTML que aparece a la derecha y pégalo dentro de la sección head de todas tus páginas. En WordPress va en el archivo header.php de tu tema hijo, o desde las opciones del tema.
Los navegadores guardan el favicon con mucha insistencia. Si no aparece, agrega ?v=2 al final de las direcciones o abre el archivo directo en una pestaña y recarga.
Sí, conviene tenerlo. Los navegadores modernos prefieren los PNG que declaras en el HTML, pero muchas herramientas y buscadores piden directamente tudominio.com/favicon.ico sin leer tu HTML. Es un archivo pequeño y te evita errores 404 constantes en el registro del servidor.
Los navegadores lo guardan en caché de forma muy agresiva, a veces por semanas. Agrega una versión al final, como favicon.ico?v=2, o abre el archivo directo en una pestaña y recarga con la caché desactivada.
No. Todo se genera dentro de tu navegador con la API de Canvas. La imagen que subes nunca sale de tu equipo.
El favicon es el detalle que hace ver profesional un sitio. El dominio propio es el que lo hace creíble.
