Utilia
Categories ▾
Idioma: ca ▾

Generador de favicons

Crea favicon.ico, icones PNG, apple-touch-icon i site.webmanifest a partir d'una imatge o un emoji, amb etiquetes HTML a punt. Baixa un ZIP, sense pujar res.

Origen

Ajust
site.webmanifest

Com crear un favicon

  1. A Origen, tria Imatge o Text o emoji. - Imatge: deixa anar un PNG, JPG, WebP o SVG. Funciona millor amb un logotip quadrat d’almenys 512 × 512 px. Tria Imatge sencera per encabir-la dins de la icona, o Omple i retalla per cobrir el quadrat. - Text o emoji: escriu una lletra, unes inicials o un emoji i després tria el Tipus de lletra, la Negreta i el Color del text.
  2. Defineix el Color de fons, o marca Fons transparent. Tria una Forma (Quadrada, Arrodonida o Cercle) i un Marge (%) per deixar espai al voltant del contingut.
  3. Si vols, obre site.webmanifest per introduir el Nom de l’aplicació (manifest web), el Nom curt, el Color del tema i la URL de la carpeta de les icones (deixa / si els fitxers van a l’arrel del teu lloc web).
  4. Fes clic a Genera els favicons. Les icones apareixen a mida real, al costat d’una pestanya de navegador simulada. A partir d’aquí, cada canvi les actualitza a l’instant.
  5. Fes clic a Baixa el ZIP, puja els fitxers al teu lloc web, i després Copia les etiquetes i enganxa-les dins del <head> de les teves pàgines.

Què hi ha al ZIP

Fitxer Mida Ús
favicon.ico 16, 32 i 48 px Pestanyes del navegador, marcadors, navegadors antics, Windows
favicon-16x16.png 16 × 16 Pestanyes del navegador
favicon-32x32.png 32 × 32 Pestanyes en pantalles d’alta densitat, dreceres a la barra de tasques
apple-touch-icon.png 180 × 180 Pantalla d’inici de l’iPhone i l’iPad
android-chrome-192x192.png 192 × 192 Pantalla d’inici d’Android (manifest web)
android-chrome-512x512.png 512 × 512 Pantalles de presentació d’instal·lació (manifest web)
site.webmanifest — Nom, colors i icones d’un lloc web instal·lable
favicon-tags.html — Les etiquetes HTML, a mode de referència

El fitxer ICO conté tres imatges PNG, un format que Windows (des de Vista) i tots els navegadors actuals llegeixen. L’apple-touch-icon sempre es desa sobre un fons sòlid, perquè iOS mostra els píxels transparents en negre; si el fons és transparent, s’utilitza el blanc.

Les etiquetes HTML

Les etiquetes generades tenen aquest aspecte (amb la URL de la teva carpeta):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Els navegadors també demanen /favicon.ico automàticament a l’arrel del teu domini, de manera que tenir-lo allà ajuda fins i tot a les pàgines sense les etiquetes.

Consells de disseny

  • Fes-lo senzill. A 16 × 16 px els detalls desapareixen. Una sola lletra, un símbol gruixut o la versió més simple del teu logotip es llegeix millor.
  • Mira la previsualització a mida real. La icona de 16 px de la pestanya simulada és el que veuen realment els visitants.
  • Pensa en el mode fosc. Un logotip fosc sobre fons transparent pot desaparèixer als temes foscos del navegador; un fons de color o un petit marge ajuda.
  • Els emojis es veuen diferents a cada sistema, perquè cada plataforma els dibuixa amb el seu propi estil. Els fitxers PNG conserven l’aspecte del teu dispositiu.

Preguntes freqüents

Quines mides necessita un favicon?

A la pràctica: un favicon.ico amb 16, 32 i 48 px, un apple-touch-icon de 180 px i PNG de 192 i 512 px per al manifest web. Aquesta eina els crea tots a partir d’un sol origen.

Puc fer servir un logotip SVG?

Sí. Els fitxers SVG es dibuixen a alta resolució abans de crear les icones. L’SVG es mostra com una imatge simple, de manera que els seus scripts mai no s’executen.

Com faig un favicon amb un emoji?

Tria Text o emoji, escriu o enganxa l’emoji, tria un fons o deixa’l transparent, i genera. El resultat és un PNG i un ICO de veritat, de manera que funciona a tots els navegadors.

Per què no apareix el meu favicon nou?

Els navegadors desen els favicons a la memòria cau de manera agressiva. Recarrega la pàgina buidant la memòria cau, obre el lloc en una finestra privada o afegeix una versió a l’URL, com /favicon.ico?v=2.

Es puja la meva imatge?

No. Les icones, el ZIP i el manifest es creen al teu navegador; res no surt del teu dispositiu.

Eines relacionades