Herramienta de favicons - Guía

La herramienta de favicons convierte una imagen, también una generada con IA, en todos los archivos de favicon que necesita tu sitio web.

Formas de generarlos

Hay dos caminos:

1. Flujo de subida: sube tu propia imagen y genera los favicons
2. Flujo de IA: crea una imagen a partir de un prompt o una URL y genera los favicons con ella

Requisitos

Lo mejor es una imagen cuadrada con un motivo claramente reconocible. A partir de 512×512 píxeles es utilizable, y más grande no hace daño.

Opción A: flujo de subida

1. Abre la herramienta de favicons
2. En Subir imagen, elige tu logotipo
3. Haz clic en Generar favicons
4. Después descarga el ZIP o los archivos por separado

Opción B: flujo de IA

1. Abre el área Generación de imágenes con IA a la derecha de la herramienta
2. Introduce un prompt o una URL rastreada
3. Haz clic en Generar imagen con IA
4. Revisa la vista previa y haz clic en Usar imagen
5. SEOFuxx crea los favicons a partir de ella

Archivos que se generan actualmente

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png
• favicon-48x48.png
• apple-touch-icon.png
• android-icon-192x192.png
• android-icon-256x256.png
• android-icon-512x512.png
• badge-72x72.png
• maskable_icon.png
• push-192x192.png

Integración en el HTML

Estas etiquetas deberían estar como mínimo en el <head>:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Comprobar tras la integración

Vacía la caché del navegador, recarga la página y mira el icono de la pestaña. En el móvil conviene echar un vistazo también a la visualización.

Problemas frecuentes

El favicon no se actualiza

• Haz una recarga forzada (Ctrl+F5)
• Prueba tambien en una ventana de incógnito
• Vacía la caché del CDN o del servidor, si usas alguno

La imagen de IA no encaja

• Formula el prompt con más precisión
• Prueba con otra URL rastreada
• Genera una imagen de IA nueva y usa esa en su lugar