No se sube nada.
Obtienes favicon.ico, los tamaños PNG, un Apple touch icon, iconos de Android y maskable, un web manifest y el HTML para pegar, todo en un solo .zip. Crea un conjunto completo de iconos para tu sitio web a partir de una letra o una imagen. Es gratis y privado.
Cómo crear un favicon
- En Empezar desde, elige Una letra o Una imagen. Para una imagen, pulsa Elegir una imagen.
- Para una letra, escribe tus Letras y elige el Grosor, la Fuente, el Color del texto, el Estilo y el Fondo.
- Elige la Forma: Cuadrada, Redondeada o Círculo. Ajusta el Relleno o Mantén el fondo transparente.
- En Tu sitio, añade el Nombre del sitio o de la app, el Nombre corto y la Carpeta de iconos.
- Revisa la Vista previa, que muestra el icono en una pestaña del navegador, en los resultados de búsqueda y en un teléfono.
- Pulsa Copiar HTML para obtener el código que debes pegar en tu página y Descargar todo (.zip) para los archivos.
Para qué sirve cada archivo
favicon.ico contiene versiones de 16, 32 y 48 píxeles en un solo archivo y funciona en todos los navegadores, incluso los antiguos. Los favicons PNG dan a los navegadores modernos un icono de pestaña nítido. apple-touch-icon.png se usa cuando alguien añade tu sitio a la pantalla de inicio de un iPhone o iPad, y los iconos de Android más site.webmanifest se usan cuando tu sitio se instala en Android o como app.
¿Qué es un icono maskable?
Android recorta los iconos de las apps en círculos, squircles o cuadrados redondeados según el teléfono. Un icono maskable llena todo el cuadrado con tu color de fondo y mantiene el logotipo dentro del 80 % central, para que no se corte nada importante sea cual sea la forma que use el teléfono.
Consejos para un favicon claro
A 16 píxeles, el detalle desaparece. Una letra en negrita, una marca sencilla o la parte más reconocible de tu logotipo funciona mejor que el logotipo completo con palabras. Un contraste fuerte entre la marca y el fondo ayuda a destacar entre otras pestañas, tanto en temas de navegador claros como oscuros.
Añadir los iconos a tu sitio
- Descomprime los archivos y súbelos a la carpeta que nombraste en Carpeta de iconos, normalmente la raíz de tu sitio.
- Pega el HTML copiado en la sección head de cada página.
- Recarga la página y borra la caché de tu navegador si sigue apareciendo el icono antiguo. Los navegadores guardan los favicons durante mucho tiempo.
- Empieza con una imagen cuadrada de al menos 512 píxeles de ancho para que cada tamaño se vea nítido.
Quién lo usa
Dueños de pequeños negocios con un sitio web nuevo, freelancers que crean sitios para clientes, bloguers y estudiantes que ponen un proyecto en línea. Para cambiar el tamaño o convertir antes tu logotipo, prueba el convertidor de imágenes.
Preguntas
¿Se sube mi imagen?
No. Los iconos se crean en tu navegador.
¿Qué formatos de imagen puedo usar?
PNG, JPG, SVG y WebP.
¿Por qué sigue apareciendo mi favicon antiguo?
Los navegadores guardan los favicons en caché durante mucho tiempo. Borra la caché o abre el sitio en una ventana privada para comprobarlo.