Generador de Favicon Online

El favicon es el pequeño icono que identifica tu sitio en las pestañas del navegador, los marcadores, los resultados de búsqueda de Google y la pantalla de inicio del celular. Este generador crea todos los tamaños necesarios a partir de tu logo: el archivo favicon.ico con 16, 32 y 48 píxeles, los PNG para Android y el apple-touch-icon para iPhone. Además te da el código HTML para tu sitio y el manifiesto web. Todo se genera en tu navegador.

Cómo usar

1. 1

   Sube tu logo, idealmente cuadrado y de al menos 512 píxeles

2. 2

   Elige fondo transparente o de color, el margen interior y el redondeo de esquinas

3. 3

   Pulsa «Generar favicons»

4. 4

   Descarga el favicon.ico y los PNG, y copia el código HTML y el manifiesto

Beneficios

• favicon.ico con tres tamaños en un solo archivo
• PNG de 16, 32, 48, 180, 192 y 512 píxeles
• Icono para iPhone y Android
• Fondo, margen y esquinas personalizables
• Código HTML y site.webmanifest listos
• Sin subir tu logo a ningún servidor

Qué tamaños necesita un sitio web

Los navegadores usan un icono de 16 × 16 píxeles en las pestañas y de 32 × 32 en pantallas de alta densidad. Google recomienda un favicon de al menos 48 × 48 píxeles, o un múltiplo, para mostrarlo en los resultados de búsqueda. Los iPhone y iPad usan un apple-touch-icon de 180 × 180 al añadir tu sitio a la pantalla de inicio, y Android y las aplicaciones web progresivas usan iconos de 192 y 512 píxeles definidos en el manifiesto.

El formato ICO

El archivo favicon.ico es un contenedor que puede guardar varias imágenes de distintos tamaños. Los navegadores lo buscan automáticamente en la raíz del sitio, incluso sin etiqueta HTML, así que conviene tenerlo. Este generador crea un ICO con las versiones de 16, 32 y 48 píxeles en formato PNG, compatible con todos los navegadores modernos y con Windows.

Cómo instalarlo

Sube todos los archivos a la carpeta raíz de tu sitio web, donde está la página de inicio. Después pega el código HTML dentro de la etiqueta head de tus páginas y crea el archivo site.webmanifest con el contenido generado, cambiando el nombre por el de tu sitio. En WordPress puedes subir el icono desde Apariencia, Personalizar, Identidad del sitio. Los navegadores guardan el favicon en caché, así que puede tardar en actualizarse.

Consejos de diseño

A 16 píxeles caben muy pocos detalles, así que usa un símbolo simple o la inicial de tu marca en lugar del logo completo con texto. Asegúrate de que tenga buen contraste tanto sobre pestañas claras como oscuras. El margen interior evita que el icono se vea apretado y el fondo de color con esquinas redondeadas da un aspecto de aplicación en la pantalla de inicio del celular.