Crea favicons e iconos de web app al instante
Un solo origen y todos los archivos que necesita un sitio moderno: un favicon.ico multirresolución, un favicon.svg vectorial, iconos Apple touch, iconos de lanzador y maskable de Android, un manifest web y el snippet del head que lo conecta todo.
Archivos a generar
Pega esto en tu <head>
Se actualiza con los archivos que hayas marcado. Copia el pack a la raíz de tu sitio y pega este bloque.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <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"> <meta name="theme-color" content="#3b82f6">
Cómo funciona
Elige un origen
Un emoji, de una a tres letras o tu propio logo. Subir un archivo solo lo deja en espera: no se genera nada hasta que tú lo pidas.
Dale estilo a la base
Forma, color sólido o degradado, borde y margen interior. La vista previa se redibuja con cada cambio.
Colócalo a mano
Arrastra para mover, rueda para hacer zoom en el cursor, gira. Ctrl+Z deshace cualquier paso.
Publica el pack
Descarga el ZIP, cópialo a la raíz de tu sitio y pega el snippet del head.
Un ICO multimarco de verdad
Los marcos de 16, 32 y 48 píxeles se escriben como BMP de 32 bits con su máscara AND, así que los shells antiguos de Windows y los lectores estrictos aceptan el archivo.
Squircle auténtico
La base redondeada es una superelipse, la misma familia de curva que usa iOS en los iconos de app, no un rectángulo redondeado disfrazado.
favicon.svg vectorial
Los iconos de emoji y de letras se exportan como marcado vectorial real, así que se mantienen nítidos en cualquier pantalla y en modo oscuro.
Un icono touch de iOS correcto
El icono de Apple se aplana sobre el color que elijas, porque iOS pinta la transparencia de la pantalla de inicio como negro sólido.
Encadenado con el resto de la suite
Envía el icono terminado a comprimir, recortar, convertir o quitar el fondo sin descargarlo y volver a subirlo.
Nada sale de la pestaña
Canvas y un compresor ZIP corriendo en tu navegador. Sin subidas, sin API, sin cuenta, y sigue funcionando sin conexión.
Renderizado una vez a 1024 píxeles y reducido como toca
Dibujar un emoji directamente en un marco de 16 píxeles es lo que hace que la mayoría de favicons generados parezcan una papilla: las tipografías de emoji en color caen a su bitmap más pequeño. FaviconBolt renderiza un único master de 1024 píxeles y deriva de él todos los tamaños, lo que a 16 píxeles queda un 87% más cerca de un reescalado ideal que dibujar a ese tamaño. Un paso opcional de enfoque, aplicado con alfa premultiplicado, devuelve el contraste de borde que se pierde al promediar.
Generación 100% local
Tu logo no sale nunca de tu ordenador. El renderizado, el binario ICO y el ZIP se construyen en la propia página, y las ilustraciones de esta página son SVG en línea, así que tampoco se descarga nada de un CDN.
Todos los archivos que un navegador va a pedir de verdad
Descomprime el ZIP en la raíz de tu sitio y pega el bloque del head generado. El manifest lleva el nombre real de tu sitio, su start URL y su ámbito en vez de un marcador de posición, así que el aviso de instalación muestra lo correcto.
Los marcos del ICO son BMP con máscara AND en vez de flujos PNG incrustados, el icono touch de Apple se entrega opaco, y el icono maskable de Android va a sangre para que la máscara del sistema no recorte tu dibujo dos veces.
Preguntas frecuentes
Q¿Qué hay dentro del archivo favicon.ico?+
Tres marcos de icono, 16x16, 32x32 y 48x48, empaquetados en un único binario. Se guardan como BMP de 32 bits con una máscara AND de 1 bit, que es el formato que entiende cualquier lector de iconos. Los marcos comprimidos en PNG solo se admiten desde Windows Vista y algunos analizadores siguen rechazándolos.
Q¿Por qué el icono touch de Apple tiene fondo sólido?+
iOS ignora el canal alfa en los iconos de la pantalla de inicio y compone cualquier transparencia sobre negro. Aplanar el icono touch sobre un color que elijas es la única forma de controlar cómo se ve una vez instalado.
Q¿Para qué sirve el icono maskable?+
Android aplica su propia máscara, que es un círculo en unos lanzadores y un squircle en otros. Un icono maskable se dibuja a sangre con el motivo dentro de una zona segura, para que el sistema pueda recortarlo sin cortar tu logo.
Q¿Puedo obtener un favicon.svg vectorial?+
Sí: en los modos de emoji y de letras es marcado vectorial genuino. Si subes un logo SVG también se mantiene vectorial. Para una imagen de píxeles incrustamos el render de 512 píxeles dentro del SVG y lo decimos, en vez de fingir que hemos vectorizado un JPEG.
Q¿Puedo colocar el icono a mano?+
Arrastra el lienzo para mover el dibujo, usa la rueda para acercarte hacia el cursor y mueve el control de rotación. Las flechas desplazan, más y menos hacen zoom, 0 restablece y Ctrl+Z retrocede por el historial. Manteniendo Alt se ve el original intacto.
Q¿Se sube algo?+
No. Los archivos los decodifica, renderiza y comprime tu propio navegador. No hay ninguna llamada a un servidor en ningún momento, que es también por lo que sigue funcionando con la red apagada.