Generador de favicon

Todos los tamaños de favicon a partir de una imagen

El favicon es el pequeño icono que aparece en las pestañas, los marcadores, los resultados de búsqueda y la pantalla de inicio del móvil. Cada lugar pide un tamaño distinto: 16 y 32 píxeles para las pestañas, 180 para los iconos Apple touch, 192 y 512 para Android y los manifiestos de aplicaciones web. Crearlos a mano es tedioso, y los iconos pequeños suelen salir borrosos.

Este generador reduce tu imagen por pasos, dividiéndola a la mitad varias veces con un suavizado de alta calidad hasta llegar a cada tamaño, lo que mantiene nítidos los iconos pequeños. Obtienes archivos PNG por separado, un favicon.ico con los tamaños clásicos y un ZIP con todo.

Cómo generar favicons

1. 1

   Paso 1: Suelta una imagen cuadrada

   Un logotipo o símbolo cuadrado de al menos 512 x 512 px da los mejores resultados. El SVG también sirve.

2. 2

   Paso 2: Elige los tamaños

   Navegador mínimo (16, 32, 48), Web estándar (añade 96, 180 y 192) o Todos los tamaños, o actívalos uno a uno.

3. 3

   Paso 3: Genera

   Cada tamaño se renderiza con reducción progresiva para obtener bordes limpios.

4. 4

   Paso 4: Descarga

   Guarda los PNG por separado, el favicon.ico o el ZIP completo.

Qué obtienes

Dónde se usan los favicons

• Pestañas y marcadores. Iconos de 16 y 32 px, normalmente desde el favicon.ico.

• Pantallas de inicio de iPhone y iPad. El icono Apple touch de 180 px.

• Android y aplicaciones web. Iconos de 192 y 512 px declarados en un manifiesto de aplicación web.

• Resultados de búsqueda. Google muestra tu favicon junto a los resultados en móvil y en ordenador.

Cómo añadir los favicons a tu web

Sube los archivos a la carpeta raíz de tu web y añade unas líneas en el head de tus páginas. Un juego típico: link rel="icon" href="/favicon.ico" sizes="any", link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png", y link rel="apple-touch-icon" href="/favicon-180x180.png".

Para aplicaciones web instalables, incluye los PNG de 192 y 512 px en el array icons de tu manifest.json. Los navegadores guardan los favicons en caché durante mucho tiempo, así que puede que necesites una recarga forzada para ver el icono nuevo.

• favicon.ico: pestañas, marcadores y navegadores antiguos.
• favicon-180x180.png: icono Apple touch.
• favicon-192x192.png y favicon-512x512.png: iconos del manifiesto.

Un icono que se lea a 16 píxeles

A 16 por 16 píxeles, los detalles desaparecen. Un logotipo con el nombre completo se vuelve ilegible, así que usa un símbolo sencillo o una sola letra con buen contraste. Revisa las vistas previas de 16 y 32 px antes de descargar.

Parte de una imagen cuadrada. Las imágenes que no son cuadradas se estiran hasta serlo, así que recorta primero a 1:1 con el recortador si tu logotipo es más ancho que alto.

Consejos para favicons nítidos

• Usa un PNG transparente o un SVG para que el icono encaje con los temas claros y oscuros de los navegadores.
• Engrosa los trazos de tu logotipo para los tamaños pequeños si las líneas se ven finas.
• Deja alrededor de un 10 % de margen alrededor del símbolo para que no toque los bordes.
• Vuelve a subir el favicon.ico con otro nombre o un parámetro de versión si los navegadores siguen mostrando el icono antiguo.

Preguntas sobre el generador de favicons