1. Kako ustvariti favicon
2. Kako narediti favicon v Photoshopu
3. Kako shraniti favicon
4. Kako vstaviti stran favicon
5. Kako zamenjati ikono
6. Kako ustvariti bolj kompleksne favikone

Težko je uganiti, kaj je favicon, ko prvič slišiš to besedo. To je miniaturna ikona, ki se prikaže na zavihkih brskalnikov, v naslovnih vrsticah in na drugih področjih, odvisno od operacijskega sistema, ki ga uporabljate, in internetnega brskalnika. Lahko se imenuje eden najbolj zapletenih in muhastih elementov pri oblikovanju spletnih strani.

Ustvarjanje dobrega ikone je precej težko, saj je ikona majhna, mora biti jasno in prikazati nekaj, kar je povezano z vašim spletnim mestom. Ustvarjanje favikona, ki je združljiv z vsemi priljubljenimi brskalniki, je lahko tudi zastrašujoča naloga. V tem članku bomo obravnavali vse kompleksne vidike njegovega nastanka. Če potrebujete tudi logotip, potem imamo članku kako to storiti.

Kako ustvariti favicon

Začnimo z zasnovo favikona. Dobra zasnova, kljub svoji kompaktnosti, bi morala odražati bistvo vašega spletnega mesta in biti organski del celostne podobe. Značilno je, da je ikona grafični znak (ikona) podjetja in ne cel logotip (ikona, besedilo in slogan).

Te spletne strani kot ikono z ikonami (ali slikami blizu njih) uporabljajo svoje ikone.

Besedila v slikovni ikoni ne smete uporabiti, saj bo besedilo zaradi majhnosti slike neberljivo. Edine izjeme tega pravila so znani znaki besedila, ki so samodejno povezani z določeno blagovno znamko. Na primer, spletni vir Wikipedije je na faviconu zapustil veliko črko »W«, Facebook - črko »F«.

Na teh straneh so črke, ki so močno povezane z določeno blagovno znamko. Na primer, Facebook uporablja svoj grafični znak. Upoštevajte tudi, da so piksli vidni na sliki Disney. To je zato, ker je bil posnetek na zaslonu retine, ki je združljiv s 16 × 16 ikonami, medtem ko spletne strani uporabljajo 32 × 32 ikon.

Ker so favikoni majhne slike, ima vsaka piksel pomembno vlogo. Včasih po zmanjšanju logotipa postanejo posamezne pike vidne, zaradi česar postane slika »zamegljena«. Da bi dosegli jasnost, morate ikono urediti na ravni pikslov.

Da bi se temu izognili, morate spremeniti velikost logotipa s posebnimi urejevalniki, kot je Photoshop ali GIMP. Najprej morate zmanjšati velikost slike na 64x64 slikovnih pik (to je favicon največje velikosti). Nato morate z uporabo orodja Svinčnik urediti vsako sliko, dokler slika ni jasna. To je težaven proces, vendar je rezultat vreden. Ko je favicon 64x64 pripravljen, morate opraviti isto opravilo s sliko 16 × 16, 24 × 24 in 32 × 32 slikovnih pik. Toliko velikosti, ki jih morate pravilno prikazati v vseh brskalnikih in pripomočkih:

• 64x64 - zaznamki brskalnika Safari;
• 32x32 - zasloni z visoko ločljivostjo (Retina);
• 24x24 - zaznamki Internet Explorer in MicroSoft Edge;
• 16x16 - Google Chrome in drugi brskalniki.

Kako narediti favicon v Photoshopu

Najprej morate ustvariti nekaj platen z zgornjo dimenzijo.

Nato morate na platno dodati ikono, črko ali drugo sliko.

Kako shraniti favicon

