Generador de favicon
Respuesta breve
Crea favicon.ico, el icono táctil de Apple y los iconos de la web app, además de las etiquetas HTML, a partir de una imagen.
iOS muestra las zonas transparentes del icono táctil de Apple en negro, así que estos dos iconos llevan un fondo sólido. Los demás iconos mantienen la transparencia.
Qué hace
Crea un conjunto de favicons a partir de una imagen: favicon.ico con iconos de 16, 32 y 48 px, un icono táctil de Apple de 180 px, iconos de 192 y 512 px para el manifiesto de la web app, un icono maskable de 512 px y las etiquetas HTML que debes añadir a tus páginas. Un SVG subido también se incluye como icon.svg.
Por qué importa
Los navegadores muestran el favicon en las pestañas y los marcadores, los móviles usan el icono táctil en la pantalla de inicio, y Google Search puede mostrar el favicon junto a tus páginas en los resultados. Google solo lo muestra cuando el icono es cuadrado, mide al menos 8×8 px (se recomienda más de 48×48 px) y es rastreable, junto con la página de inicio.
Cómo funciona
-
Elige una imagen cuadrada, lo ideal es un SVG o un PNG de al menos 512×512 px
-
Elige un color de fondo para el icono táctil de Apple y el icono maskable
-
Tu navegador dibuja cada tamaño y empaqueta los más pequeños en favicon.ico
-
Descarga los archivos, copia las etiquetas HTML y prueba el resultado con el comprobador de favicon
Ejemplo de entrada y salida
imagen: logo.svg fondo: #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg SVG original manifest.webmanifest iconos del manifiesto <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Quién lo usa
-
Dueño de un pequeño negocio
Convertir un logo en todos los archivos de iconos que necesita un sitio web nuevo.
-
Desarrollador web
Generar el conjunto de iconos y los iconos del manifiesto para una web app progresiva.
-
Diseñador
Ver cómo se ve un logo a 16 px antes de entregarlo.
Preguntas frecuentes
¿Qué archivos necesito?
La mayoría de los sitios usan favicon.ico, un icono táctil de Apple, y iconos de 192 y 512 px para el manifiesto de la web app. Un icono SVG es opcional; los navegadores que lo admiten pueden usarlo a cualquier tamaño.
¿Por qué el archivo ICO contiene imágenes PNG?
El formato ICO puede almacenar imágenes PNG, y todos los navegadores actuales las leen. El archivo guarda versiones de 16, 32 y 48 px para que cada navegador elija el tamaño que necesita.
¿Qué es un icono maskable?
Un icono con espacio extra alrededor del logo, para que Android pueda recortarlo en un círculo u otra forma. La herramienta mantiene toda la imagen dentro de la zona segura, así que no se corta nada.
¿Por qué el icono táctil de Apple y el icono maskable llevan un color de fondo?
iOS muestra las zonas transparentes del icono táctil en negro, y un icono maskable tiene que rellenar toda su forma, así que ambos llevan el color que elijas. Los demás iconos mantienen la transparencia.
¿Se sube mi imagen?
No. Los iconos se dibujan en tu navegador, y la imagen nunca sale de tu dispositivo.