Arrastra una imagen aquí o haz clic para explorar
PNG, JPG, SVG — recomendado 512×512 px o mayor
| Size | Filename | Use case |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (most common) |
| 32×32 | favicon-32x32.png | Browser tab (HiDPI), taskbar shortcut |
| 48×48 | favicon.ico (embedded) | Windows taskbar pinned sites |
| 57×57 | favicon-57x57.png | iOS non-retina home screen (legacy) |
| 72×72 | favicon-72x72.png | iPad non-retina (legacy) |
| 96×96 | favicon-96x96.png | Android, Google TV |
| 114×114 | favicon-114x114.png | iPhone retina (legacy) |
| 144×144 | favicon-144x144.png | iPad retina, Windows 8 tile |
| 152×152 | favicon-152x152.png | iPad retina (iOS 7+) |
| 180×180 | apple-touch-icon.png | iPhone / iPad modern (iOS 8+) |
| 192×192 | android-chrome-192x192.png | Android Chrome, PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA splash screen, maskable icon |
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <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" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
Los navegadores modernos necesitan: 16×16 y 32×32 (pestaña/acceso directo del navegador), 48×48 (barra de tareas de Windows), 57×57 y 72×72 (iOS no retina), 96×96 (Android Chrome), 114×114 y 144×144 (iOS/Android retina), 152×152 y 180×180 (pantalla de inicio de iOS), 192×192 y 512×512 (splash/enmascarable de PWA).
Use un PNG o SVG cuadrado de 512×512 px o mayor para mejores resultados. Evite imágenes con detalles importantes cerca de los bordes. SVG es ideal porque escala sin pérdida de calidad.
Sí, si quiere que su sitio sea instalable como Progressive Web App (PWA). El webmanifest contiene nombre, rutas de iconos y color de fondo para la pantalla de inicio de la app.
Coloque todos los archivos generados en la raíz de su sitio y agregue estas etiquetas a su HTML head: '<'link rel='icon' href='/favicon.ico'>, '<'link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>, '<'link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, y '<'link rel='manifest' href='/site.webmanifest'>.