Ko ustvarite ikone različnih velikosti, shranite vsako od njih kot prozorno datoteko PNG (24-bitno). V Photoshopu lahko uporabite funkcijo Shrani za splet, ki je na voljo v meniju Datoteka. Nato morate združiti vse datoteke PNG v eno datoteko ICO. Hkrati lahko uporabljate datoteke PNG in datoteke ICO, vendar pogosto celo Safari in Chrome raje uporabljata samo obliko ICO. Po mojem mnenju je lažje ustvariti eno datoteko ICO. Oblika zapisa ICO ni zelo pogosta, vendar na srečo obstaja veliko orodij, ki vam lahko pomagajo pretvoriti datoteke v to obliko. V ta namen raje uporabljam Urejevalnik X-ikon . To je brezplačna spletna storitev, ki takoj prenese prenesene slike v eno datoteko ICO, nato pa jo lahko prenesete. To ni nič zapleteno, sledite navodilom na spletnem mestu. Če ste sami obupana oseba, lahko eksperimentirate z urejevalnikom slikovnih pik te storitve in narišete slikovno ikono. (Čeprav raje urejam favicone v bolj profesionalnem urejevalniku, na primer v Photoshopu).

S prenosom slik PNG v urejevalnik ikon X boste na izhodu dobili eno datoteko ICO.

Kako vstaviti stran favicon

Torej imate ICO datoteko. Zdaj jo morate dodati na spletno mesto. Preimenujte datoteko v favicon.ico in jo postavite v korensko mapo vašega spletnega mesta (kjer so shranjene datoteke index.html in druge standardne datoteke). Po uspešnem dodajanju si ga lahko ogledate na vaši spletni strani. Com / favicon.ico. Skoraj vsi brskalniki iščejo datoteko favicon.ico v korenski mapi. Zato je pomembno, da v to mapo prenesete ikono. Za združljivost z različnimi brskalniki je bolje, da ne dodajate nobenih elementov HTML ali povezav, ki označujejo njegovo lokacijo. Ta trik deluje za vse brskalnike, vse do IE6. Tudi, če imate spletno mesto WordPress, lahko v mnogih temah v nastavitvah teme dodate ikono z ikonami. Ta metoda se lahko uporablja tudi.

Kako zamenjati ikono

Iz nerazložljivega razloga ga brskalniki dodajo v predpomnilnik. Zato lahko, ko naložite novo datoteko ICO, brskalnik še naprej prikazuje vašo staro priljubljeno. Kaj storiti v tem primeru? Dodate lahko začasno datoteko HTML, ki označuje lokacijo vašega novega priljubljenega. Tudi na koncu URL-ja morate dodati kratek niz poizvedbe:

<link rel = "ikona bližnjice" href = "tvoje spletno mesto .com / favicon.ico? v = 2 ″ />

Zato bo brskalnik pomislil, da je to edinstven URL, in bo zato prisiljen prikazati novo ikono. Po posodobitvi favikona lahko to kodo HTML popolnoma odstranite. Če želite spremeniti favicon, uporabite isto tehniko, vsakič ko povečate število za »v« v nizu poizvedbe. Tako bo brskalnik vsakič ta URL zaznal kot edinstven in prikazal svojo novo različico. In ne pozabite izbrisati HTML kode po uspešni posodobitvi.

Kako ustvariti bolj kompleksne favikone

V tem članku sem želel opisati univerzalen in enostaven način za ustvarjanje favikonov, ki bodo delovali na skoraj vsaki platformi. Toda v spletnem oblikovanju in razvoju ni popolnosti. Če želite izvedeti, kako ustvariti bolj zapletene ikone, lahko poskusite uporabiti storitev favico.js . Omogoča vam ustvarjanje dinamičnih slik z različnimi številkami. Zahvaljujoč tej ikoni lahko vidite število neprebranih sporočil, tudi če ustrezni zavihek ni aktiven. Če želite ustvariti animirane favicone na spletu, lahko poskusite uporabiti generator favikona favicon.cc .

Več spletnih generatorjev lahko najdete tukaj .

Če želite deliti svoje nasvete o ustvarjanju priljubljenih ali vprašati, vas čakam v komentarjih!