FailX
Todas las herramientas

Especiales FailX

Dinero para niños

Juegos

Utilidades

Documentos

Imagen

Calculadoras

Texto

Generador de favicon

Crea un favicon a partir de letras, un emoji o una imagen. Descarga de una vez favicon.ico, iconos para Apple y Android, el manifiesto web y las etiquetas HTML.

Forma

Vista previa

Mi sitio

Se muestra a tamaño real: 16, 32, 48 y 180 px. Comprueba que se distingue bien a 16 px.

El ZIP contiene: favicon.ico (16, 32, 48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-tags.html

Etiquetas para el <head> de tu HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Sube los archivos a la raíz de tu sitio (p. ej. https://tu-dominio/favicon.ico) y añade estas etiquetas al <head> de cada página.

Todo se procesa en tu navegador. No se envía nada a nuestros servidores.

Guía

Puntos clave

  • Crea un paquete completo de favicons para navegadores, iPhone y Android a partir de texto, un emoji o una imagen.
  • Sube los archivos a la raíz de tu sitio y pega las etiquetas HTML en el <head>.
  • Una o dos letras o un símbolo sencillo se leen bien a 16 px.

¿Qué es un favicon?

Es el pequeño icono que aparece en las pestañas del navegador, los marcadores, los resultados de búsqueda y la pantalla de inicio del móvil. Google lo muestra junto al nombre de tu sitio en los resultados; si no tienes uno, verás un globo genérico.

Archivos del paquete

  • favicon.ico (16, 32, 48 px) — pestañas del navegador, navegadores antiguos, resultados de búsqueda
  • favicon-16x16.png, favicon-32x32.png — pestañas y marcadores de navegadores modernos
  • apple-touch-icon.png (180 px) — «Añadir a pantalla de inicio» en iPhone y iPad
  • android-chrome-192x192.png, 512x512.png — pantalla de inicio de Android y aplicaciones web instalables
  • site.webmanifest — icono, nombre y color del tema para Android

Cómo añadirlo a tu sitio

  1. Descomprime el ZIP y sube todos los archivos a la carpeta raíz de tu sitio.
  2. Pega las etiquetas de favicon-tags.html en el <head> de cada página.
  3. En WordPress, sube el PNG de 512 px en Apariencia → Personalizar → Identidad del sitio → Icono del sitio.
  4. Los navegadores guardan los favicons en caché mucho tiempo: recarga forzando (Ctrl+F5) o usa una ventana privada para comprobarlo.

Consejos para un favicon claro

  • A 16 px se leen mejor una o dos letras o un símbolo sencillo; un logotipo completo suele quedar borroso.
  • Usa un contraste fuerte y revisa la vista previa en pestañas claras y oscuras.
  • Con fondo transparente, el icono táctil de Apple se rellena de blanco, porque iOS muestra la transparencia en negro.

Preguntas frecuentes

¿No basta con favicon.ico?

Cubre las pestañas del navegador, pero los móviles necesitan iconos PNG más grandes cuando alguien añade tu sitio a la pantalla de inicio. Se recomienda usar el paquete completo.

He cambiado el favicon, pero sigo viendo el antiguo.

Los navegadores guardan los favicons en caché de forma muy agresiva. Prueba a recargar forzando (Ctrl+F5) o con una ventana privada. Los resultados de búsqueda pueden tardar unos días en actualizarse.

¿Se sube mi imagen?

No. Todos los iconos se generan en tu navegador y nunca salen de tu dispositivo.