Crear un favicon a partir de una imagen

Convierte un logotipo en favicon.ico y en los PNG que piden iOS y Android. Gratis, sin cuenta, y la imagen se convierte en tu navegador en vez de subirse.

Arrastra un archivo aquí

o pega desde el portapapeles

Opciones
%

Espacio libre alrededor del dibujo. Un logotipo dibujado hasta el borde de su archivo suele necesitarlo; uno que ya trae margen, no.

Déjalo apagado para conservar la transparencia, que es lo que suele querer un favicon. Enciéndelo para un dibujo que solo funciona sobre fondo sólido.

#ffffff

Solo se usa cuando se está poniendo un color detrás del dibujo.

Results appear here. Nothing is uploaded.

    Cómo funciona

    La imagen se dibuja en un lienzo cuadrado una vez por tamaño, encajada y no estirada: el lado largo fija la escala y el corto queda centrado. Los tres tamaños pequeños se empaquetan luego en un ICO, que no es un formato de imagen sino un directorio: una cabecera, una entrada de tabla por fotograma y los propios fotogramas PNG añadidos detrás. Los tamaños grandes salen como archivos PNG sueltos, porque esa es la forma en la que las plataformas que los piden los nombran en un manifiesto o en una etiqueta link.

    Qué tener en cuenta

    A dieciséis píxeles no queda detalle

    Un favicon en una pestaña ocupa más o menos lo que un punto en una página impresa. Un logotipo con texto, un eslogan o unas líneas finas se vuelven una mancha a ese tamaño por mucha resolución que tenga el original. Los iconos que funcionan son una letra, una forma simple o una silueta rotunda, lo que suele significar simplificar el dibujo y no encogerlo.

    Se asume un cuadrado, y casi ningún logotipo lo es

    Un icono es cuadrado en todos los sitios donde se usa, así que un logotipo ancho se encaja dentro de uno con espacio arriba y abajo. Es el resultado honesto, y significa que una marca horizontal acaba pequeña en mitad del encuadre. Un detalle recortado del logotipo casi siempre da mejor icono que el logotipo entero.

    Los archivos se crean, el montaje es tuyo

    Lo que vuelve son favicon.ico y tres PNG. Dónde van y cómo se declaran depende de tu sitio, con el ICO en la raíz, una etiqueta apple-touch-icon para iOS y los dos PNG grandes nombrados en un manifiesto para Android. Aquí no se escribe ese marcado por ti ni se adivina la estructura de tus carpetas.

    Límites

    Los archivos de hasta unos 20 MB funcionan sin problemas. A partir de ahí el techo es la memoria de tu dispositivo, no una regla que impongamos nosotros: el trabajo ocurre en tu propia máquina. Probado en Chrome 140, Firefox 143, Safari 18.

    El juego de iconos, y por qué es este

    Un favicon dejó de ser un solo archivo hace tiempo, pero tampoco se ha convertido en treinta. Con cuatro se cubre prácticamente todo lo que hay en uso.

    favicon.ico lleva tres fotogramas de 16, 32 y 48 píxeles. La ruta raíz siguen pidiéndola directamente rastreadores y clientes antiguos que nunca leyeron una etiqueta link, y el ICO es lo que los resultados de búsqueda dibujan con más fiabilidad.

    icon-180.png es lo que usa iOS cuando alguien añade un sitio a su pantalla de inicio. icon-192.png e icon-512.png son los dos tamaños que declara un manifiesto en Android, el primero para el lanzador y el segundo para la pantalla de arranque.

    Lo que va más allá es decoración, y una carpeta con treinta archivos hace más difícil encontrar los cuatro que importan.

    Encajado, nunca estirado

    Los iconos son cuadrados. Los logotipos casi nunca. Ante una marca ancha, esto la escala hasta que el lado largo cabe y centra el corto, dejando vacío el resto del cuadrado, o relleno si has pedido un color de fondo.

    La alternativa sería estirar, y un logotipo aplastado es peor que un margen.

    Qué es en realidad un ICO

    Vale la pena saberlo, porque explica por qué esto no necesita ningún codificador. Un ICO es un contenedor: seis bytes de cabecera, dieciséis bytes de entrada de directorio por fotograma y después los fotogramas uno tras otro. Desde Windows Vista un fotograma puede ser un PNG tal cual, así que no hay otro formato de mapa de bits que escribir, ni filas al revés, ni máscara de transparencia que calcular.

    El mismo código construye el favicon de este sitio durante su compilación.

    Se crea aquí, no en otro sitio

    Tu logotipo se descodifica, se dibuja y se codifica dentro de esta pestaña. No se sube, y para un dibujo que todavía no se ha anunciado esa es la diferencia entre una decisión de diseño y una filtración.

    Tus archivos nunca salen de tu navegador. Última actualización: 2026-08-07.