Cómo crear un favicon a partir de una imagen

Por qué un sitio necesita más de un icono

El favicon es la marca pequeña de la pestaña del navegador. El teléfono, Windows y macOS piden copias más grandes: un Apple Touch Icon, iconos de Android Chrome y un favicon.ico. Hacer cada tamaño a mano lleva tiempo, y un tamaño que falta deja la pestaña borrosa o el icono de la pantalla de inicio vacío.

El generador de favicon arma ese conjunto desde una sola imagen, en el navegador. No se sube nada. Recibes un ZIP, un manifest.json para una PWA, una página de prueba y las etiquetas <link> para el <head>.

Paso a paso

1. Abre el generador de favicon. Usa una imagen cuadrada, PNG si la tienes. Un logo horizontal se estira hasta el cuadrado, así que recórtalo antes. 512 píxeles de lado bastan; 1024 es mejor, porque el icono de macOS del archivo mide 1024×1024.
2. Suelta el archivo en la zona de carga o pulsa Seleccionar archivo. Arriba verás la vista previa y el nombre, y debajo el campo Ruta de los iconos. La ruta por defecto es /img. Cámbiala si los iconos vivirán en otra carpeta, por ejemplo /assets/icons.

   

3. Pulsa Generar iconos. El navegador descarga favicons.zip. En la página aparece una nota verde y el bloque Etiquetas HTML para insertar, con las etiquetas que apuntan a tu ruta.

   

4. Descomprime el archivo en la carpeta que indicaste. Contiene PNG para la web, iOS, Android y macOS, un favicon.ico, manifest.json, test.html y html-tags.txt.
5. Copia las etiquetas al <head> de tus páginas. Abre test.html desde la misma carpeta para comprobar que los archivos se encuentran.

Consejos

• La ruta tiene que coincidir. Si el campo dice /img, las etiquetas piden /img/favicon-32x32.png. Los archivos deben estar en esa carpeta.
• Empieza por un cuadrado. La herramienta dibuja toda la imagen en cada tamaño cuadrado. Un logo apaisado se aplasta.
• Usa un original grande. Los tamaños pequeños salen de tu archivo. Una imagen diminuta no puede volverse un icono nítido de 512×512.
• Publica el manifiesto junto a los iconos. manifest.json apunta a android-chrome-192x192.png y android-chrome-512x512.png en la misma ruta.
• El trabajo ocurre en el navegador. La imagen se redimensiona en local y luego se descarga el ZIP.

Preguntas frecuentes

¿Se sube mi logo?

No. El generador funciona en el navegador. La imagen no sale del ordenador.

¿Qué tamaños trae el ZIP?

PNG web de 16×16 a 512×512, Apple Touch Icon de 60×60 a 180×180, iconos Android Chrome de 192×192 y 512×512, PNG de macOS hasta 1024×1024 y favicon.ico.

¿Dónde van las etiquetas HTML?

En el <head> de cada página. El botón Copiar deja el bloque entero en el portapapeles. El mismo texto va en el ZIP como html-tags.txt.

¿Y si cambio de carpeta?

Escribe la carpeta nueva en Ruta de los iconos. Si las etiquetas ya están visibles, se actualizan. Pulsa Generar iconos otra vez para que el html-tags.txt del ZIP nuevo coincida.

Herramientas relacionadas

• Generador de favicon: la herramienta de esta guía.
• SVG a CSS: incrusta un icono SVG en la hoja de estilos.
• Convertidor de unidades CSS: pasa tamaños de px a rem.
• Herramientas web: el resto de la categoría.

Pruébalo

Abre el generador de favicon, suelta un logo cuadrado y pulsa Generar iconos.