Sube una imagen y genera un paquete completo de favicon — ICO, PNG, Apple Touch Icon, íconos Android Chrome, site.webmanifest y código HTML listo para copiar. Todo en tu navegador.
🎨
Suelta tu logo o ícono aquí
o haz clic para explorar · JPG, PNG, WebP, SVG · Se recomienda imagen cuadrada
¿Qué Es un Favicon?
Un favicon es el pequeño ícono que se muestra en las pestañas del navegador, marcadores, historial y pantallas de inicio de dispositivos móviles. Ayuda a los usuarios a identificar tu sitio web de un vistazo. Los sitios web modernos necesitan múltiples tamaños y formatos de favicon para verse bien en todos los navegadores, sistemas operativos y dispositivos.
Archivos Completos de Favicon Explicados
favicon.ico — Un archivo ICO multi-tamaño que contiene íconos de 16×16, 32×32 y 48×48 píxeles. Necesario para compatibilidad con navegadores antiguos e íconos de la barra de tareas de Windows.
favicon-16x16.png y favicon-32x32.png — Favicons PNG estándar usados por navegadores modernos para barras de marcadores y pestañas del navegador.
apple-touch-icon.png — Un PNG de 180×180 píxeles usado por iOS Safari cuando los usuarios agregan tu sitio a su pantalla de inicio.
android-chrome-192x192.png y android-chrome-512x512.png — Íconos PNG usados por Android Chrome para accesos directos en la pantalla de inicio y pantallas de bienvenida de PWA.
site.webmanifest — Un archivo JSON que indica a los navegadores información sobre tu aplicación web, incluyendo rutas de íconos, color del tema y modo de visualización.
Cómo Agregar Favicons a Tu Sitio Web
1. Descarga el ZIP y extrae todos los archivos en el directorio raíz de tu sitio web. 2. Copia el fragmento de código HTML y pégalo en la sección <head> de cada página. 3. Despliega tu sitio y prueba verificando el ícono en la pestaña del navegador. La mayoría de los navegadores también detectan automáticamente favicon.ico en el directorio raíz.
Imagen Fuente Recomendada
Para mejores resultados, usa una imagen cuadrada de al menos 512×512 píxeles. El formato PNG con fondo transparente es ideal. Los diseños simples con formas audaces y alto contraste se ven mejor — las fotos complejas se vuelven irreconocibles en tamaños pequeños como 16×16.
Preguntas Frecuentes
¿Qué archivos incluye un paquete completo de favicon?▸
Un paquete completo incluye favicon.ico (multi-tamaño para navegadores antiguos), favicon-16x16.png y favicon-32x32.png para navegadores modernos, apple-touch-icon.png (180×180) para iOS, android-chrome-192x192.png y android-chrome-512x512.png para Android, y site.webmanifest para soporte PWA — 7 archivos en total.
¿Qué es apple-touch-icon.png?▸
Es una imagen PNG de 180×180 píxeles usada por iOS Safari cuando un usuario agrega tu sitio web a su pantalla de inicio. Sin él, iOS toma una captura de pantalla de tu página. Colócalo en el directorio raíz de tu sitio y referencíalo con una etiqueta link en el head de tu HTML.
¿Qué es site.webmanifest?▸
site.webmanifest es un archivo JSON que proporciona metadatos sobre tu aplicación web al navegador. Define rutas de íconos, colores de tema y modo de visualización para Aplicaciones Web Progresivas (PWAs). Los navegadores lo usan para configurar el ícono de la pantalla de inicio y la pantalla de bienvenida en dispositivos Android.
¿Qué código HTML necesito para los favicons?▸
Necesitas cuatro etiquetas link en el head de tu HTML: una para apple-touch-icon (180×180), una para favicon-32x32.png, una para favicon-16x16.png y una para el manifiesto web. Nuestra herramienta genera el fragmento HTML exacto que puedes copiar y pegar directamente.
¿Cuál es el mejor tamaño de imagen fuente para un favicon?▸
Usa una imagen cuadrada de al menos 512×512 píxeles. PNG con fondo transparente funciona mejor. Los diseños simples con formas audaces y alto contraste se ven bien en tamaños pequeños. Evita fotos o ilustraciones complejas ya que se vuelven irreconocibles a 16×16 píxeles.
¿Necesito tanto ICO como PNG para favicons?▸
Sí, para máxima compatibilidad. El formato ICO es necesario para navegadores antiguos, Internet Explorer y la barra de tareas de Windows. Los favicons PNG son usados por navegadores modernos como Chrome, Firefox y Safari. Incluir ambos asegura que tu favicon se muestre correctamente en todas partes.
¿Este generador de favicon es gratis?▸
Sí, completamente gratis sin límites, sin marcas de agua y sin necesidad de registro. Todo el procesamiento ocurre completamente en tu navegador. Tus imágenes nunca se suben a ningún servidor, garantizando completa privacidad y resultados instantáneos.
¿Puedo usar una fotografía como favicon?▸
Técnicamente sí, pero los íconos simples y logotipos funcionan mucho mejor. Las fotografías pierden detalle cuando se escalan a 16×16 o 32×32 píxeles y se vuelven difíciles de reconocer. Para mejores resultados, usa un gráfico simple con formas audaces, mínimo detalle y colores de alto contraste.