Favicon Generator - Text to Favicon.ico

Cree favicons personalizados al instante, perfectos para sitios web, aplicaciones y PWA

Genera tu favicon

Habilitar SVG

Cómo instalar favicons en su sitio web

Mejore la apariencia de su sitio web en todos los dispositivos instalando favicons personalizados. Siga estos sencillos pasos para integrar su paquete de favicon recién generado:

  1. Genera tu Favicon: utiliza nuestro Generador de Favicon para crear íconos personalizados con el texto, los colores, la forma y la fuente que desees. Haga clic en 'Generar Favicon' para descargar su paquete de favicon.

  2. Descargar y descomprimir: una vez generado, descargue el paquete de favicon y extraiga los archivos al directorio raíz de su sitio web.

  3. Agregue código HTML: inserte el siguiente código en la sección "head" de su archivo HTML para garantizar la compatibilidad entre varios dispositivos y navegadores:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Cómo Usar el Generador de Favicons

  1. Ingresa el texto deseado (1-2 caracteres).
  2. Personaliza los colores, forma y fuente.
  3. Haz clic en 'Generar Favicon'.
  4. Descarga tu paquete de favicon.
  5. Implementa usando el código proporcionado.

Tamaños de Favicon Generados

Nuestro generador de favicons crea íconos en estos tamaños esenciales:

Tamaños Comunes de Iconos para Apple Touch:

  • 57x57px: iPhone y iPod touch.
  • 60x60px: Iconos de toque para iPhones más nuevos.
  • 72x72px: Iconos para iPad.
  • 76x76px: iPad con pantalla retina.
  • 114x114px: iPhone con pantalla retina.
  • 120x120px: Iconos retina de toque para iPhones más nuevos.
  • 144x144px: iPad con pantalla retina.
  • 152x152px: iPad con pantalla retina.
  • 180x180px: iPhone 6+ y iconos retina más nuevos.

Tamaños Generales de Iconos:

  • 16x16px: Favicons para pestañas del navegador.
  • 32x32px: Tamaño estándar de favicons.
  • 48x48px: Atajos de Windows.
  • 64x64px: Atajos de Windows.
  • 96x96px: Dispositivos Chrome y Android.
  • 192x192px: Dispositivos Android.
  • 512x512px: Iconos para pantallas de alta resolución y ciertas Aplicaciones Web Progresivas (PWAs).

Formatos Adicionales:

  • favicon.ico (32x32px): Un archivo de icono de múltiples resoluciones para máxima compatibilidad con sistemas y navegadores antiguos.
  • Formato SVG: Si está habilitado, el paquete también incluye un icono gráfico vectorial escalable (SVG), ideal para varios tamaños y dispositivos debido a su escalabilidad.

Por Qué Importan los Múltiples Tamaños de Favicon

En el mundo de múltiples dispositivos de hoy, tener múltiples tamaños de favicon es crucial:

  • Asegura la compatibilidad en todos los dispositivos y navegadores
  • Mejora la claridad visual en pantallas de alta resolución
  • Cumple con los requisitos para Aplicaciones Web Progresivas (PWAs)
  • Mejora el reconocimiento en pestañas de navegador abarrotadas

Preguntas frecuentes