Generador de favicons
Crea un paquete de favicon completo desde SVG, PNG o JPG
Convierte un logotipo SVG, PNG o JPG en favicon.ico, archivos PNG para el navegador, un icono Apple Touch, iconos Android Chrome, site.webmanifest y etiquetas HTML listas para pegar. Descarga en ZIP el paquete completo, generado de forma privada en tu navegador.
Editando valores predeterminados para nuevos archivos
Añade un logotipo para verlo en todos los tamaños de favicon.
Salida
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Pon todos los archivos excepto index.html en la carpeta desde la que se sirve tu sitio, y luego pega estas etiquetas en el head de cada página.
Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.
¿Qué es un favicon?
Un favicon es el pequeño icono que el navegador muestra junto al título de una página: en la pestaña, en los marcadores, en el historial y en los resultados de algunos buscadores. Empezó siendo un único favicon.ico de 16 × 16 en la raíz del sitio. Hoy ese mismo trabajo lo hace un conjunto de archivos en distintos tamaños, porque una pestaña del navegador, un acceso directo en la pantalla de inicio y un aviso de instalación renderizan el icono a escalas muy distintas.
Por qué un paquete de favicons en lugar de un solo archivo
Un único favicon.ico sigue funcionando, pero ya no basta por sí solo. Las pestañas del navegador leen la entrada de 16 o 32 px del .ico, Safari pide un apple-touch-icon de 180 px cuando se añade una página a la Home Screen, y Android Chrome lee los PNG de 192 y 512 px de un manifiesto web para su aviso de instalación y su pantalla de bienvenida. Exportarlos de uno en uno significa seis exportaciones, seis ocasiones de recortar algo de forma distinta y un manifiesto escrito a mano. Generarlos desde una sola fuente mantiene todos los tamaños idénticos y solo cuesta soltar un archivo.
Cómo generar un paquete de favicons
- 1
Suelta tu logotipo, o haz clic en SELECCIONAR ARCHIVOS, para añadirlo. Sirven SVG, PNG, JPG, WebP, GIF, BMP, AVIF y TIFF, hasta 40 a la vez.
- 2
Ajusta el fondo, el radio de esquinas, el padding, la escala y la alineación, y luego escribe el nombre de la aplicación y el nombre corto que van en el manifiesto. Todos los tamaños se redibujan a medida que los cambias.
- 3
Haz clic en GUARDAR TODO para descargar favicon-package.zip, y luego pega las cuatro etiquetas link de la pestaña HTML en el head de cada página.
Privacidad: tus archivos nunca salen del navegador
La conversión se ejecuta localmente en su navegador usando JavaScript y WebAssembly. No hay carga de archivos ni conversión del lado del servidor, por lo que los archivos que agrega permanecen en su dispositivo.
El procesamiento local ayuda a proteger logotipos confidenciales, documentos internos y obras de arte inéditas de los clientes. Las páginas y el código de conversión se almacenan en caché a medida que los utiliza, por lo que las herramientas que ya ha abierto pueden seguir funcionando sin una conexión de red.
Preguntas frecuentes
¿Qué archivos obtengo y dónde van?
favicon.ico (con 16, 32 y 48 px dentro de un mismo archivo), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest y un index.html con las etiquetas. Copia todo excepto index.html en la carpeta desde la que se sirve tu sitio, y luego pega las cuatro etiquetas link en el head de cada página.
¿Puedo usar un logotipo PNG o JPG en lugar de un SVG?
Sí. Sirven SVG, PNG, JPG, WebP, GIF, BMP, AVIF y TIFF. Un SVG sigue siendo la mejor fuente, porque cada tamaño se dibuja a partir de los vectores en lugar de remuestrearse. Un logotipo ráster de menos de 512 px se amplía para los iconos más grandes y se verá borroso; la fila del archivo te avisa cuando eso ocurre.
¿Sigo necesitando favicon.ico si publico iconos PNG?
Consérvalo. Es el archivo que los navegadores y los rastreadores piden a la raíz del sitio cuando ninguna etiqueta los dirige a otra parte, y es el único que lleva varios tamaños en un mismo archivo. Las entradas PNG cubren los navegadores que las prefieren, y el manifiesto cubre el aviso de instalación de Android.