¿Cómo agrego un favicon a mi sitio web?

Coloque el favicon.png descargado en la raíz de su sitio y agregue esto a su : . Para compatibilidad con formato ICO, puede convertir el PNG usando un convertidor ICO en línea.

Generador de Favicon - Cree Iconos de Navegador Personalizados al Instante

Genere un favicon PNG personalizado basado en texto con opciones de color y forma

Otros

Tool

Text (1–2 characters)

Shape

Background Color

Text Color

Preview

32×32

64×64

Cómo usar

1Ingrese 1 o 2 caracteres para el texto del favicon (por ejemplo, las iniciales de su marca)
2Seleccione una forma: cuadrado, esquinas redondeadas o círculo
3Elija un color de fondo usando el selector de color o la entrada hexadecimal
4Elija un color de texto para asegurar un buen contraste
5Vea la vista previa en vivo en 32×32 y 64×64 píxeles
6Haga clic en «Descargar PNG» para guardar su favicon

Preguntas frecuentes

El tamaño estándar de un favicon es 16×16 o 32×32 píxeles. La mayoría de los navegadores modernos también admiten 48×48 y superior. Esta herramienta genera un PNG de 64×64 px que los navegadores escalarán automáticamente.

Coloque el favicon.png descargado en la raíz de su sitio y agregue esto a su <head>: <link rel="icon" type="image/png" href="/favicon.png">. Para compatibilidad con formato ICO, puede convertir el PNG usando un convertidor ICO en línea.

Los favicons basados en iniciales son limpios, legibles en tamaños pequeños e inmediatamente reconocibles. Muchas marcas populares (Google, Pinterest, YouTube) usan iconos simples de letras porque permanecen nítidos a 16–32 px, donde los logotipos complejos se vuelven ilegibles.

Sí. Usted genera el favicon completamente en su navegador usando HTML Canvas — no se envían datos a ningún servidor. El PNG resultante es suyo para usar libremente, incluyendo proyectos comerciales.

Cómo usar

1Ingrese 1 o 2 caracteres para el texto del favicon (por ejemplo, las iniciales de su marca)

2Seleccione una forma: cuadrado, esquinas redondeadas o círculo

3Elija un color de fondo usando el selector de color o la entrada hexadecimal

4Elija un color de texto para asegurar un buen contraste

5Vea la vista previa en vivo en 32×32 y 64×64 píxeles

6Haga clic en «Descargar PNG» para guardar su favicon

Preguntas frecuentes