Acerca de Generador de favicon
Un favicon es el pequeño icono que los navegadores muestran en la pestaña, en los marcadores y cuando un sitio se añade a la pantalla de inicio de un teléfono. El Generador de favicon crea el juego completo de archivos que necesita un sitio web a partir de una imagen, de una o dos letras o de un emoji.
Obtienes favicon.ico, iconos PNG para navegadores, iPhone y Android, un manifiesto web y las líneas HTML que debes pegar en tus páginas. Los iconos se dibujan en tu navegador; no se sube nada.
Cómo se usa
- Elige a partir de qué se crea el icono: Imagen, Texto o Emoji.
- Para una imagen, elige un archivo y ajusta el margen y el fondo. Para texto, escribe uno o dos caracteres y elige la fuente, los colores y la forma. Para un emoji, escribe o pega un solo emoji.
- Revisa la vista previa a 16, 32 y 180 píxeles sobre fondos claros y oscuros.
- Haz clic en “Descargar favicon.zip”, sube los archivos a la carpeta raíz de tu sitio web y pega el código HTML dentro de la etiqueta <head> de tus páginas.
Funciones
- Tres formas de empezar: Usa un logotipo o una foto (incluido SVG), una o dos letras en cualquier idioma, o un emoji.
- Todos los tamaños en un ZIP: favicon.ico con iconos de 16, 32 y 48 px, iconos PNG de 16, 32, 180, 192 y 512 px, y site.webmanifest.
- Nítido en tamaños pequeños: Un icono maestro grande se reduce por pasos, lo que mantiene los bordes suaves incluso a 16 px.
- Listo para iPhone: El Apple touch icon recibe un fondo sólido, porque iOS muestra en negro las partes transparentes.
- Privado: Los iconos se dibujan en tu dispositivo. No se sube ni se guarda nada.
Ejemplos
Un icono rápido para un sitio nuevo
Escribe la primera letra del nombre del sitio, elige el color de tu marca y la forma Redondeado, y descarga el ZIP.
Convertir un logotipo en favicon
Elige el logotipo en SVG o PNG y añade un poco de margen y un color de fondo para que siga visible en las pestañas oscuras del navegador.
Limitaciones y notas
- Los emojis se ven distintos en los dispositivos de Apple, Google y Windows. El icono usa los emojis del dispositivo en el que lo creas.
- El texto usa las fuentes instaladas en tu dispositivo (la sans serif del sistema, Georgia o la fuente monoespaciada del sistema).
- No se crea un favicon SVG; los archivos son PNG e ICO, que todos los navegadores admiten.
- Los archivos solo funcionan después de subirlos a la carpeta raíz de tu sitio web, junto a la página de inicio.
Preguntas frecuentes
¿Se sube mi imagen?
No. JavaScript abre la imagen, dibuja los iconos y los empaqueta en el ZIP dentro de tu navegador.
¿Qué archivos necesito de verdad?
Con favicon.ico basta para la pestaña del navegador en todos los navegadores. Los archivos PNG, el Apple touch icon y site.webmanifest añaden iconos más nítidos para pantallas de alta resolución, la pantalla de inicio del iPhone y Android.
¿Dónde pongo los archivos?
En la carpeta raíz del sitio web, para que el icono esté disponible en /favicon.ico. Luego añade las líneas HTML dentro de la etiqueta <head> de cada página.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons en caché durante mucho tiempo. Vuelve a cargar la página después de borrar la caché o ábrela en una ventana privada para ver el icono nuevo.