1. Kako stvoriti favicon
2. Kako napraviti favicon u Photoshopu
3. Kako spremiti favicon
4. Kako umetnuti favicon stranicu
5. Kako zamijeniti favicon
6. Kako stvoriti složenije favikone

Teško je pogoditi što je favicon kada prvi put čujete tu riječ. Ovo je minijaturna ikona koja se prikazuje na karticama preglednika, u adresnim linijama i drugim područjima, ovisno o operativnom sustavu koji koristite i internetskom pregledniku. To se može sigurno nazvati jedan od najsloženijih i hirovitih elemenata u dizajnu web stranica.

Stvaranje dobrog favikona je prilično teško, budući da je ikona mala, trebala bi biti jasna i prikazati nešto što se odnosi na vašu web-lokaciju. Stvaranje favikona koji je kompatibilan sa svim popularnim preglednicima također može biti zastrašujući zadatak. U ovom članku bavit ćemo se svim složenim aspektima njegova stvaranja. Ako vam je potreban i logotip, onda imamo članak kako to učiniti.

Kako stvoriti favicon

Počnimo s dizajnom favikona. Dobar dizajn, unatoč njegovoj zbijenosti, trebao bi odražavati suštinu vaše stranice i biti organski dio korporativnog identiteta. Tipično, ikona je grafički znak (ikona) tvrtke, a ne cijeli logotip (ikona, tekst i slogan).

Kao favicon ove web-lokacije koriste svoje ikone (ili slike koje su im bliske).

Tekst u faviconu ne bi trebao biti korišten jer će tekst biti nečitljiv zbog male veličine slike. Jedine iznimke od ovog pravila su svjetski poznati tekstni znakovi koji se automatski povezuju s određenom robnom markom. Na primjer, on-line izvor Wikipedije ostavio je na faviconu svoje veliko slovo "W", a Facebook - slovo "F".

Na tim favikonima nalaze se slova koja su snažno povezana s određenom robnom markom. Na primjer, Facebook koristi svoj grafički znak. Također imajte na umu da su pikseli vidljivi na Disneyevoj slici. To je zato što je snimka snimljena na retina zaslonu, koji je kompatibilan sa 16 × 16 ikona, dok web stranice koriste 32 × 32 ikone.

Budući da su favikoni male slike, svaki piksel ima važnu ulogu. Ponekad nakon smanjenja logotipa pojedini pikseli postaju vidljivi, zbog čega slika postaje "zamagljena". Da biste postigli jasnoću, morate urediti ikonu na razini piksela.

Da biste to izbjegli, trebate promijeniti veličinu logotipa pomoću posebnih urednika kao što su Photoshop ili GIMP. Prvo morate smanjiti veličinu slike na 64x64 piksela (to je favicon najveće veličine). Zatim morate urediti svaki piksel pomoću olovke sve dok slika ne postane jasna. To je naporan proces, ali rezultat je vrijedan toga. Kada je favicon 64x64 spreman, morate napraviti isti posao sa slikom od 16 × 16, 24 × 24 i 32 × 32 piksela. Toliko veličina koje trebate ispravno prikazati u svim preglednicima i gadgetima:

• 64x64 - Oznake preglednika Safari;
• 32x32 - zasloni visoke razlučivosti (Retina);
• 24x24 - oznake Internet Explorer i MicroSoft Edge;
• 16x16 - Google Chrome i drugi preglednici.

Kako napraviti favicon u Photoshopu

Prvo morate stvoriti nekoliko platna s gornjim dimenzijama.

Tada trebate dodati ikonu, slovo ili neku drugu sliku na platno.

Kako spremiti favicon

Nakon što ste stvorili ikone različitih veličina, spremite ih kao transparentnu PNG datoteku (24 bita). U Photoshopu možete koristiti značajku Spremi za web dostupnu u izborniku Datoteka. Zatim morate spojiti sve PNG datoteke u jednu ICO datoteku. Istodobno možete koristiti i PNG datoteke i ICO datoteke, ali često čak i Safari i Chrome preferiraju samo ICO format. Po mom mišljenju, lakše je stvoriti jednu ICO datoteku. ICO format nije uobičajen, ali na sreću postoje brojni alati koji vam mogu pomoći pretvoriti datoteke u ovaj format. U tu svrhu preferiram koristiti Uređivač X-ikona , Ovo je besplatna usluga na mreži koja trenutačno pretvara preuzete slike u jednu ICO datoteku, nakon čega je možete preuzeti. To nije ništa komplicirano, samo slijedite upute na stranici. Ako sebe smatrate očajnom osobom, možete eksperimentirati s uređajem za piksele ove usluge i sami nacrtati favicon. (Iako radije uređujem favicone u profesionalnijem uređivaču, na primjer, u Photoshopu).

Prijenosom PNG slika u X-Icon Editor dobit ćete jednu ICO datoteku na izlazu.

Kako umetnuti favicon stranicu

Dakle, već imate ICO datoteku. Sada ga morate dodati na web-lokaciju. Preimenujte datoteku u favicon.ico i postavite je u korijensku mapu vaše web-lokacije (gdje su pohranjeni index.html datoteka i ostale standardne datoteke). Nakon uspješnog dodavanja, možete ga vidjeti na svojoj web-lokaciji .com / favicon.ico. Gotovo svi preglednici traže datoteku favicon.ico u korijenskoj mapi. Stoga je važno da preuzmete favicon u ovu mapu. Za kompatibilnost s različitim preglednicima, bolje je da ne dodajete niti jedan HTML element ili vezu koja ukazuje na njegovu lokaciju. Ovaj trik radi za sve preglednike, sve do IE6. Također, ako imate WordPress stranicu, onda u mnogim temama možete dodati favicon u postavkama teme. Ova metoda se također može koristiti.

Kako zamijeniti favicon

Iz nekog neobjašnjivog razloga, preglednici ga dodaju u predmemoriju. Stoga, kada prenesete novu ICO datoteku, preglednik može nastaviti prikazivati ​​vaš stari favicon. Što učiniti u ovom slučaju? Možete dodati privremenu HTML datoteku koja označava lokaciju novog favikona. Također na kraju URL-a morate dodati kratki niz upita:

<link rel = "ikona prečaca" href = "tvoja web-lokacija .com / favicon.ico? v = 2> />

Tako će preglednik pomisliti da je to jedinstveni URL i stoga će biti prisiljen prikazati novu ikonu. Nakon ažuriranja favikona, ovaj HTML kôd može se u potpunosti ukloniti. Ako trebate unijeti promjene u favicon, koristite istu tehniku, svaki put povećavajući broj nakon "v" u nizu upita. Dakle, preglednik će svaki put uočiti ovaj URL kao jedinstven i prikazati svoju novu verziju. I ne zaboravite izbrisati HTML kôd nakon uspješnog ažuriranja.

Kako stvoriti složenije favikone

U ovom članku htio sam opisati univerzalan i jednostavan način stvaranja favikona koji će raditi na gotovo svakoj platformi. Ali u web dizajnu i razvoju nema granica savršenstva. Ako želite saznati kako stvoriti složenije ikone, možete pokušati koristiti uslugu favico.js , To vam omogućuje stvaranje dinamičkih slika s različitim brojevima. Zahvaljujući ovoj ikoni možete vidjeti broj nepročitanih poruka, čak i ako odgovarajuća kartica nije aktivna. Ako želite stvoriti animirani favicons online, možete pokušati koristiti favicon generator favicon.cc ,

Više online generatora možete pronaći ovdje ,

Ako želite podijeliti svoje savjete o stvaranju favorita ili postaviti pitanje, čekam vas u komentarima!