Guías

Cómo crear un favicon desde PNG

Convierte un logotipo PNG, JPG o WebP en los iconos para navegador, Apple y PWA que necesita una web moderna.

Crear un paquete de favicon La herramienta procesa tus archivos localmente; no se suben.

Cómo crear un favicon desde PNG empieza con un logotipo nítido y termina con varios archivos, no con un único icono pequeño. ConvertRS acepta PNG, JPG o WebP y crea el paquete localmente, por lo que no hace falta subir el logotipo.

Prepara la imagen de origen

Usa la versión más clara del logotipo. Una composición cuadrada necesita menos relleno, pero un logotipo rectangular también funciona: el generador lo ajusta a lienzos cuadrados con relleno transparente o con el color de fondo que elijas.

Los iconos pequeños pierden detalles. Comprueba que la forma principal siga siendo reconocible a 16 × 16 píxeles. Evita depender de letras diminutas, líneas muy finas o contrastes sutiles.

Genera el paquete de favicon

Abre el generador privado de favicon, añade la imagen, elige relleno transparente o un fondo y genera el ZIP. El navegador crea:

  • un favicon.ico con imágenes de 16, 32 y 48 píxeles;
  • favicons PNG de 16 × 16 y 32 × 32;
  • un Apple Touch Icon de 180 × 180;
  • iconos Android/PWA de 192 × 192 y 512 × 512;
  • site.webmanifest y un fragmento HTML.

El generador no crea favicons desde SVG, texto escrito ni emoji. Usa uno de los formatos de imagen raster compatibles.

Instala los archivos

Copia los archivos generados a la raíz pública de la web y añade al encabezado las etiquetas y el manifiesto incluidos. Mantén los nombres de archivo indicados en el HTML.

Los navegadores guardan los favicons en caché de forma persistente. Si un cambio no aparece, prueba en una ventana privada o limpia los datos del sitio antes de modificar otra vez los archivos.

Comprueba el resultado

Carga la web en más de un navegador y revisa la pestaña, los marcadores, el icono de inicio móvil y la PWA instalada cuando corresponda. La guía de tamaños de favicon explica la función de cada archivo.

Fuentes principales

Guías relacionadas

Herramientas relacionadas