Generador de favicons
Funciona por completo en tu navegador. Tus archivos y datos nunca salen de tu dispositivo.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Acerca de esta herramienta
Sube un logo o cualquier imagen más o menos cuadrada y la página la dibuja en los seis tamaños que necesita un sitio web: 16, 32 y 48 píxeles para las pestañas del navegador, 180 para el icono que iOS guarda en la pantalla de inicio, y 192 y 512 para Android. La descarga es un único ZIP con esos PNG, un favicon.ico, un site.webmanifest y una copia del HTML que necesitas pegar en tu <head>.
¿Qué contiene el ZIP?
Seis PNG (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png e icon-512.png), más un favicon.ico con las versiones de 16, 32 y 48 píxeles metidas en un solo archivo. El formato ICO admite imágenes comprimidas en PNG desde Windows Vista, así que el archivo se mantiene pequeño y los navegadores antiguos que solo buscan /favicon.ico igual encuentran algo que mostrar.
site.webmanifest enumera los iconos de 192 y 512 píxeles y lleva el nombre de la app que escribas en el menú de ajustes, junto con un short_name recortado a 12 caracteres, que es más o menos lo que Android muestra debajo del icono en la pantalla de inicio. Si dejas el campo vacío, pone “My site”. El último archivo, favicon.html, son las mismas cinco etiquetas <link> que el botón de copiar pone en tu portapapeles.
¿Se suben mis imágenes a algún sitio?
No. Tu imagen se dibuja en un elemento canvas dentro de la página y el propio navegador la codifica a PNG, para luego comprimirla en el ZIP en la misma pestaña. Nada se envía a ningún servidor, así que un logo todavía sin publicar o la marca de un cliente jamás sale de tu máquina. Puedes abrir la página, desconectar el cable de red, y todo sigue funcionando igual.
¿Qué formatos acepta?
Se aceptan archivos PNG, JPEG, WebP y SVG. Una imagen cuadrada da el mejor resultado, porque la imagen se escala y se centra, así que un banner ancho termina con bandas transparentes arriba y abajo. El SVG es la mejor opción para un logo, ya que cada tamaño se dibuja a partir del vector en lugar de una imagen reescalada. Sea lo que subas, ten en cuenta que 16 píxeles es diminuto: un logotipo con texto completo se vuelve ilegible a ese tamaño, y una sola letra o símbolo se distingue mucho mejor.
Una vez generados los archivos, ten en cuenta que los navegadores guardan los favicons en caché durante mucho tiempo, así que puede hacer falta una recarga forzada antes de ver el icono nuevo. La página de MDN sobre tipos de enlaces explica qué hace cada etiqueta del fragmento de código.