Convertir PNG a favicon ICO y crear paquete de iconos
El Generador de Favicon transforma cualquier imagen en el paquete de iconos completo que requiere una página web moderna. Convierte de forma directa de PNG a favicon ICO, junto con las medidas PNG estándar, el icono para iOS, el manifiesto web y el código HTML preparado para usar. Todo el proceso ocurre dentro de tu navegador con la API Canvas, sin registros y sin enviar datos a servidores externos.
Generador de favicon online privado y sin subidas
Esta herramienta procesa la imagen e integra en un solo paquete descargable ZIP todos los formatos exigidos por los navegadores actuales. El archivo comprimido incluye el recurso favicon.ico multirresolución con tamaños de 16x16, 32x32 y 48x48 píxeles, imágenes PNG individuales, el archivo apple-touch-icon.png de 180x180 píxeles, el archivo site.webmanifest para Android y el archivo favicon-tags.html con el fragmento de código preparado.
A diferencia de los convertidores tradicionales, la renderización se realiza localmente en tu ordenador o móvil. La imagen que elijas nunca se sube a Internet, lo que garantiza inmediatez en el proceso y total privacidad de tus archivos gráficos.
Cómo convertir imagen a favicon paso a paso
Generar el conjunto de iconos para tu sitio web requiere únicamente unos pocos pasos sencillos:
- Arrastra tu archivo de imagen o pulsa en la casilla de selección para cargarlo. Para lograr una nitidez óptima, se aconseja utilizar un logotipo cuadrado de al menos 256x256 píxeles.
- Observa el resultado en tiempo real en la previsualización de la pestaña del navegador y la pantalla de inicio móvil.
- Abre el panel de Ajustes si deseas añadir margen alrededor del logotipo o definir un color de fondo opaco.
- Haz clic en el botón de descarga para guardar el paquete ZIP con todos los archivos listos.
Convertir SVG a favicon y formatos soportados
El convertidor admite los formatos gráficos más extendidos para la creación de favores web:
- PNG: la opción recomendada porque preserva el canal alfa de transparencia.
- SVG: formato vectorial que se rasteriza con máxima precisión matemática en todas las medidas finales.
- JPG: adecuado para fotografías o logos con fondo plano sin transparencia.
- WebP y GIF: procesa imágenes WebP y extrae de forma automática el primer fotograma en GIF animados.
Medidas de favicon recomendadas para la web
Un sitio web moderno requiere diferentes dimensiones de icono en función del contexto en el que se visualice. La versión favicon.ico reúne en un único contenedor las resoluciones de 16x16, 32x32 y 48x48 píxeles para asegurar compatibilidad en pestañas y marcadores.
Google solicita de forma explícita el archivo de 48x48 píxeles (favicon-48x48.png) para mostrar la identidad gráfica de la página en sus resultados de búsqueda. Para dispositivos móviles y aplicaciones web progresivas (PWA), el paquete proporciona las medidas de 192x192 y 512x512 píxeles enlazadas desde el archivo de manifiesto.
Cómo instalar el favicon en el código de tu sitio
Tras la descarga, descomprime el archivo ZIP y sube todos los recursos al directorio raíz o carpeta raíz de tu alojamiento web (el mismo espacio donde reside la página principal).
A continuación, abre el archivo favicon-tags.html, copia las líneas de código <link> que contiene e insértalas en el bloque <head> de tu sitio. Debido a la persistencia del almacenamiento en caché de los navegadores, si el nuevo icono no aparece inmediatamente, realiza una recarga forzada en tu navegador presionando Ctrl + F5 en Windows o Cmd + Shift + R en Mac.
Preguntas frecuentes
¿Cómo convertir una imagen PNG a favicon ICO gratis?
Selecciona tu imagen PNG en la herramienta y ajusta el margen o el color de fondo si lo prefieres. Descarga el paquete ZIP con el favicon.ico multirresolución, el resto de imágenes PNG y las etiquetas HTML. Todo el proceso es gratuito, sin registro y sin subir tus imágenes a servidores.
¿Cuáles son las medidas y tamaños recomendados para el favicon de una web?
Las páginas actuales utilizan varios tamaños: 16x16 y 32x32 píxeles para pestañas del navegador, 48x48 píxeles exigidos por Google en sus resultados de búsqueda, 180x180 para dispositivos iOS y 192x192 junto con 512x512 para Android. Esta herramienta exporta automáticamente todas esas dimensiones.
¿Qué es un archivo favicon.ico y por qué se sigue utilizando?
El archivo favicon.ico es un formato que permite empaquetar varias resoluciones en un único archivo. Se sigue utilizando como solución de compatibilidad universal porque los navegadores solicitan este recurso en la carpeta raíz del servidor desde hace décadas.
¿Puedo crear un favicon a partir de una imagen SVG?
Sí, puedes cargar un archivo SVG como imagen de origen. Al ser un formato vectorial, la herramienta lo rasteriza con nitidez perfecta en cada una de las resoluciones de salida ICO y PNG necesarias para los navegadores.
¿Cómo funciona el favicon en dispositivos iPhone y iPad?
El paquete incluye el archivo apple-touch-icon.png de 180x180 píxeles que usa Safari al añadir el sitio a la pantalla de inicio en iOS. Dado que este sistema operativo no admite transparencias en los iconos de la pantalla de inicio, el archivo se genera siempre con un fondo opaco rellenado con el color seleccionado.
¿Qué diferencia hay entre el archivo favicon.ico y los favicones en formato PNG?
El archivo favicon.ico agrupa múltiples dimensiones en un solo recurso para garantizar compatibilidad universal, mientras que las versiones PNG son archivos independientes para cada tamaño específico declaradas explícitamente en el HTML. Se recomienda incluir ambos formatos en la web.
¿Qué es el archivo site.webmanifest y para qué sirve en Android?
El archivo site.webmanifest es un manifiesto de configuración en formato JSON que indica a navegadores como Chrome en Android cómo interactuar con el sitio web al instalarlo. Enlaza los iconos de 192x192 y 512x512 píxeles para mostrarlos correctamente como una aplicación en la pantalla de inicio.
Recomendado
-
The $100 Startup (Chris Guillebeau, en inglés)Tu web ya tiene icono; ahora haz que genere ingresos
-
Tableta gráfica Wacom Intuos SDibuja a mano tu propio logo e icono
-
Monitor portátil InnoView de 15,6"Una segunda pantalla para crear tu web
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
