Un favicon és aquesta petita imatge genial al costat de la barra d’adreces del navegador. És el que diferencia el vostre lloc a la pestanya Marcadors i es pot utilitzar per augmentar la notorietat de la marca. Si teniu un lloc però no us heu plantejat mai crear un favicon, heu de replantejar-vos la decisió. Cada vegada més, els desenvolupadors de programari utilitzen favicons per a diferents aspectes de les seves aplicacions, com ara les icones de la pantalla inicial de les tauletes. Per sort, dissenyar, crear i implementar un favicon és gairebé qualsevol persona que pot fer si segueix els passos correctes.
Passos
Mètode 1 de 3: Dissenyar el vostre Favicon
Pas 1. Creeu un favicon que representi el vostre lloc web
El tipus de lloc web que tingueu hauria de determinar l’aspecte del vostre favicon. Intenteu dissenyar alguna cosa que s'adhereixi a la vostra imatge de marca i que sigui reconeguda i memorable per a la gent. El vostre favicon serà el primer que veuran les persones quan miren les pestanyes del navegador i també apareixeran als marcadors de les persones.
- Per exemple, si teniu un lloc web sobre menjar, triar un favicon que tingui una fruita o una verdura ja que el disseny el pot fer més memorable.
- Si el vostre lloc web és per a un bufet d'advocats o una empresa d'inversió, és millor un favicon tradicional i elegant.
- Si el vostre lloc web està dirigit a gent més jove, proveu de crear un favicon lúdic i acolorit.
Pas 2. Decidiu si voleu un fons transparent
Si no designeu un fons, s'emplenarà en blanc, que pot ser que no s'adhereixi a la vostra marca. Un fons transparent agafarà el color del navegador de la persona i en alguns casos es veurà més racional. En altres casos, tenir un color per al fons farà que apareguin les lletres o els gràfics en primer pla. Decidiu quin seria el millor per al vostre disseny i tingueu-ho en compte a mesura que el feu.
El favicon més bàsic és un quadrat de 16x16 i té un color de fons
Pas 3. Creeu un favicon que sigui fàcil de llegir
Com que la imatge de favicon que faràs servir és petita, és important que puguis transmetre la teva marca sense confondre els visitants. Un favicon difícil de llegir deixa una impressió negativa i pot crear preguntes en la ment del visitant sobre la qualitat del treball que podeu proporcionar. Les imatges i els logotips massa complexos no es veuen bé si es redueixen a 16x16 o 32x32 píxels.
- Si el vostre logotip existent és massa complicat, podeu fer servir tàctiques per simplificar-lo, de manera que es pugui reconèixer a mida de favicon. Utilitzeu inicials en lloc de mostrar tot el nom de l’empresa o dissenyeu una icona senzilla en lloc d’utilitzar una imatge.
- Si ja teniu un logotip senzill, podeu reduir la imatge i configurar-la com a favicon. És possible que hàgiu de modificar-lo abans de convertir-lo a un fitxer d'icones.
- També podeu utilitzar una imatge d’un objecte que descrigui el tema general del vostre lloc.
Pas 4. Creeu un favicon estèticament agradable
L'estructura del vostre favicon s'anomena forma. Els favicons solen adoptar formes, com ara un cercle o un quadrat. Quan dissenyeu el vostre favicon, generalment és millor si pot encaixar dins d’aquestes formes bàsiques, perquè les formes de forma lliure sovint es poden confondre o confondre a 16x16 píxels. Un altre aspecte important del vostre disseny es diu unitat estètica. La unitat estètica inclou els detalls i mides dels diferents components del vostre favicon i com s’equilibra el favicon. Com més uniformes siguin els detalls, més cohesionat serà el vostre favicon. Per exemple, fer servir diferents tipus de mides o tipus de lletra al vostre favicon no és agradable a la vista i pot fer que el vostre favicon sembli confús o desordenat.
- Un altre exemple d’unitat estètica és mantenir les cantonades arrodonides en totes les formes del vostre favicon.
- Un bon exemple d'una icona que ha canviat de forma és el favicon de Google. Ha passat d’un quadrat a un cercle.
Pas 5. Utilitzeu colors que siguin coherents amb la vostra marca
Quan creeu el vostre favicon, haureu de crear-lo amb una profunditat de color de 8 bits (256 colors) o 24 bits (16,7 milions de colors), ja que funcionarà als navegadors moderns. Assegureu-vos que els colors que trieu es puguin trobar en qualsevol altre lloc del vostre lloc web o que estiguin associats d’alguna manera a la vostra marca. Un favicon amb colors que no estiguin al vostre lloc web, logotip o aplicacions no serà memorable i la gent no podrà associar la icona amb la vostra marca.
- Alguns usos creatius del color de favicon inclouen GitHub, que canvia els colors segons l’estat del sistema i Trello, que canvia segons el color de fons.
- Els colors més habituals dels favicons són el vermell i el blau.
Pas 6. Tingueu en compte el vostre públic a l’hora de dissenyar un favicon
A part d’identificar la vostra marca, el vostre favicon ha de semblar atractiu per als vostres visitants. Les persones amb gustos, interessos i normes socials diferents examinaran diferents iconologies des de diferents perspectives. Hi ha diferències culturals a la nostra societat i poden confondre o repel·lir el públic que intenteu atraure.
Per exemple, Mac Os X utilitza un segell que és un símbol universal per al correu. L’ús d’una bústia de correu no seria tan eficaç perquè les bústies varien segons les parts del món
Pas 7. Obteniu l'opinió d'amics i col·legues
Tot i que no és increïblement gràfic, un favicon és una part important de la vostra marca. Per exemple, penseu en els vostres llocs web preferits com Twitter, Gmail, Facebook o wikiHow i quant associeu el favicon amb la marca. Si no teniu un bon ull pel disseny o us interessa quin tipus de disseny heu de tenir per al vostre lloc, consulteu els amics que tinguin un ull per al disseny o que treballin en disseny gràfic.
- Pregunteu a la vostra xarxa d’amics per veure si algú pot proporcionar consells de disseny gratuïtament.
- Les empreses més grans tenen dissenyadors gràfics propis que poden crear la imatge de favicon.
Mètode 2 de 3: Creació del vostre Favicon
Pas 1. Utilitzeu el programari d'edició de fotos per crear el vostre favicon
Podeu utilitzar programes d'edició de fotos com Adobe Photoshop o Illustrator per crear la imatge del vostre favicon. Aquestes aplicacions de programari també us permeten canviar la mida i exportar la imatge en el format adequat. Alguns programes us permeten crear el vostre favicon a mà.
- També hi ha programes d'edició específics de favicon que podeu trobar en línia.
- Utilitzeu un motor de cerca i escriviu "favicon editors".
- Feu que la mida del llenç sigui de 512x512 píxels perquè aquest nombre es divideix en la mida de favicon més aplicable i encara és prou gran perquè pugueu editar-lo amb eficàcia.
- Un altre programari popular d’edició de fotos inclou GIMP, PhotoScape i Paint. NET.
- Quan utilitzeu aquest programari, no podreu editar els fitxers.ico directament, però podeu utilitzar fitxers.png,-j.webp" />
Pas 2. Canvieu la mida i deseu el vostre favicon
32x32 px és la mida dels elements d’escriptori del Windows, mentre que 16x16 px és la mida dels favicons de la pestanya del navegador. Després de crear el vostre favicon en un format més gran, és important reduir-ne la mida perquè pugueu veure com quedarà als navegadors de la gent. Si no es pot llegir o no és estèticament agradable, torneu a començar el disseny original. Penseu en les plataformes en què és probable que s’utilitzi el vostre lloc web o aplicació i, a continuació, creeu un favicon per cobrir totes les vostres bases.
- És important tenir en compte que el maquinari i el programari diferents utilitzen mides de favicon diferents.
- Algunes altres mides de favicon inclouen 57x57px per a la pantalla d’inici estàndard d’IOS, 72x72px per a l’iPad, 96x96px per a Google TV, 128x128px per a Chrome Web Store i 195x195px per a l’Opera Speed Dial.
- Si voleu cobrir totes les vostres bases, podeu crear versions del vostre favicon en cadascuna d'aquestes mides.
- Deseu versions separades del vostre favicon perquè no perdeu la feina que heu fet.
Pas 3. Combineu els fitxers amb un convertidor
El millor dels fitxers.ico és que podeu combinar més d’un fitxer per crear-lo. Això és útil perquè diferents navegadors i programes voldran un favicon de mida diferent. Per assegurar-vos que el vostre favicon tingui un bon aspecte en totes les plataformes, convertiu els fitxers mitjançant un convertidor en línia. Escriviu "convertidor d'icones" al vostre motor de cerca preferit per trobar aplicacions en línia gratuïtes per fer-ho. Deseu el fitxer combinat com a "favicon.ico".
- També podeu utilitzar un programa com GIMP que té una funció integrada o descarregar un complement anomenat ICO FORMAT a Adobe Photoshop.
- Creeu una carpeta nova per poder emmagatzemar nous favicons o treballs en curs.
- Escriviu ".ico converter" o "favicon generator" en un motor de cerca per trobar diferents eines que podeu utilitzar.
Mètode 3 de 3: implementació del Favicon
Pas 1. Pengeu el vostre favicon si utilitzeu un editor de llocs web
Molts editors de llocs web inclouen un formulari integrat que us permet carregar el vostre favicon al vostre lloc web automàticament. Si utilitzeu un editor de llocs web que ho tingui integrat, busqueu opcions que diuen "Carrega Favicon" o "Afegeix Favicon" al menú de configuració del vostre lloc web. Seleccioneu el fitxer favicon.ico i pengeu-lo al vostre lloc.
Si no trobeu un lloc per penjar el vostre favicon a l'editor del lloc web, haureu de fer-ho manualment
Pas 2. Pengeu el fitxer al directori arrel del vostre lloc
Si el vostre lloc web admet el protocol de transferència de fitxers o FTP, podeu utilitzar el client FTP per carregar el fitxer favicon.icon nou al directori arrel (índex). Si no, haureu d’anar a la pàgina d’amfitrions web i penjar la imatge manualment. Recordeu que heu de substituir el fitxer favicon.ico existent pel fitxer nou.
Pas 3. Afegiu el fitxer a la capçalera
Cerqueu el lloc on podeu accedir als fitxers PHP i CSS del vostre lloc. Aneu al fitxer header.php del lloc i editeu-lo. Sota el tipus d'etiqueta,"
-
. Això hauria de connectar el vostre lloc al vostre favicon.
Com que utilitzeu PHP, vol dir que tots els llocs que utilitzen el fitxer de capçalera tindran ara el mateix favicon
Creeu la vostra pròpia icona Favicon Pas 14 Pas 4. Actualitzeu el navegador
Un cop hàgiu acabat de penjar el favicon, podeu actualitzar el navegador per veure la imatge nova al costat de la barra d'adreces. Per anar directament a la imatge del favicon actualitzat, escriviu "https://www.yourdomain.com/favicon.ico".
- Si el vostre favicon no apareix inicialment, potser haureu de restablir la memòria cau del navegador.
- Per esborrar la memòria cau, aneu a la configuració del navegador i suprimiu els fitxers temporals d’Internet, les galetes i l’historial.
