Inicio / Generador de favicon

Generador de favicon

Suelta tu logo y obtén todos los iconos que necesita tu web: favicon.ico, icono de Apple, iconos de app y manifest, con las líneas de HTML correspondientes.

Suelta tu logo aquí

o toca para elegir. Mejor cuadrado, en PNG o SVG.

Elegir archivo

Paso a paso

  1. Suelta tu logotipo, a ser posible cuadrado y en PNG con fondo transparente o en SVG.
  2. En «Nombre del sitio web (para el manifest)» escribe el nombre con el que debe aparecer el sitio cuando alguien lo instale como app en la pantalla de inicio.
  3. En «Fondo» deja «Transparente» o elige un color en forma de cuadrado, redondeado o círculo. El tono se ajusta en «Color».
  4. Con «Margen interior» decides cuánto espacio queda alrededor del logotipo. La vista previa muestra todos los tamaños de 16 a 512 píxeles y cambia al instante.
  5. Toca «Descargar todo en ZIP». Las líneas HTML que aparecen bajo la vista previa se copian directamente con «Copiar».

Para qué sirve

  • Tu web o blog: El icono aparece en la pestaña del navegador, en los marcadores y en el historial. Sin favicon, los navegadores solo muestran ahí un símbolo genérico.
  • Tienda online: Un icono reconocible en la pestaña ayuda a tus clientes a encontrar tu tienda entre muchas páginas abiertas.
  • Web apps y paneles: Con el manifest y los iconos de 192 y 512 píxeles, el sitio se puede añadir a la pantalla de inicio del móvil como si fuera una app.
  • Distinguir entornos de prueba: Si tienes una versión de pruebas y otra en producción del mismo sitio, puedes crear para cada una un icono con su propio color de fondo y ver al momento en qué pestaña estás.

¿Qué hay en el ZIP?

  • favicon.ico de 16, 32 y 48 píxeles, para todos los navegadores.
  • apple-touch-icon.png (180 px), para cuando alguien añade tu web a la pantalla de inicio del iPhone.
  • icon-192.png e icon-512.png con site.webmanifest, para Android y webs instalables.
  • einbauen.html con las líneas para el <head> de tu página.

Sube todos los archivos a la carpeta raíz de tu web y añade las líneas de HTML. En WordPress es aún más fácil: sube un icono de 512 px en Apariencia → Personalizar → Identidad del sitio.

Preguntas frecuentes

¿Cómo debería ser el logo?

Sencillo y contundente. A 16 píxeles no se leen los detalles finos ni el texto: a menudo basta con la inicial o el símbolo.

¿Se sube mi logo?

No. Todos los iconos se crean en tu navegador.

Mi logotipo no es cuadrado, ¿se deformará?

No. Se encaja completo y se centra. Un logotipo ancho deja margen arriba y abajo; uno alto, a izquierda y derecha.

¿Cuándo conviene un fondo de color?

Cuando un logotipo oscuro apenas se vería en pestañas oscuras, o para los iconos de la pantalla de inicio, que en el iPhone no se muestran transparentes. Una forma redonda o redondeada queda entonces como un icono de app.

Después de instalarlo sigo viendo el icono antiguo.

Los navegadores guardan los favicons en caché con insistencia. Recarga la página sin caché o ábrela en una ventana privada. Los marcadores también se actualizan al cabo de un tiempo.

¿Qué contiene el manifest?

El nombre, una forma corta recortada a 12 caracteres, los dos iconos de app, el color elegido como color del tema y la visualización como app independiente. Es un archivo de texto y se puede ajustar con cualquier editor.

¿Tengo que subir todos los archivos?

Para la pestaña del navegador basta con favicon.ico. Los demás archivos sirven para el icono de Apple, para Android y para sitios que se pueden instalar como app.

Mis archivos no están en la carpeta raíz.

Entonces ajusta las rutas. En las líneas HTML y en el manifest empiezan con una barra que apunta a la carpeta raíz.