Para crear un favicon, suelta arriba una imagen cuadrada PNG, JPG, WebP o SVG, elige fondo «Transparente» o «Color sólido» y algo de margen interior, y haz clic en «Generar favicons». Obtienes favicon.ico (16, 32 y 48 px), PNG de 16 y 32 px, un Apple touch icon de 180×180, iconos Android de 192 y 512 px, un site.webmanifest y el HTML para pegar, todo en un ZIP.
Cómo usar la herramienta Generador de favicon
- 1
Elige una imagen de origen
Suelta un archivo PNG, JPG, WebP o SVG. Lo ideal es una imagen cuadrada; si no lo es, se centra en el lienzo sin deformarse.
- 2
Ajusta el fondo y el margen
Deja el fondo «Transparente» o elige «Color sólido», y usa el control «Margen interior» (0–20 %) para dar algo de aire a tu icono.
- 3
Haz clic en «Generar favicons»
La herramienta dibuja cada tamaño en tu navegador y construye el archivo ICO, los iconos PNG y el web manifest.
- 4
Descarga y añádelo a tu web
Descarga el ZIP, coloca los archivos en la carpeta raíz de tu sitio y copia las líneas HTML que aparecen en la página dentro de la sección head.
¿Qué archivos crea el generador de favicon?
Los navegadores, los móviles y los sistemas operativos buscan cada uno un icono algo distinto, por eso una sola imagen no basta. Este generador de favicon produce el conjunto que necesita la mayoría de las webs: favicon.ico, que contiene versiones de 16, 32 y 48 píxeles en un solo archivo; favicon-16x16.png y favicon-32x32.png para los navegadores que prefieren PNG; apple-touch-icon.png de 180×180 para la pantalla de inicio del iPhone y el iPad; y android-chrome-192x192.png y android-chrome-512x512.png para Android y las aplicaciones web instaladas.
También escribe un site.webmanifest para Android y las aplicaciones web instaladas, y un archivo favicon-html.txt con el fragmento HTML para tus páginas. Todo va en un ZIP, así que no tienes que renombrar ni redimensionar nada a mano.
Las mismas etiquetas link aparecen en la página tras la generación, bajo «HTML para pegar en <head>». Cópialas en la sección head de tu plantilla HTML, o en los ajustes de cabecera de tu CMS o framework, y sube los archivos a la raíz de tu sitio.
Tamaños de favicon, transparencia y el Apple touch icon
Los favicons se ven muy pequeños, así que las formas simples resisten mejor. Un icono de 16 px tiene espacio para una letra o un símbolo marcado, no para un logotipo completo con eslogan. Si tu logotipo es detallado, plantéate usar solo su símbolo o su inicial como imagen de origen, y revisa los resultados de 16 y 32 px antes de publicar.
Un fondo transparente permite que el icono quede limpio en pestañas claras y oscuras. El Apple touch icon es la excepción: iOS muestra los iconos transparentes sobre negro, así que ese archivo siempre lleva un fondo sólido. El control de margen interior añade espacio alrededor del dibujo, lo que ayuda a que los iconos que tocan los bordes no se vean apretados en la pantalla de inicio.
Si tu origen es un SVG, se rasteriza a 4× antes de reducirse, así que incluso el icono de 512 px queda nítido. Con orígenes PNG o JPG, parte de una imagen de al menos 512×512 píxeles para que el icono más grande no tenga que ampliarse.
Convertir PNG a ICO sin instalar nada
El formato .ico es antiguo pero sigue siendo útil: muchos navegadores y herramientas piden favicon.ico en la raíz del sitio por defecto, aunque ninguna etiqueta HTML apunte a él. Crear un ICO con varios tamaños normalmente obliga a instalar un complemento gráfico o una herramienta de línea de comandos. Aquí, la conversión de PNG a ICO forma parte del mismo clic que produce los demás iconos.
Como generador de favicon.ico, funciona por completo en tu navegador. Tu logotipo nunca se sube a los servidores de Krawly y no se guarda nada, algo importante cuando la marca o el producto aún no se han lanzado. Es gratis, sin registro y sin marca de agua en tus iconos.
Consejos para obtener los mejores resultados
- Usa una imagen cuadrada de al menos 512×512 px, o un SVG, para que los iconos más grandes queden nítidos.
- Simplifica para los tamaños pequeños: una sola letra o un símbolo se lee mucho mejor a 16 px que un logotipo completo.
- Añade un 5–10 % de margen interior si tu dibujo toca los bordes, para que las máscaras redondeadas de la pantalla de inicio no lo corten.
- Elige un color sólido que encaje con tu marca, ya que el Apple touch icon siempre lleva fondo.
- Los navegadores guardan los favicons en caché con insistencia; tras cambiarlos, prueba en una ventana privada para ver el icono nuevo.
Preguntas frecuentes
¿Qué tamaños de favicon necesito?
Un conjunto práctico es un favicon.ico con 16, 32 y 48 px, favicons PNG de 16 y 32 px, un Apple touch icon de 180×180 e iconos de 192 y 512 px para Android referenciados desde un web manifest. Este generador crea exactamente ese conjunto a partir de una sola imagen.
¿Cómo añado el favicon a mi web?
Descomprime los archivos en la carpeta raíz de tu sitio y copia las líneas HTML que se muestran tras la generación (también guardadas en favicon-html.txt) en la sección head de tus páginas. Son las etiquetas link que indican a navegadores y dispositivos dónde están tus iconos y tu manifest.
¿Puedo usar un logotipo SVG como origen?
Sí. Los SVG se rasterizan a 4× antes de escalarse a cada tamaño, así que los iconos salen nítidos. PNG, JPG y WebP también sirven; en esos casos, usa una imagen al menos tan grande como el icono de 512 px que quieres obtener.
¿Qué pasa si mi imagen no es cuadrada?
Se centra en un lienzo cuadrado sin estirarse, así que las proporciones se mantienen. El espacio sobrante queda transparente o se rellena con el color de fondo que elijas. Para el mejor resultado, recorta antes la imagen en forma cuadrada.
¿Por qué el Apple touch icon tiene fondo?
iOS muestra los iconos transparentes de la pantalla de inicio sobre un fondo negro, lo que puede hacer desaparecer los logotipos oscuros. Para evitarlo, apple-touch-icon.png siempre lleva un fondo sólido, aunque los demás iconos sean transparentes. Elige un color de fondo que vaya bien con tu logotipo.
¿Se sube mi logotipo para generar los favicons?
No. El redimensionado, el empaquetado ICO y la creación del ZIP se ejecutan en tu navegador. La imagen nunca se envía a los servidores de Krawly y no se guarda nada. La herramienta es gratuita, sin cuenta y sin marca de agua.
Privado por diseño. Todos los conversores de Krawly funcionan dentro de tu navegador con JavaScript y WebAssembly. Tus archivos no se suben, no se guardan y nadie los ve: cuando cierras la pestaña, desaparecen.