Qué es un favicon
El favicon es ese iconito que aparece en la pestaña del navegador, junto al título de la página. También se usa en los marcadores, en el historial, en los accesos directos del escritorio y, cuando alguien guarda tu web en la pantalla de inicio del móvil, como icono de la “app”. Es la cara diminuta de tu sitio: una web sin favicon muestra una hoja en blanco genérica y transmite descuido. Con uno bien hecho tu pestaña se reconoce de un vistazo entre veinte abiertas.
Esta herramienta crea el favicon de dos formas, ambas 100% en tu navegador: escribiendo una o dos letras (o un emoji) sobre el color que elijas, o subiendo una imagen que se recorta al centro y se reduce a cada tamaño. Después descargas un pack completo de PNG, el clásico favicon.ico y el fragmento de HTML listo para pegar.
Qué tamaños necesitas hoy
Durante años se recomendaba fabricar una decena de iconos distintos. Hoy la lista razonable es corta:
| Archivo | Tamaño | Para qué sirve |
|---|---|---|
favicon.ico | 16 y 32 px | Compatibilidad universal, incluso navegadores viejos |
favicon-16x16.png | 16 px | Pestaña en pantallas normales |
favicon-32x32.png | 32 px | Pestaña en pantallas nítidas (retina) |
apple-touch-icon.png | 180 px | Pantalla de inicio de iPhone y iPad |
icon-192x192.png | 192 px | Android y apps web instalables (PWA) |
icon-512x512.png | 512 px | Splash de instalación de una PWA |
Con esos seis archivos cubres desde un navegador antiguo hasta un móvil moderno. Los de 192 y 512 solo hacen falta si tu sitio es una PWA con manifest.json; para una web normal, con el .ico y los PNG de 16, 32 y 180 basta.
PNG o ICO
El formato .ico es el histórico de Windows: puede guardar varios tamaños dentro de un mismo archivo. Nuestro favicon.ico combina las versiones de 16 y 32 px para que el navegador elija la que necesite.
Los navegadores modernos, en cambio, muestran PNG sin problema y con mejor calidad, porque el PNG admite transparencia real y colores más finos. Por eso la recomendación de 2026 es sencilla: sirve los PNG para los navegadores actuales y mantén el favicon.ico como red de seguridad para los muy antiguos. No tienes que elegir uno u otro: usa ambos, que es justo lo que genera esta herramienta.
Cómo instalarlo
Sube los archivos a la raíz de tu web (la misma carpeta donde está tu página principal) y pega en el <head> el fragmento que te damos:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">Guarda, recarga la página y mira la pestaña. Si sigues viendo el icono viejo, es la caché del navegador: recarga con Ctrl + F5 o abre la web en una ventana privada.
Ejemplo resuelto
Imagina una tienda que se llama “Rosa Dulce”. Eliges el modo texto, escribes RD, pones fondo rosa (#EC4899) y letra blanca, y seleccionas forma redondeada. La vista previa muestra el icono al instante. Pulsas “Generar el pack” y obtienes seis PNG (de 16 a 512 px) más un favicon.ico que pesa unos 5 KB y guarda dentro las versiones de 16 y 32. Descargas todo en un ZIP, subes los archivos a la raíz del sitio, pegas las cuatro líneas de HTML y, tras un Ctrl + F5, la pestaña ya luce las letras RD en rosa. Todo el proceso ocurrió en tu equipo: ninguna imagen viajó a internet.
Preguntas frecuentes
¿Qué tamaños necesito de verdad?
Para una web normal: favicon.ico, los PNG de 16 y 32 px y el apple-touch-icon de 180 px. Si tu sitio es una app instalable (PWA), añade los de 192 y 512 px a tu manifest.json. Esta herramienta te da los seis de una vez, así que no te quedas corto.
¿ICO o PNG?
Ambos. Los navegadores modernos prefieren el PNG por su nitidez y transparencia, pero el favicon.ico sigue siendo la red de seguridad para navegadores antiguos y para casos donde solo se busca /favicon.ico. Poner los dos no cuesta nada y evita sorpresas.
¿Cómo lo pongo en mi web?
Copia los archivos generados a la carpeta raíz de tu sitio y pega en el <head> el fragmento HTML de arriba (tienes un botón para copiarlo). Si usas WordPress, Wix o similar, busca en los ajustes la opción “icono del sitio” o “favicon” y sube ahí el PNG de 512 px; la plataforma genera el resto.
¿Se sube mi imagen a algún servidor?
No. Todo el dibujo y la codificación se hacen con el lienzo (canvas) de tu propio navegador. Puedes comprobarlo desconectando el internet: la herramienta sigue funcionando igual.