ximg.es

Generador de favicon

Escriu una lletra o puja el teu logotip i descarrega totes les icones que necessita una web avui, amb el codi per al <head>. Es genera al teu navegador.

Crear a partir de
Vista prèvia de la icona
180 × 180

    HTML per al <head>

    <link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

    Quins fitxers necessita una web avui

    Ja no calen vint mides. Amb aquests cinc fitxers quedes bé a tots els navegadors, a la pantalla d’inici del mòbil i a les cerques de Google:

    Com instal·lar-lo

    Descarrega el ZIP, copia els fitxers a l’arrel de la teva web (on hi ha l’index.html) i enganxa l’HTML dins del <head>. Si més endavant canvies la icona, el navegador pot trigar a adonar-se’n perquè la desa a la memòria cau: canviar el nom del fitxer o afegir ?v=2 a l’enllaç ho resol.

    Consells de disseny

    Un favicon provisional en una línia

    Si només necessites alguna cosa mentre maquetes, el generador d’ximg.es ja serveix una imatge quadrada amb una lletra, sense descarregar res: 

    <link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

    Preguntes freqüents

    Quina mida ha de tenir un favicon?

    El favicon.ico porta 16, 32 i 48 px. A més, convé un PNG de 180 px per a l’iPhone i altres de 192 i 512 px per a Android. Aquesta eina els genera tots.

    Cal el favicon.ico si ja tinc l’SVG?

    Sí. Safari i algunes eines encara no fan servir l’SVG, i Google i els lectors de RSS demanen /favicon.ico directament.

    Es pugen les meves imatges a algun servidor?

    No. Les icones es dibuixen amb canvas al teu navegador i el ZIP també s’hi crea.

    Per què no s’actualitza el meu favicon?

    Els navegadors el desen a la memòria cau molt de temps. Afegeix ?v=2 a l’enllaç, o obre la web en una finestra privada per comprovar el nou.

    Per què la icona de l’iPhone té fons?

    Perquè iOS no admet transparència a apple-touch-icon i pintaria el fons de negre. L’eina hi posa el teu color de fons, o blanc si has triat fons transparent.

    Què és el site.webmanifest?

    Un JSON que descriu la teva web com a aplicació: nom, icones i colors. Android el fa servir quan s’afegeix la web a la pantalla d’inici.

    Més eines

    Veure totes les eines · Generador d'imatges placeholder