Favicon je ona cool slika pored vaše adresne trake u vašem pregledniku. To je ono što izdvaja vašu web lokaciju na kartici oznaka i može se koristiti za povećanje svijesti o robnoj marki. Ako imate web mjesto, ali nikada niste razmišljali o stvaranju favicona, trebali biste razmisliti o svojoj odluci. Programeri softvera sve više koriste ikone za različite aspekte svojih aplikacija, poput ikona početnog zaslona na tabletima. Na sreću, projektiranje, stvaranje i implementacija favicona nešto je što gotovo svatko može učiniti ako slijedi prave korake.
Koraci
Metoda 1 od 3: Dizajnirajte svoj Favicon
Korak 1. Izradite favicon koji predstavlja vašu web stranicu
Vrsta web stranice koju imate trebala bi odrediti izgled vašeg favicona. Pokušajte osmisliti nešto što će se pridržavati imidža vašeg brenda i što će ljudima biti prepoznatljivo i pamtljivo. Vaš će favorit biti prva stvar koju ljudi vide kada pogledaju kartice u svom pregledniku, a također će se pojaviti i u oznakama ljudi.
- Na primjer, ako imate web stranicu s hranom, odabir favikona koji ima voće ili povrće kao dizajn može ga učiniti nezaboravnijim.
- Ako je vaša web stranica za odvjetničko društvo ili investicijsko društvo, najbolji je tradicionalni i elegantni favicon.
- Ako je vaša web stranica namijenjena mlađim ljudima, pokušajte stvoriti razigrani i šareni favicon.
Korak 2. Odlučite želite li prozirnu pozadinu
Ako ne označite pozadinu, ona će se ispuniti bijelom bojom, što se možda neće pridržavati vašeg branda. Prozirna pozadina poprimit će boju preglednika te će u nekim slučajevima izgledati pojednostavljeno. U drugim slučajevima, bojanje pozadine učinit će slova ili grafiku u prvom planu. Odlučite što bi bilo najbolje za vaš dizajn i imajte to na umu pri izradi.
Najosnovniji favicon je kvadrat veličine 16x16 i ima boju pozadine
Korak 3. Izradite ikonu koja se lako čita
Budući da je slika favicona koju ćete koristiti mala, važno je da svoju marku možete prenijeti bez zbunjivanja posjetitelja. Favicon koji je teško čitati ostavlja negativan dojam i može stvoriti pitanja u svijesti posjetitelja o kvaliteti rada koju možete pružiti. Previše složene slike i logotipi ne izgledaju dobro kad se smanje na 16x16 ili 32x32 piksela.
- Ako je vaš postojeći logotip previše kompliciran, tada ga možete pojednostaviti pomoću taktika kako bi bio prepoznatljiv po veličini ikone. Umjesto prikazivanja cijelog naziva tvrtke koristite inicijale ili dizajnirajte jednostavnu ikonu, a ne sliku.
- Ako već imate jednostavan logotip, možete smanjiti sliku i postaviti je kao svoju ikonu. Možda ćete ga morati promijeniti prije nego što ga pretvorite u datoteku sa ikonama.
- Također možete koristiti sliku objekta koja opisuje cjelokupnu temu vaše web stranice.
Korak 4. Izradite estetski ugodan favicon
Struktura vašeg favikona naziva se njezin oblik. Favikoni obično poprimaju oblike, poput kruga ili kvadrata. Kada dizajnirate svoj favicon, općenito je bolje ako se može uklopiti u jedan od ovih osnovnih oblika jer se oblici slobodnog oblika često mogu zbuniti ili zbuniti pri 16x16 piksela. Drugi važan aspekt vašeg dizajna naziva se estetsko jedinstvo. Estetsko jedinstvo uključuje pojedinosti i veličine različitih komponenti vašeg favicona te način na koji je vaš favicon uravnotežen. Što su detalji ujednačeniji, vaš će favicon izgledati skladnije. Na primjer, korištenje različitih vrsta fontova ili veličina unutar vašeg favikona nije oku ugodno i može učiniti da vaš favicon izgleda zbunjeno ili neuredno.
- Još jedan primjer estetskog jedinstva je održavanje zaobljenih kutova u svim oblicima vašeg favikona.
- Dobar primjer ikone koja je promijenila oblik je Googleov favicon. Promijenio se iz kvadrata u krug.
Korak 5. Koristite boje koje su kohezivne za vaš brend
Kad kreirate svoj favicon, trebali biste ga stvoriti u 8 bitnoj (256 boja) ili 24 bitnoj (16,7 milijuna boja) dubini boja jer će to funkcionirati na modernim preglednicima. Pobrinite se da se boje koje odaberete mogu pronaći na drugom mjestu na vašoj web stranici ili su na neki način povezane s vašim brendom. Favicon s bojama kojih nema na vašoj web stranici, logotipu ili u aplikacijama neće se pamtiti, a ljudi neće moći povezati ikonu s vašim brandom.
- Neke kreativne upotrebe boje favicon uključuju GitHub koji mijenja boje ovisno o statusu vašeg sustava i Trello, koji se mijenja ovisno o boji pozadine.
- Najčešće boje u faviconima su crvena i plava.
Korak 6. Uzmite u obzir svoju publiku pri izradi favicona
Osim što identificira vašu robnu marku, vaš favorit mora posjetiteljima izgledati privlačno. Ljudi s različitim ukusima, interesima i društvenim normama različitu će ikonologiju promatrati iz različitih perspektiva. Kulturne razlike postoje u našem društvu i mogle bi zbuniti ili odbiti publiku koju pokušavate privući.
Na primjer, Mac Os X koristi pečat koji je univerzalni simbol za poštu. Korištenje poštanskog sandučića ne bi bilo toliko učinkovito jer se poštanski sandučići razlikuju u različitim dijelovima svijeta
Korak 7. Potražite mišljenje prijatelja i kolega
Iako grafički nije nevjerojatno grafički intenzivan, favicon je važan dio vašeg branda. Na primjer, zamislite svoje omiljene web stranice poput Twittera, Gmaila, Facebooka ili wikiHowa i koliko povezujete favicon s markom. Ako nemate dobro oko za dizajn, ili ste zapanjeni kakvim dizajnom biste trebali raspolagati za svoju web stranicu, posavjetujte se s prijateljima koji imaju naklonosti dizajnu ili koji se bave grafičkim dizajnom.
- Raspitajte se u svojoj mreži prijatelja da vidite može li netko besplatno dati savjet o dizajnu.
- Veće tvrtke imaju interne grafičke dizajnere koji mogu stvoriti sliku favicona.
Metoda 2 od 3: Kreiranje vašeg Favicon -a
Korak 1. Pomoću softvera za uređivanje fotografija stvorite svoju ikonu
Pomoću softvera za uređivanje fotografija, poput Adobe Photoshopa ili Illustratora, možete stvoriti sliku za svoj favorit. Ove softverske aplikacije također vam omogućuju promjenu veličine i izvoz slike u pravom formatu. Neki softver omogućuje vam da ručno izradite svoj favicon.
- Postoje i posebni programi za uređivanje favicon koje možete pronaći na internetu.
- Upotrijebite tražilicu i upišite "favicon editors".
- Učinite svoje platno veličinom 512x512 piksela jer se ovaj broj razbija na najprikladnije veličine favikona i još uvijek je dovoljno velik za učinkovito uređivanje.
- Drugi popularan softver za uređivanje fotografija uključuje GIMP, PhotoScape i Paint. NET.
- Kad koristite ovaj softver, nećete moći izravno uređivati .ico datoteke, ali možete koristiti datoteke.png,-j.webp" />
Korak 2. Promijenite veličinu i spremite svoj favicon
32x32 px veličina je Windows stavki na radnoj površini, dok je 16x16 px veličina ikona na kartici preglednika. Nakon što svoj favicon izradite u većem formatu, važno je smanjiti njegovu veličinu kako biste mogli vidjeti kako će izgledati u preglednicima drugih korisnika. Ako nije čitljivo ili nije estetski ugodno, počnite s originalnim dizajnom. Razmislite o platformama na kojima će se vaša web stranica ili aplikacija najvjerojatnije koristiti, a zatim stvorite ikonu koja će pokriti sve vaše baze.
- Važno je napomenuti da različiti hardver i softver koriste različite veličine favikona.
- Neke druge veličine favikona uključuju 57x57px za standardni iOS zaslon, 72x72px za iPad, 96x96px za Google TV, 128x128px za Chrome web -trgovinu i 195x195px za Opera Speed Dial.
- Ako želite pokriti sve svoje baze, možete stvoriti verzije svog favicona u svakoj od ovih veličina.
- Spremite zasebne verzije svog favicona kako ne biste izgubili posao koji ste obavili.
Korak 3. Kombinirajte svoje datoteke pomoću pretvarača
Dobra stvar kod.ico datoteka je što možete kombinirati više datoteka za njezinu izradu. To je korisno jer će različiti preglednici i softver htjeti favicon različite veličine. Kako biste bili sigurni da vaš favicon izgleda dobro na svim različitim platformama, pretvorite datoteke pomoću mrežnog pretvarača. Upišite "pretvarač ikona" u svoju omiljenu tražilicu kako biste pronašli besplatne online aplikacije za to. Spremite spojenu datoteku kao "favicon.ico."
- Također možete koristiti program poput GIMP -a koji ima ugrađenu značajku ili preuzeti dodatak pod nazivom ICO FORMAT u Adobe Photoshop.
- Izradite novu mapu tako da možete pohraniti nove ikone ili radove u tijeku.
- U tražilicu upišite ".ico converter" ili "favicon generator" kako biste pronašli različite alate koje možete koristiti.
Metoda 3 od 3: Implementacija vašeg Favicon -a
Korak 1. Prenesite svoj favicon ako koristite uređivač web stranice
Mnogi urednici web stranica imaju ugrađeni obrazac koji vam omogućuje da automatski postavite svoj favicon na svoju web stranicu. Ako koristite uređivač web stranice koji ima ugrađen ovaj način rada, potražite opcije koje kažu "Prenesi Favicon" ili "Dodaj Favicon" u izborniku postavki vaše web stranice. Odaberite datoteku favicon.ico i prenesite je na svoju web lokaciju.
Ako ne možete pronaći mjesto za postavljanje svoje ikone na uređivač web stranice, morat ćete to učiniti ručno
Korak 2. Prenesite datoteku u korijenski direktorij svoje web lokacije
Ako vaša web stranica podržava protokol prijenosa datoteka ili FTP, tada možete koristiti svoj FTP klijent za prijenos nove datoteke favicon.icon u svoj korijenski (indeksni) direktorij. Ako nije, morat ćete otići na stranicu web domaćina i ručno prenijeti sliku. Ne zaboravite zamijeniti postojeću datoteku favicon.ico novom datotekom.
Korak 3. Dodajte datoteku u zaglavlje
Pronađite mjesto na kojem možete pristupiti PHP i CSS datotekama za svoju web lokaciju. Idite na datoteku header.php svoje web stranice i uredite je. Pod vrstom oznake"
-
. Ovo bi trebalo povezati vaše web mjesto s vašim favicon.
Budući da koristite PHP, to znači da će sve web lokacije koje koriste datoteku zaglavlja sada imati isti simbol
Izradite vlastitu ikonu Favicon Korak 14 Korak 4. Osvježite svoj preglednik
Kad završite s postavljanjem favicona, možete osvježiti preglednik da biste vidjeli novu sliku pored adresne trake. Da biste izravno prešli na sliku ažuriranog favicona, upišite "https://www.yourdomain.com/favicon.ico".
- Ako se vaš favorit u početku ne pojavi, možda ćete morati poništiti predmemoriju preglednika.
- Da biste izbrisali predmemoriju, idite na postavke preglednika i izbrišite svoje privremene internetske datoteke, kolačiće i povijest.
