Generador de favicon gratis

Origen

Grosor

Estilo

Forma

Vista previa

16 px
32 px
48 px
180 px
192 px
512 px

Incluye favicon.ico (16, 32 y 48 px), los PNG de 16, 32, 180 (Apple), 192 y 512 (Android) y site.webmanifest.

Código para pegar en el <head> de tu web

<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">
<link rel="manifest" href="/site.webmanifest">

Sube los archivos del ZIP a la raíz de tu web y pega este código.

Todo se genera en tu navegador: tu logotipo no se envía a ningún sitio.

¿Cómo usar esta calculadora?

1. Elige un origen: una o dos letras (o un emoji), o tu logotipo
2. Ajusta la forma, los colores y el margen mirando la vista previa
3. Descarga el pack ZIP con todos los tamaños
4. Sube los archivos a la raíz de la web y pega el código HTML en el <head>

Respuesta rápida

¿Qué tamaños de favicon hacen falta?

Prepara un favicon.ico con 16, 32 y 48 px para los navegadores, un icono de Apple de 180 × 180 px para iPhone y iPad, y PNG de 192 y 512 px para Android y las aplicaciones instalables. Ejemplo: sube el pack a la raíz (tuweb.es/favicon.ico) y pega las 5 líneas de código en el <head>.

ArchivoTamañoLo usa
favicon.ico16, 32, 48 pxPestañas, marcadores, Google
favicon-32x32.png32 pxNavegadores recientes
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png192 pxAndroid
android-chrome-512x512.png512 pxPantalla de inicio, PWA

Acerca de la herramienta Generador de favicon

¿Qué es?

El generador de favicon crea el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en la pantalla de inicio de los móviles. Parte de una inicial, unas siglas, un emoji o tu logotipo, ajusta la forma y los colores y descarga un pack listo para instalar.

¿Por qué usarlo?

Una web sin favicon muestra un icono genérico: parece menos profesional y cuesta encontrarla entre decenas de pestañas. Google también muestra el favicon junto a tu web en los resultados de búsqueda en el móvil, lo que ayuda a llamar la atención y a generar confianza.

¿Cómo funciona?

Cada tamaño se dibuja directamente a su resolución (16, 32, 48, 180, 192 y 512 px) para que se vea nítido, en lugar de reducirse a partir de una imagen grande. El archivo favicon.ico agrupa los tamaños de 16, 32 y 48 px con imágenes PNG dentro, un formato que reconocen todos los navegadores. El icono de Apple es siempre un cuadrado opaco, porque iOS redondea las esquinas por su cuenta. Todo se calcula en tu navegador.

Consejos de uso

  • Hazlo sencillo: a 16 px, una o dos letras en negrita se leen mucho mejor que un logotipo detallado
  • Elige un contraste fuerte entre el texto y el fondo para que el icono se vea en modo claro y en modo oscuro
  • Para un logotipo, parte de una versión cuadrada o solo del símbolo, sin el nombre de la marca
  • Vacía la caché o prueba en una ventana privada si después de publicar sigue apareciendo el favicon antiguo
  • Google pide un favicon cuadrado de al menos 48 px, accesible en la dirección indicada en el código HTML
Inserta esta herramienta en tu webGratisCopia este código en tu web o blog: la herramienta aparece directamente en tu página, gratis y sin registro.Todas las herramientas para insertar

Herramientas relacionadas