La presència visual d'un lloc web comença en elements tan petits com la pestanya del navegador, la llista de marcadors o la pantalla d'inici d'un dispositiu mòbil. Un favicon i un conjunt d'icones ben implementats no només reforcen la identitat de la marca, sinó que faciliten la navegació de l'usuari entre múltiples pestanyes obertes i milloren l'aspecte del lloc quan s'instal·la com una aplicació web. El Generador de favicons és una eina dissenyada per simplificar aquest procés de creació, transformant un únic fitxer d'imatge en tots els formats i mides necessaris per als estàndards web actuals.
Funcionament i processament local
Aquesta eina processa un fitxer d'imatge d'origen que proporcioneu i el converteix en una col·lecció completa de fitxers d'icones aptes per a diferents usos, com ara icones de pestanya de navegador, icones tàctils d'Apple i icones per a aplicacions web progressives (PWA). Un cop finalitzat el procés, l'eina empaqueta tots els fitxers generats en un únic fitxer ZIP descarregable i proporciona el fragment de codi HTML necessari per integrar-los directament al codi font del vostre lloc web.
Pel que fa a la privadesa, la imatge es converteix en icones directament al vostre navegador. No es puja res a BroBroGo, de manera que el processament de les dades es realitza de manera local en el vostre propi dispositiu.
Requisits de la imatge d'origen
Per obtenir un resultat òptim, és important tenir en compte el format i les dimensions del fitxer que s'utilitza com a punt de partida:
- Formats admesos: L'eina accepta fitxers en format PNG, JPG o SVG.
- Mida del fitxer: El límit màxim de fitxer admès és de 50 MB. Si s'intenta pujar un fitxer que supera aquest límit, es mostrarà l'error "Aquest fitxer supera els 50 MB. Utilitzeu una imatge d'origen més petita.".
- Dimensions recomanades: Per a imatges en format PNG o JPG, es recomana utilitzar una mida d'almenys 512 × 512 píxels. Si s'utilitza una imatge d'origen més petita, el sistema mostrarà l'avís "Imatge d'origen petita (
{w}×{h}px): les icones grans poden perdre definició. Per obtenir el millor resultat, utilitzeu una mida de 512 × 512 o superior, o bé un SVG.". Les imatges petites s'han d'escalar per generar les icones de major mida, fet que pot fer que es vegin toves o poc nítides.
L'eina llegeix les dimensions de la imatge carregada i mostra la seva amplada i alçada reals mitjançant l'indicador "{w} × {h} px".
Gestió de la forma i el fons de la imatge
Les icones de sortida són sempre quadrades. Atès que les imatges d'origen no sempre tenen una relació d'aspecte 1:1, l'eina ofereix dues opcions per gestionar l'ajust de les imatges no quadrades:
- Ajusta (amb marge): Aquesta és l'opció per defecte. Tota la imatge es manté visible, centrada i amb un marge al voltant per omplir l'espai restant fins a formar el quadrat.
- Omple (retalla): La imatge s'escala per omplir completament el quadrat, i es retallen les vores que sobresurten.
A més de l'ajust de la forma, es pot configurar el comportament del fons de la icona:
- Transparent: Per defecte, el fons es manté transparent. Aquesta opció és ideal per a les pestanyes del navegador, on la icona s'adapta visualment al color de la pestanya activa.
- Color: Permet definir un color de fons personalitzat mitjançant un selector. L'ús d'un color de fons sòlid és una opció més segura per a les icones de la pantalla d'inici de l'iPhone i l'iPad, ja que els dispositius iOS solen pintar de color negre les àrees que són transparents.
Contingut del paquet d'icones generat
Un cop es prem el botó "Genera les icones", l'eina processa la imatge i genera un paquet descarregable amb l'etiqueta "Baixa ZIP". Aquest paquet conté els següents fitxers estructurats:
| Nom del fitxer | Característiques i mides incloses | Ús principal |
|---|---|---|
favicon.ico |
Conté versions de 16, 32 i 48 píxels. | Icona de pestanya clàssica per a navegadors d'escriptori. |
| Icones PNG | Fitxers individuals a mides de 16, 32, 180, 192 i 512 píxels. | Icones per a pestanyes (PNG), pantalla d'inici d'Apple (180 px) i dispositius Android (192 i 512 px). |
site.webmanifest |
Fitxer de text petit que llista les icones grans i les seves mides. | Proporciona informació als dispositius Android i aplicacions web instal·lades. |
| Fitxer vectorial | S'inclou el propi fitxer SVG d'origen (només si s'ha començat amb un SVG). | Garanteix una nitidesa absoluta a qualsevol mida en navegadors moderns. |
Com instal·lar les icones al vostre lloc web
Per implementar correctament les icones generades, heu de seguir aquests passos:
- Baixeu el fitxer ZIP prement el botó "Baixa ZIP".
- Descomprimiu el contingut i pugeu tots els fitxers individuals directament a la carpeta arrel del vostre lloc web (per exemple, de manera que es pugui accedir al fitxer de la icona clàssica a través de la ruta
/favicon.ico). - Copieu el fragment de codi HTML generat a l'apartat "Afegiu-ho a la secció" mitjançant el botó "Copia el codi".
- Enganxeu aquest codi dins de la secció
<head>de cadascuna de les pàgines HTML del vostre lloc web.
Aquest codi enllaça correctament els fitxers de les icones i el manifest, permetent que cada navegador o dispositiu mòbil detecti i seleccioni automàticament la mida i el format més adequats per a la seva pantalla.
Resolució de problemes i errors comuns
Durant la càrrega o la generació de fitxers, l'eina pot mostrar diferents missatges d'error per ajudar a corregir problemes amb el fitxer d'origen:
- "Primer heu de triar una imatge PNG, JPG o SVG.": Es mostra si s'intenta iniciar la generació sense haver seleccionat cap fitxer prèviament.
- "Només s'admeten imatges PNG, JPG i SVG.": Apareix si s'intenta carregar un fitxer amb un format no compatible.
- "No s'ha pogut obrir aquest fitxer com a imatge. Pot ser que estigui malmès, buit o que no sigui realment una imatge.": S'activa quan el fitxer té una extensió correcta però les dades internes estan danyades o buides.
- "No s'ha pogut llegir aquest fitxer SVG. Comproveu que sigui un document SVG vàlid.": Es mostra específicament quan un fitxer vectorial SVG conté errors d'estructura o de codi XML.
- "Ha fallat la generació. Proveu-ho amb una altra imatge.": S'utilitza com a avís general si el procés de conversió falla a causa d'un error intern inesperat amb la imatge.
Preguntes freqüents
Quins fitxers s'inclouen al paquet d'icones?
Un fitxer favicon.ico que conté versions de 16, 32 i 48 píxels, icones PNG de 16, 32, 180, 192 i 512 píxels, i un fitxer site.webmanifest que llista les icones grans. Si comenceu amb un SVG, també s'inclou el propi vector. Un sol fitxer ZIP ho conté tot.
Quina mida ha de tenir la imatge d'origen?
L'ideal és utilitzar un SVG: cada icona es dibuixa a partir del vector, de manera que es manté nítida fins i tot a 16 píxels. Per a PNG o JPG, comenceu amb una mida mínima de 512 × 512; les imatges més petites s'escalaran i poden perdre definició.
El fons ha de ser transparent o de color?
Les icones de pestanya es veuen bé amb fons transparent. No obstant això, les pantalles d'inici d'iPhone i iPad mostren les àrees transparents en negre; si els usuaris poden afegir el vostre lloc web a la seva pantalla d'inici, és millor triar un color de fons.
Què passa si la imatge d'origen no és quadrada?
Les icones son quadrades, però la imatge mai es deforma. Per defecte, se centra afegint-hi un marge al voltant; canvieu a "Omple (retalla)" si preferiu retallar les vores sobrants.
On s'han de col·locar els fitxers al meu lloc web?
Pugeu-los a la carpeta arrel del vostre lloc web, de manera que es pugui accedir a favicon.ico a /favicon.ico, i després enganxeu les línies generades a la secció de les vostres pàgines. Els navegadors triaran automàticament la mida adequada.