Generador de favicons de texto
Se recomienda usar 1-2 caracteres para obtener mejores resultados
Text to Icon
Enter any text to automatically generate professional favicon icons with various fonts and styles
Custom Styles
Rich customization options including fonts, colors, background shapes, and images
Live Preview
WYSIWYG live preview shows changes immediately as you adjust parameters
What is a Favicon?
Favicon (short for favorite icon) is a small icon displayed in browser tabs, bookmarks, and other interface elements. It helps users quickly identify your website among multiple open tabs and bookmarks.
How to Use Favicons
To add a favicon to your website, you need to:
- Generate and download the Favicon package using our tool.
- Unzip the downloaded package and place all files in your website’s root directory.
- Add the following HTML code to the <head> section of your website:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">HTMLFormat Explanations
ICO Format (.ico)
Traditional favicon format compatible with all browsers including older versions of Internet Explorer. Typically contains multiple sizes (16x16, 32x32, 48x48).
PNG Format (.png)
Preferred format for modern browsers, supports transparent backgrounds, smaller file sizes. 16x16 for tabs, 32x32 for taskbars, 48x48 for desktop shortcuts.
Android Chrome Icons
192x192 and 512x512 for Android devices’ PWAs (Progressive Web Apps), displayed when users add your website to their home screen.
Apple Touch Icon
180x180 designed specifically for iOS devices (iPhone, iPad). Apple automatically adds rounded corners and shine effects when users add it to their home screen.
Diseñar favicons de texto que sigan legibles a 16 px
Los favicons de texto se deciden en el tamaño de pestaña. En un generador de favicon a partir de texto, estos parámetros importan más que en cualquier herramienta de imágenes: lo que se ve nítido en la vista previa de 512 px puede convertirse en una mancha ilegible en una pestaña real.
Familia tipográfica
Las sans-serif pesadas (Arial Black, Helvetica Bold, Futura) resisten mejor el renderizado a 16×16. Los trazos finos de fuentes serif, script o condensadas suelen desaparecer por completo al tamaño de pestaña, aunque parezcan nítidos en la vista previa.
Número de caracteres
Una letra es lo ideal. Un monograma de dos letras funciona si reduces un paso el tamaño de fuente; tres o más caracteres serán ilegibles en una pestaña de 16 píxeles: reserva los textos largos para el icono táctil de Apple de 180×180.
Contraste primer plano/fondo
Apunta a una ratio superior a 7:1. Las pestañas se representan en temas claro y oscuro: un texto gris medio sobre fondo transparente desaparece en uno de ellos, mientras que una forma rellena con texto blanco se lee en ambos.
Forma del fondo
Un radio de esquina del 15-20 % se percibe como icono de aplicación moderna a cualquier tamaño. Los fondos totalmente transparentes parecen limpios en la vista previa, pero flotan de forma ilegible sobre barras de pestañas oscuras: comprueba ambos temas antes de publicar.
Relleno (padding)
Mantén el glifo dentro del 60-70 % del lienzo. Los navegadores dibujan los favicons más pequeños que el tamaño nominal (un icono de 16 px en un hueco mayor en pantallas de alta densidad) y los glifos que tocan los bordes se recortan visualmente.