Saltar al contenido
SPCXTools

Generador de Favicon

Convierte un logo, una letra o un emoji en un paquete completo de favicons con el código HTML para usarlo.

Funciona en local: los archivos no salen de tu dispositivo

Cargando herramienta…

Cómo usar Generador de Favicon

  1. 1Elige Desde imagen y selecciona tu logo (un PNG o SVG cuadrado funciona mejor), o elige Desde texto y escribe una letra, iniciales o un emoji.
  2. 2Ajusta el radio de las esquinas, el espaciado y los colores. Las vistas previas muestran el icono en tamaño real.
  3. 3Haz clic en Descargar paquete de favicons para obtener un ZIP con todos los archivos.
  4. 4Sube los archivos a la raíz de tu sitio web y pega el fragmento de código HTML en el <head> de tus páginas.

Crea un favicon en segundos

Un favicon es el pequeño icono que aparece en las pestañas del navegador, marcadores, historial, resultados de búsqueda en móviles y en la pantalla de inicio cuando alguien guarda tu sitio web. Ayuda a los visitantes a encontrar tu pestaña entre docenas y hace que incluso un sitio web pequeño se vea profesional. Este generador de favicons crea todos los archivos que necesitas a partir de una sola imagen —o de una letra o emoji si aún no tienes un logo— y te da el HTML para añadirlos a tu sitio.

Características

  • A partir de una imagen: PNG, JPG, SVG, WebP y más.
  • A partir de texto o emoji: iniciales o un emoji sobre un fondo de color.
  • Esquinas redondeadas y espaciado para que el icono se ajuste perfectamente a las pestañas y pantallas de inicio.
  • Vistas previas en vivo a 16, 32, 64 y 128 píxeles.
  • Paquete completo: favicon.ico en varios tamaños, iconos PNG, icono de Apple touch, iconos de Android y web manifest.
  • Etiquetas HTML listas para copiar.
  • Privado: generado completamente en tu navegador.

Explicación de los tamaños de favicon

Archivo Tamaño Usado por
favicon.ico 16, 32, 48 px Todos los navegadores, accesos directos de Windows, compatibilidad con navegadores antiguos
favicon-16x16.png 16 px Pestañas del navegador
favicon-32x32.png 32 px Pestañas en pantallas de alta resolución, barra de tareas
apple-touch-icon.png 180 px Pantalla de inicio de iPhone y iPad
android-chrome-192x192.png 192 px Pantalla de inicio de Android
android-chrome-512x512.png 512 px Pantalla de carga de Android, instalación de PWA

Consejos de diseño

  • Simplifica. Usa el símbolo de tu logo, no el logo completo con el nombre de la empresa.
  • Usa contraste. El icono debe destacar tanto en temas claros como oscuros del navegador.
  • Prueba a 16 px. Si no puedes reconocerlo en la vista previa más pequeña, simplifícalo aún más.
  • Llena el cuadrado. Los iconos con mucho espacio vacío se ven diminutos en las pestañas; reduce el margen.

Herramientas relacionadas

Convierte primero un logo vectorial a un PNG de alta resolución con SVG a PNG, cambia el tamaño de una imagen existente con Redimensionar imagen o convierte entre formatos de imagen con el Convertidor de imágenes.

Preguntas frecuentes

¿Qué archivos se incluyen?
favicon.ico (16, 32 y 48 px en un solo archivo), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, un archivo site.webmanifest y un fragmento HTML con las etiquetas link correspondientes.
¿Qué imagen funciona mejor para un favicon?
Una imagen cuadrada y sencilla, con formas marcadas y pocos detalles. Los favicons suelen mostrarse a solo 16×16 píxeles, por lo que el texto y las líneas finas desaparecen. Un isotipo sin texto, o una sola letra, funciona mucho mejor que un logotipo completo. Usa una imagen original de al menos 512 px de ancho.
¿Dónde coloco los archivos?
Súbelos a la carpeta raíz de tu sitio web para que estén disponibles en rutas como /favicon.ico. Luego, pega el fragmento HTML dentro de la sección <head>. Muchos navegadores también buscan /favicon.ico automáticamente, incluso sin la etiqueta.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons en caché de forma muy agresiva. Abre la dirección del icono directamente, fuerza la recarga de la página o prueba en una ventana privada. Los marcadores y las pestañas pueden tardar un tiempo en actualizarse.
¿Debería usar un fondo transparente?
La transparencia queda bien en las pestañas del navegador, pero iOS rellena de negro las áreas transparentes del Apple touch icon. Si tu icono no se ve bien tanto en fondos claros como oscuros, desactiva la transparencia y elige un color de fondo.
¿Se sube mi imagen?
No. Todos los iconos se procesan y empaquetan en tu navegador. No se envía nada a ningún servidor.

Herramientas relacionadas

SVG a PNGConvierte gráficos vectoriales SVG en imágenes PNG nítidas a cualquier tamaño, conservando la transparencia.Redimensionar imagenCambia el tamaño de las fotos a píxeles exactos o por porcentaje — una imagen o un lote completo, sin subirlas a un servidor.Convertidor de imágenesConvierte fotos y gráficos entre JPG, PNG, WebP y AVIF, por lotes y sin subir archivos.PNG a WebPReduce el tamaño de las imágenes de tu web convirtiendo archivos PNG y JPG a WebP, directamente en tu navegador.Añadir borde a imagenAñade fácilmente bordes de colores personalizables y esquinas redondeadas a tus fotos.Añadir texto a imagenAñade textos, títulos o frases para memes en cualquier imagen y arrástralos exactamente donde quieras.