Crea tu favicon
Sube una imagen cuadrada (idealmente 512×512) o crea uno con tus iniciales. Se genera al instante.
¿Para qué sirve este generador?
El favicon es ese pequeño icono que aparece en la pestaña del navegador junto al nombre de tu web, y también en los marcadores y en la pantalla de inicio del móvil. Esta herramienta te lo crea en todos los tamaños que necesitas a partir de una imagen o, si aún no tienes logo, de tus iniciales con el color que elijas. Además de las imágenes, te entrega el bloque de código HTML listo para pegar en tu web, que es justo la parte donde más gente se atasca. Y como todo se genera en tu navegador, tu imagen nunca se sube a un servidor. Gratis, sin registro y sin marcas de agua.
Cómo crear un favicon paso a paso
Tener el icono de tu web listo es cuestión de tres pasos, y en ninguno tu imagen sale de tu equipo:
Qué es un favicon y por qué tu web lo necesita
El término favicon viene de «favorite icon» (icono favorito), y Microsoft lo introdujo en 1999 con Internet Explorer. Es la pequeña imagen cuadrada que identifica a tu sitio: se muestra en la pestaña del navegador junto al título, en los marcadores, en el historial y, en el móvil, como icono de aplicación cuando alguien ancla tu web a la pantalla de inicio. Su gran valor es el reconocimiento de marca: cuando un usuario tiene quince pestañas abiertas, un favicon claro le permite encontrar la tuya de un vistazo. Un sitio sin favicon, en cambio, se ve incompleto y transmite menos profesionalidad, algo que puede restar confianza a quien te visita por primera vez.
Qué tamaños de favicon necesitas
No hace falta un solo tamaño, sino un pequeño conjunto que cubra ordenadores y móviles. Esta herramienta genera todos automáticamente a partir de tu imagen:
| Tamaño | Archivo | Para qué se usa |
|---|---|---|
| 16×16 | favicon-16x16.png | La pestaña del navegador en pantallas normales. El tamaño clásico. |
| 32×32 | favicon-32x32.png | La pestaña y la barra de tareas en pantallas de alta resolución (retina). |
| 48×48 | favicon-48x48.png | Accesos directos de escritorio y algunos navegadores. |
| 180×180 | apple-touch-icon.png | El icono en la pantalla de inicio de iPhone y iPad. |
| 192×192 | android-chrome-192x192.png | El icono en Android cuando se ancla la web a la pantalla de inicio. |
| 512×512 | android-chrome-512x512.png | Android, PWA y pantallas de bienvenida (splash). |
Cómo poner el favicon en tu web (y en WordPress)
Hay dos formas, según cómo gestiones tu sitio. Si usas WordPress, lo más cómodo es ir a Apariencia, Personalizar, Identidad del sitio, y subir tu imagen en el campo «Icono del sitio»: WordPress se encarga de generar y colocar los tamaños por ti. Si trabajas directamente con el HTML, sube los archivos PNG a la carpeta raíz de tu sitio y pega en la sección «head» el bloque de etiquetas <link> que te da esta herramienta; ese código le indica al navegador dónde está cada icono. En cualquiera de los dos casos, después conviene vaciar la caché del navegador y del sitio para ver el cambio, porque los favicons se guardan en caché de forma bastante agresiva. Si además trabajas con imágenes para tu web, quizá te interese pasarlas a un formato más ligero con el conversor de imágenes a WebP y ajustar sus dimensiones con el redimensionador de imágenes online.
Consejos para un favicon que se vea bien a 16 píxeles
Un favicon es diminuto, así que lo que funciona en un logo grande no siempre funciona aquí. La regla de oro es la simplicidad: un solo símbolo, una letra o una forma reconocible, mejor que un logotipo con texto pequeño que se volverá ilegible. Usa colores de buen contraste para que destaque sobre el fondo claro u oscuro de las pestañas, y evita los detalles finos que desaparecen al reducir. Si tu logo es horizontal o tiene mucho texto, plantéate usar solo la parte más icónica —el símbolo o la inicial— para el favicon. Y prueba el resultado en una pestaña real antes de darlo por bueno: lo que se ve nítido a 512 píxeles puede convertirse en un borrón a 16. Para elegir bien los colores de tu marca, te puede ayudar el generador de paletas de colores.
✅ Cómo verificamos esta página
La generación usa la API Canvas estándar de los navegadores para crear los PNG en cada tamaño, y se ha probado para que los archivos y el bloque de código HTML sean válidos. Los tamaños y las etiquetas recomendadas siguen la práctica habitual del sector y se pueden contrastar en la documentación de MDN. Todo el proceso ocurre en tu navegador: la imagen no se sube ni se guarda en ningún servidor.
CreadorKit es una plataforma de herramientas gratuitas para creadores de contenido; no vende productos ni recibe comisiones. Puedes conocer al equipo en la página sobre el equipo de CreadorKit, ver el resto de herramientas de diseño e imagen o escribirnos desde la página de contacto con cualquier sugerencia.
Revisado por el equipo editorial de CreadorKit · Actualizado en 07/2026
Preguntas frecuentes sobre el generador de favicon
Un favicon (del inglés «favorite icon», icono favorito) es la pequeña imagen cuadrada que representa a un sitio web. Aparece en la pestaña del navegador junto al título de la página, en los marcadores, en el historial y, en móviles, como icono cuando anclas la web a la pantalla de inicio. Su función es que los usuarios reconozcan tu sitio de un vistazo entre muchas pestañas abiertas o marcadores, así que refuerza tu marca y hace que tu web se vea más profesional y cuidada. Microsoft lo introdujo en 1999 con Internet Explorer y desde entonces se ha vuelto un elemento imprescindible de cualquier página.
No. Esta herramienta genera el favicon íntegramente en tu navegador usando la API Canvas, así que la imagen que subes se procesa en tu propio dispositivo y no se envía ni almacena en ningún servidor. Es una diferencia importante frente a la mayoría de generadores online, que suben tu logo a la nube para procesarlo. Aquí puedes comprobarlo desconectando internet tras cargar la página: la generación seguirá funcionando. Es la opción más privada si tu logo aún no es público o simplemente prefieres que tus archivos no salgan de tu equipo.
Para cubrir la mayoría de casos necesitas unos pocos tamaños clave: 16×16 y 32×32 píxeles para la pestaña del navegador, 180×180 para el Apple Touch Icon de iPhone y iPad, y 192×192 y 512×512 para Android y las aplicaciones web progresivas (PWA). Esta herramienta genera todos esos tamaños automáticamente a partir de una sola imagen, para que no tengas que redimensionar nada a mano. Con ese conjunto tu icono se verá bien en ordenadores, móviles y cuando alguien ancle tu web a la pantalla de inicio de su teléfono.
Tienes dos caminos. Si usas WordPress, lo más fácil es subir la imagen en Apariencia, Personalizar, Identidad del sitio, en el campo «Icono del sitio»: WordPress genera y coloca los tamaños por ti. Si gestionas el HTML directamente, sube los archivos PNG que descargas a la carpeta raíz de tu sitio y pega en la sección «head» de tu página el bloque de etiquetas «link» que te da esta herramienta. Ese bloque le dice al navegador dónde está cada icono y qué tamaño usar en cada dispositivo. En ambos casos, tras subirlo conviene vaciar la caché para ver el cambio.
Sí. Además del modo imagen, esta herramienta incluye un modo texto con el que creas un favicon a partir de una o dos letras —normalmente las iniciales de tu marca— eligiendo el color de fondo y el del texto. Es una solución rápida y muy usada por blogs y proyectos que aún no tienen un logotipo definido: un favicon con iniciales sobre un fondo de color es limpio, se lee bien incluso a 16 píxeles y da un aspecto profesional. Puedes empezar con esa versión y sustituirla más adelante por tu logo cuando lo tengas.
Durante años el estándar fue el archivo favicon.ico, que empaqueta varios tamaños en un solo fichero, y sigue siendo el más compatible con navegadores antiguos. Hoy, los PNG en tamaños concretos (16, 32, 180, 192, 512) son la opción recomendada y la que usan la mayoría de sitios modernos, porque son ligeros y nítidos. El SVG es interesante porque escala sin perder calidad, pero no todos los navegadores lo soportan como favicon. Esta herramienta genera los PNG en todos los tamaños necesarios, que es lo que cubre la práctica totalidad de casos actuales sin complicaciones.
No de forma directa: tener favicon no sube tu posición por sí solo. Pero contribuye de manera indirecta. Google muestra el favicon junto a tus resultados en la búsqueda desde el móvil, así que un icono claro y reconocible puede mejorar tu tasa de clics. Además, un sitio con favicon se percibe como más completo y fiable, lo que ayuda a la confianza y a la retención de visitantes, señales que sí importan. Piensa en el favicon como parte del cuidado general de tu web: pequeño detalle, pero refuerza la marca y la profesionalidad que Google y los usuarios valoran.
Es totalmente gratis, sin registro, sin límite de uso y sin marcas de agua. Como todo el proceso ocurre en tu navegador y no depende de un servidor, puedes generar tantos favicons como quieras y los archivos que descargas son limpios, listos para subir a tu sitio. CreadorKit ofrece esta utilidad como apoyo gratuito a creadores de contenido y responsables de webs, sin vender nada relacionado ni cobrar comisiones.