Kuidas luua saidile favicon: kasulikke näpunäiteid ja teenuseid

1. Kuidas luua favicon
2. Kuidas teha Photoshopis favicon
3. Kuidas salvestada favicon
4. Kuidas lisada faviconi sait
5. Kuidas asendada favicon
6. Kuidas luua keerulisemaid favikone

On raske ära arvata, milline favicon on, kui seda sõna esimest korda kuulete. See on miniatuurne ikoon, mis kuvatakse brauserite vahekaartidel aadressiridades ja teistes valdkondades, sõltuvalt kasutatavast operatsioonisüsteemist ja Interneti-brauserist. Seda saab turvaliselt nimetada üheks kõige keerulisemaks ja kohutavamaks elemendiks veebilehe kujunduses.

Hea favicon'i loomine on üsna raske, kuna ikoon on väike, see peaks olema selge ja kuvama midagi, mis on seotud teie saidiga. Kõigi populaarsete brauseritega ühilduva favicon'i loomine võib olla ka heidutav ülesanne. Käesolevas artiklis käsitleme kõiki selle loomise keerukaid aspekte. Kui teil on vaja ka logo, siis on meil olemas artikkel kuidas seda teha.

Kuidas luua favicon

Alustame favicon disainist. Hea disain, hoolimata kompaktsusest, peaks kajastama teie saidi olemust ja olema organiseeritud identiteedi orgaaniline osa. Tüüpiliselt on ikooniks ettevõtte graafiline märk (ikoon), mitte kogu logo (ikoon, tekst ja loosung).

Faviconina kasutavad need veebisaidid oma ikoone (või nende lähedal asuvaid pilte).

Faviconi teksti ei tohiks kasutada, sest see tekst on väikese pildi suuruse tõttu loetamatu. Selle reegli ainsad erandid on maailmakuulsad tekstimärgid, mis on automaatselt seotud konkreetse kaubamärgiga. Näiteks jätkas Wikipedia veebiressurss faviconile suurtähtedega W ja Facebook - täht „F”.

Nendel faviconidel on tähed, mis on kindlalt seotud konkreetse kaubamärgiga. Näiteks kasutab Facebook oma graafilist märki. Pange tähele, et pikslid on nähtavad Disney pildil. Seda seetõttu, et ekraanipilt võeti võrkkesta ekraanilt, mis on ühilduv 16 × 16 ikooniga, samas kui veebisaidid kasutavad 32 × 32 ikooni.

Kuna favicons on väikesed pildid, mängib iga piksel olulist rolli. Mõnikord muutub pärast logo vähendamist nähtavaks üksikud pikslid, mille tõttu kujutis muutub "häguseks". Selguse saavutamiseks tuleb ikooni pikslite tasemel muuta.

Selle vältimiseks peate logo muutma spetsiaalsete redaktorite nagu Photoshop või GIMP abil. Kõigepealt peate vähendama pildi suurust 64x64 pikslit (see on suurim suurus favicon). Seejärel peate iga pikslit tööriistaga Pencil redigeerima, kuni pilt on selge. See on töömahukas protsess, kuid tulemus on seda väärt. Kui favicon 64x64 on valmis, peate tegema sama tööd 16 × 16, 24 × 24 ja 32 × 32 pikslitega. Nii palju suurusi, mida peate kõigis brauserites ja vidinates õigesti kuvama:

• 64x64 - Safari brauseri järjehoidjad;
• 32x32 - suure eraldusvõimega kuvarid (võrkkest);
• 24x24 - Internet Explorer ja MicroSoft Edge järjehoidjad;
• 16x16 - Google Chrome ja muud brauserid.

Kuidas teha Photoshopis favicon

Kõigepealt tuleb luua mõned ülalnimetatud mõõtmetega lõuendid.

Siis tuleb lisada lõuendile ikoon, täht või muu pilt.

Kuidas salvestada favicon

