Salta al contingut principal

Quins fitxers calen en un paquet de favicon?

Per Converty Team

Aprèn quins fitxers formen part d'un paquet de favicon pràctic, incloent-hi favicon.ico, icones PNG, Apple touch icons, icones Android i un site.webmanifest inicial.

Quins fitxers calen en un paquet de favicon?

Un paquet de favicon és fàcil de subestimar. Molta gent hi pensa com una sola imatge minúscula en una pestanya del navegador, però un lloc modern normalment necessita un conjunt petit d'actius relacionats. La icona de pestanya és només una superfície. Les dreceres mòbils, les icones Android, les Apple touch icons i les referències del manifest també poden necessitar fitxers propis.

L'objectiu pràctic no és recopilar totes les variants d'icona possibles. L'objectiu és enviar un paquet enfocat que cobreixi superfícies comunes de navegador i d'app sense convertir la preparació del llançament en exportació manual. El generador de favicon / icones d'app de Converty està pensat per a aquesta feina: començar amb una imatge quadrada i descarregar un bundle amb els fitxers comuns junts.

El fitxer central continua sent favicon.ico

favicon.ico continua sent el fitxer de favicon més familiar. És l'actiu que la gent espera veure associat a pestanyes del navegador, marcadors i convencions de favicon més antigues.

Encara que un lloc també inclogui icones PNG i un web manifest, favicon.ico continua sent útil perquè cobreix un camí tradicional que molts navegadors i eines entenen. En un lloc simple, sovint és el primer fitxer que algú comprova quan la icona de pestanya no es veu bé.

Les icones PNG cobreixen superfícies modernes

Els paquets d'icones moderns acostumen a incloure fitxers PNG en diverses mides. Diferents navegadors, dreceres i contextos de visualització poden fer servir dimensions diferents. Exportar només una mida pot obligar el navegador o el dispositiu a escalar la imatge, i això pot fer que les icones petites es vegin toves o massa carregades.

Per això l'art font importa. Una imatge quadrada, simple i llegible produeix millors resultats a tot el paquet que un gràfic detallat comprimit en diverses mides. Converty no pot convertir un logotip complex en una marca minúscula perfecta, però pot eliminar la feina repetitiva d'exportació un cop tens una font adequada.

Apple touch icons i icones Android serveixen superfícies diferents

Les Apple touch icons s'utilitzen en superfícies de drecera de dispositius Apple. Les icones preparades per a Android donen suport a casos relacionats d'instal·lació i drecera en superfícies orientades a Android.

Aquests fitxers són fàcils d'oblidar perquè no sempre són visibles durant una comprovació normal en navegador d'escriptori. El lloc pot semblar correcte en una pestanya i encara faltar-li actius importants quan algú el desa a la pantalla d'inici d'un dispositiu. Un paquet complet redueix aquesta probabilitat.

Si estàs decidint si una Apple touch icon és separada d'un favicon, llegeix Apple Touch Icon vs Favicon: què ha d'incloure un lloc modern?.

El manifest uneix les superfícies semblants a app

Un site.webmanifest inicial dona a una web app o a un lloc un espai per descriure icones i metadades de visualització relacionades. No substitueix els fitxers d'icona. Els apunta perquè les superfícies compatibles puguin entendre quins actius hi ha disponibles.

Per això Converty inclou un manifest inicial al paquet. El fitxer generat dona un punt de partida pràctic, però encara has de col·locar els actius al projecte i referenciar-los des de la configuració del lloc.

Checklist pràctic d'un paquet de favicon

Un paquet de favicon enfocat normalment hauria d'incloure:

  • favicon.ico
  • diverses mides d'icona PNG
  • output d'Apple touch icon
  • output d'icona preparada per a Android
  • un site.webmanifest inicial

Això és suficient per a molts llocs petits, llançaments SaaS, pàgines de màrqueting i projectes de documentació. Configuracions més especialitzades poden necessitar actius addicionals específics de plataforma, però el paquet comú treu del mig la feina rutinària.

Obre el generador de favicon / icones d'app quan tinguis una imatge font quadrada i necessitis els fitxers comuns del paquet de favicon agrupats en una sola exportació. Per al workflow més ampli, llegeix Com generar un paquet complet de favicon des d'una sola imatge.

També et pot interessar