Generador de favicon
Suelta tu logotipo una vez y obtén todos los iconos que necesita un sitio web, con el código para pegar en tus páginas.
Sellado en este dispositivo
Funciona en tu navegador. No se sube nada.
Sellado
Tu icono
Código para tus páginas
Coloca los archivos del ZIP en la raíz de tu sitio web y pega este código dentro del <head> de cada página.
Cómo funciona
-
Añade tu logotipo
Suelta un SVG, PNG o JPG, selecciónalo o pégalo. Una imagen cuadrada de al menos 512 × 512 píxeles da los iconos más nítidos.
-
Ajusta el aspecto
Añade un margen interior, un color de fondo o esquinas redondeadas, y comprueba el resultado en una pestaña del navegador y en la pantalla de inicio de un móvil.
-
Descarga y pega el código
Descarga el ZIP, coloca sus archivos en la raíz de tu sitio web y pega el código en el <head> de tus páginas.
Preguntas frecuentes
¿Qué archivos obtengo?
Un archivo favicon.ico con los iconos de 16, 32 y 48 píxeles, iconos PNG de 16, 32, 48, 192 y 512 píxeles, un apple-touch-icon.png de 180 píxeles para iPhone y iPad, y un archivo site.webmanifest que permite a Android usar tus iconos de 192 y 512 píxeles. Descárgalos uno a uno o todos juntos en un archivo ZIP.
¿Dónde coloco los archivos?
En la raíz de tu sitio web, junto a tu página de inicio, para que estén accesibles en direcciones como /favicon.ico. Después pega el código que aparece debajo de la vista previa dentro del <head> de cada página. Los navegadores también buscan /favicon.ico por su cuenta, así que incluso las páginas sin el código mostrarán tu icono.
¿Qué tamaño debe tener mi imagen?
Cuadrada y de al menos 512 × 512 píxeles, el tamaño del icono más grande. Un SVG es ideal: se dibuja nítido en cualquier tamaño. Una imagen más pequeña también sirve, pero entonces los iconos grandes se amplían y se ven algo borrosos.
¿Por qué mi icono se ve borroso o demasiado pequeño en la pestaña del navegador?
A 16 píxeles, los detalles finos y el texto delgado desaparecen. Usa un símbolo sencillo, como una letra o un pictograma, en lugar de un logotipo completo con palabras, deja un margen interior pequeño y elige «Recortar en cuadrado» si tu imagen es ancha.
¿Se sube mi imagen?
No. Tu imagen se lee, se redimensiona y se guarda en tu navegador, en tu dispositivo. Nunca se envía a ningún sitio.
¿Por qué el Apple touch icon tiene fondo?
El iPhone y el iPad redondean ellos mismos las esquinas de los iconos de la pantalla de inicio y muestran las zonas transparentes en negro. Por eso el Apple touch icon siempre lleva un fondo sólido y esquinas rectas: tu color de fondo, o blanco si elegiste transparente.