Olles loonud erineva suurusega ikoonid, salvestage igaüks läbipaistva PNG-failina (24-bitine). Photoshopis saate kasutada menüüs Fail käsku Salvesta veebi. Siis tuleb kõik PNG-failid ühendada ühte ICO-faili. Saate samaaegselt kasutada nii PNG-faile kui ka ICO-faile, kuid sageli isegi Safari ja Chrome eelistavad ainult ICO-vormingut. Minu arvates on lihtsam luua üks ICO-fail. ICO-vorming ei ole väga levinud, kuid õnneks on mitmeid tööriistu, mis aitavad teil failid sellesse vormingusse teisendada. Selleks eelistaksin kasutada X-Icon Editor . See on tasuta võrguteenus, mis muundab allalaaditud pildid koheselt üheks ICO-failiks, seejärel saate selle alla laadida. See pole midagi keerulist, järgige lihtsalt saidil olevaid juhiseid. Kui peate ennast meeleheitel inimeseks, saate proovida selle teenuse pikslitöötlejat ja tõmmata favicon ise. (Kuigi eelistan favicone'i redigeerida professionaalsemas redaktoris, näiteks Photoshopis).

Kui laadite oma PNG-pildid üles X-Icon Editorisse, saate väljundis ühe ICO-faili.

Kuidas lisada faviconi sait

Niisiis, teil on juba ICO-fail. Nüüd peate selle veebisaidile lisama. Nimetage fail favicon.ico-ks ja asetage see oma veebisaidi juurkataloogi (kus on salvestatud index.html-fail ja muud standardfailid). Pärast edukat lisamist saate seda vaadata oma veebilehel .com / favicon.ico. Peaaegu kõik brauserid otsivad juurkataloogis faili favicon.ico. Seetõttu on oluline, et laadite selle kausta alla. Ühilduvuse tagamiseks erinevate brauseritega on parem mitte lisada HTML-elemente või linke, mis näitavad selle asukohta. See trikk töötab kõikidel brauseritel kuni IE6-ni. Samuti, kui teil on WordPressi sait, saate paljudes teemades lisada teemadesse faviconi. Seda meetodit saab kasutada ka.

Kuidas asendada favicon

Mõne seletamatu põhjuse tõttu lisavad brauserid selle vahemällu. Seega, kui laadite uue ICO-faili üles, võib brauser jätkata oma vana faviconi näitamist. Mida sel juhul teha? Võite lisada ajutise HTML-faili, mis näitab teie uue faviconi asukohta. Samuti peate URL-i lõpus lisama lühikese päringu stringi:

<link rel = "otsetee ikoon" href = "sinu veebileht .com / favicon.ico? v = 2" />

Seega arvab brauser, et see on ainulaadne URL ja seetõttu on sunnitud kuvama uue ikooni. Pärast faviconi värskendamist saab selle HTML-koodi täielikult eemaldada. Kui peate faviconis muudatusi tegema, kasutage sama tehnikat, iga kord suurendades numbrit pärast päringu stringi “v”. Seega näeb brauser iga kord seda URL-i unikaalsena ja kuvab selle uue versiooni. Ja ärge unustage HTML-koodi pärast edukat värskendust kustutada.

Kuidas luua keerulisemaid favikone

Selles artiklis tahtsin kirjeldada universaalset ja lihtsat viisi faviconide loomiseks, mis töötavad praktiliselt igal platvormil. Kuid veebidisainis ja -arenduses ei ole täiuslikkust piiratud. Kui soovite teada, kuidas luua keerukamaid ikoone, võite seda teenust kasutada favico.js . See võimaldab luua dünaamilisi pilte erineva numbriga. Tänu sellele ikoonile näete lugemata sõnumite arvu isegi siis, kui vastav kaart ei ole aktiivne. Kui soovite luua animeeritud faviconeid võrgus, võite proovida kasutada favicon generaatorit favicon.cc .

Rohkem võrgugeneraatorit leiate siin .

Kui soovid jagada oma näpunäiteid faviconside loomiseks või küsida, ootan teid kommentaarides!