En el disseny web, com probablement sabeu, cada detall és important. Una persona que ha canviat al vostre recurs no veu cadascun dels elements per separat, sinó que percep tota la imatge com un paquet format per altres petits detalls. Així, si us perdeu alguna cosa en el procés de desenvolupament del vostre recurs, aquest detall pot fer malbé tot el complex, tota la composició.
Una bagatela pot ser, per exemple, el fons d'un botó, un tipus de lletra escollit incorrectament d'algun element petit i fins i tot un favicon. De fet, comproveu-ho vos altres mateixos: els llocs grans i coneguts tenen una icona individual que ho indica a la secció "Adreces d'interès" del navegador de l'usuari. Sense ell, els desenvolupadors del recurs no haurien estat capaços de crear la composició per la qual estaven lluitant inicialment.
Per tant, quan creeu un disseny per al vostre lloc, hauríeu de tenir cura d'un detall com el favicon. En aquest article, parlarem de com combinar-lo amb l'estil general del recurs, així com de quines mides hauria de tenir aquesta imatge.
Icona del lloc
Primer, anem a definir què és aquest element. Ara mateix, mireu el títol de la pestanya del vostre navegador. Com podeu veure, a l'esquerra hi ha una petita imatge que indica una versió simplificada del logotip del recurs. La mateixa imatge també es troba a prop del nom del lloc que es mostra als resultats de la cerca. Això és el que guia l'usuari quan veu el títol.
Molts administradors web entenen que aquesta imatge és necessària, però poca gent sap quina mida de favicon serà la més adequada per al lloc. Per tant, en aquest article no només donarem informació sobre com fer una icona d'aquest tipus i com podeu instal·lar-la al vostre recurs, sinó que també parlarem de les mides de les imatges.
El propòsit de la favicon
Per tant, la imatge propera a la capçalera del lloc s'utilitza per a la identificació. Aquest és el seu objectiu original: expressar el lloc del qual veiem el nom i fer-lo destacar als ulls de la resta. Això es fa de la manera més senzilla possible mitjançant l'ús de gràfics: percebem intuïtivament la informació en imatges molt més ràpid i més fàcil que en format de text. Els favicons ens ajuden a fer-ho. Però no oblideu que la mida del favicon és mínima als ulls de l'usuari. Aquest no és un logotip a la "capçalera" del lloc, que pot contenir informació addicional en forma d'inscripcions, alguns aclariments o informació de contacte. Tot el que es pot mostrar a la icona al costat del nom hauria d'ajustar-se tant com sigui possible a la mida del favicon. I ell, com ja s'ha indicat, és simplement en miniatura (només 16 per 16 píxels).
Com triarFavicon?
Llavors, com pot un administrador web dissenyar una icona per al seu lloc? Cal tenir en compte que només comprimir el logotip del lloc, sovint, no funcionarà. En els emblemes que es col·loquen en forma de logotip d'un recurs determinat, sovint són visibles diversos elements, que no sempre es mostraran correctament en forma de miniatura. És millor abandonar immediatament aquesta empresa.
Per descomptat, la mida del favicon no permet parlar de simplement inserir-hi una inscripció. Qualsevol text simplement serà invisible amb aquesta resolució. Hem de desenvolupar una nova icona que transmeti l'estil del lloc. Per trobar solucions, de nou, anem a visitar els llocs més grans.
Moltes persones utilitzen la primera lletra estilitzada del nom del servei com a favicon. Aquest és el camí, per exemple, Bing, Yahoo, Yandex, Wikipedia, Google. Hi ha un altre enfocament: si teniu un nom de lloc curt, podeu configurar-lo com a fons de la vostra icona. Per tal que la mida del favicon (en píxels assoleixi, repeteixo, 16 per 16 píxels) per mostrar correctament aquesta inscripció, no hauria de tenir més de 3 lletres. Això és el que fa, per exemple, el servei Aol.
Com crear un favicon?
Hi ha diverses maneres de crear una icona per al nom del lloc. Per descomptat, el més fàcil és treballar amb diferents solucions ja fetes. Podem parlar d'alguns serveis o programes que permeten fer una icona a partir d'una imatge en tota regla reduint-la. Tanmateix, recomanaria desenvolupar aquest logotip pel vostre compte. Això en primer lloc donaràl'oportunitat d'aprendre alguna cosa; i en segon lloc, proporcionarà més eines. Tot el que necessiteu saber per això és què dibuixar i també saber quina mida hauria de tenir el favicon a la versió final. Parlarem de la mida de la icona del lloc una mica més endavant, però de moment notarem algunes subtileses de treballar amb aquestes imatges. En particular, sense esmentar la mida del favicon del lloc, cal aclarir el format d'aquesta imatge. Tal com assenyalen dissenyadors experimentats, la imatge s'ha de desar com a fitxer-p.webp
Podeu desar la imatge, per exemple, amb Photoshop, on es dibuixarà l'emblema.
Dimensions del favicon
Així doncs, ara parlem de quina mida hauria de ser la imatge que veiem al costat del nom del lloc als resultats de la cerca. Per defecte, com ja s'ha dit, la seva mida és de només 16 píxels (a cada costat). Tanmateix, si intenteu editar aquesta imatge a Photoshop, veureu per vos altres mateixos com n'és d'incòmode. Per tant, us recomanem treballar amb una imatge ampliada, que en el futur només es pot comprimir al llarg de les vores i desar-la en el format necessari.
Multiplataforma
No obstant això, parlant de la mida que hauria de ser la favicon al vostre lloc, hi ha una cosa més a tenir en compte. No totes les plataformes mostren una imatge de recurs de la mateixa manera. Per exemple, els dispositius amb una pantalla Retina "veuen" el vostre favicon a 32 per 32 píxels. I a Safari i a la nova plataforma Windows, i en absolut, aquestes icones arriben a una mida de 64píxels.
Per tant, us recomanem que deseu diferents versions de la icona i que simplement proporcioneu el seu canvi en funció de la plataforma de l'usuari en el futur. Un altre punt interessant: podeu provar de carregar la icona en el format més gran, comptant amb el fet que "es reduirà" segons el navegador.
Editors externs
Per descomptat, és bo si ets bé amb Photoshop i saps quina mida hauria de tenir el favicon i com aconseguir-ho mentre deseu la imatge. Tanmateix, hi ha molts principiants que no s'han trobat amb editors gràfics tan de prop abans, de manera que no poden dibuixar la imatge desitjada amb tanta facilitat. Per ajudar aquests administradors web, hi ha diversos serveis que us permeten crear automàticament la icona que us interessa. Molts d'ells són fins i tot gratuïts, cosa que no requereix cap inversió per part de l'usuari.
De vegades només cal registrar-se per treballar, però, com enteneu, això es fa una vegada; després de tot, les empreses no canvien el seu favicon tan sovint. Fes una ullada a Google, que canvia el logotip cada dia, però no toca la icona.
Com instal·lar un favicon?
En general, configurar el vostre lloc de manera que mostri correctament la imatge que necessiteu és molt senzill. N'hi ha prou amb realitzar una sèrie de passos senzills que permetran als motors de cerca, així com als navegadors senzills, llegir la informació.
Per fer-ho, s'ha de desar la imatge resultant ambanomenat favicon.ico i col·locat a l'arrel del vostre recurs. Això és tot, ara la teva imatge es reconeixerà automàticament i, al cap d'un temps, s'enllaçarà al teu lloc.
A més d'aquesta vinculació, podeu afegir una línia més que "suggerirà" on es troba la vostra icona. Sembla així:
Instal·la el codi a la capçalera del lloc.
Conclusions
Així, després de llegir el nostre article, heu descobert quina mida hauria de tenir un favicon per a un lloc i quina és. A més, crec que heu entès que trobar la icona adequada per al vostre recurs és una necessitat, perquè us juga a les vostres mans tant pel que fa a l'augment del reconeixement com a l'aportació addicional entre els vostres competidors. Almenys els llocs més grans fan el mateix, cosa que es pot prendre com a bon exemple. I, a més, no comporta gaire esforç: després d'haver fet un favicon una vegada i instal·lat correctament al vostre lloc, us podeu oblidar durant els propers mesos.
Per tant, no dubteu a experimentar, inventeu alguna cosa nova, proveu-ho i tot sortirà!
