Favicon je ta sjajna mala 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 lokaciju, a 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 ekrana na tabletima. Na sreću, dizajniranje, kreiranje i implementacija favicona nešto je što gotovo svatko može učiniti ako slijedi prave korake.
Koraci
Metoda 1 od 3: Dizajniranje vašeg Favicon -a
Korak 1. Kreirajte ikonu koja 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 nezaboravno. 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 odredite pozadinu, ona će biti ispunjena bijelom bojom, koja se možda neće pridržavati vašeg brenda. 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 šta 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. Kreirajte 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 pročitati ostavlja negativan utisak i može stvoriti pitanja u svijesti posjetitelja o kvaliteti posla koji možete pružiti. Previše složene slike i logotipi ne izgledaju dobro kada 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 prikaza cijelog naziva kompanije 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.
- Možete koristiti i sliku objekta koja opisuje cjelokupnu temu vaše web lokacije.
Korak 4. Kreirajte estetski ugodan favicon
Struktura vašeg favikona naziva se njegov 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 rezoluciji 16x16 piksela. Drugi važan aspekt vašeg dizajna naziva se estetsko jedinstvo. Estetsko jedinstvo uključuje detalje i veličine različitih komponenti vašeg favicona i način na koji je vaš favicon uravnotežen. Što su detalji ujednačeniji, vaš će favicon izgledati kohezivnije. Na primjer, korištenje različitih vrsta fontova ili veličina unutar vašeg favikona nije ugodno oku i može učiniti da vaš favicon izgleda zbunjeno ili neuredno.
- Još jedan primjer estetskog jedinstva je održavanje zaobljenih uglova 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
Kada kreirate svoj favicon, trebali biste ga stvoriti u 8 -bitnoj (256 boja) ili 24 -bitnoj (16,7 miliona 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 brendom.
- Neke kreativne upotrebe boje favicon uključuju GitHub koji mijenja boje ovisno o statusu vašeg sistema i Trello, koji se mijenja ovisno o boji pozadine.
- Najčešće boje koje se koriste u faviconima su crvena i plava.
Korak 6. Uzmite u obzir svoju publiku prilikom dizajniranja favicona
Osim identifikacije vašeg brenda, vaš favicon mora izgledati privlačno za vaše posjetitelje. Ljudi s različitim ukusima, interesima i društvenim normama različitu će ikonologiju gledati iz različitih perspektiva. Kulturne razlike postoje u našem društvu i mogu 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 nije izuzetno 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 lokaciju, posavjetujte se s prijateljima koji vole dizajn ili se bave grafičkim dizajnom.
- Raspitajte se u svojoj mreži prijatelja da vidite može li neko besplatno dati savjet o dizajnu.
- Veće kompanije imaju interne grafičke dizajnere koji mogu stvoriti sliku favikona.
Metoda 2 od 3: Kreiranje vašeg Favicon -a
Korak 1. Pomoću softvera za uređivanje fotografija stvorite svoju ikonu
Možete koristiti softver za uređivanje fotografija kao što su Adobe Photoshop ili Illustrator za kreiranje slike za svoju ikonu. Ove softverske aplikacije također vam omogućuju promjenu veličine i izvoz slike u pravom formatu. Neki softver vam omogućuje da ručno kreirate svoj favicon.
- Postoje i posebni programi za uređivanje koji se mogu pronaći na mreži.
- Koristite tražilicu i upišite "favicon editors".
- Učinite svoje platno veličinom 512x512 piksela jer se ovaj broj raščlanjuje na najprikladnije veličine favicona i još uvijek je dovoljno velik da ga možete učinkovito uređivati.
- Drugi popularan softver za uređivanje fotografija uključuje GIMP, PhotoScape i Paint. NET.
- Kada koristite ovaj softver, nećete moći izravno uređivati .ico datoteke, ali možete koristiti.png,-j.webp" />
Korak 2. Promijenite veličinu i sačuvajte svoju ikonu
32x32 px je veličina Windows desktop stavki, dok je 16x16 px veličina favicon -a na kartici vašeg pretraživača. Nakon što kreirate svoj favicon u većem formatu, važno je smanjiti njegovu veličinu kako biste vidjeli kako će izgledati u preglednicima drugih korisnika. Ako nije čitljivo ili nije estetski ugodno, počnite od originalnog dizajna. 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 ikona.
- Neke druge veličine favicona uključuju 57x57px za standardni iOS početni ekran, 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.
- Sačuvajte zasebne verzije svog favicona kako ne biste izgubili posao koji ste obavili.
Korak 3. Kombinirajte svoje datoteke pomoću pretvarača
Odlična stvar u vezi s.ico datotekama je to što možete kombinirati više datoteka da biste je stvorili. Ovo 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. Spojite spojenu datoteku kao "favicon.ico."
- Također možete koristiti program poput GIMP -a koji ima ugrađenu funkciju ili preuzeti dodatak pod nazivom ICO FORMAT u Adobe Photoshop.
- Kreirajte 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đen obrazac koji vam omogućuje automatsko postavljanje favicona na vašu web stranicu. Ako koristite uređivač web stranice koji ima ovo ugrađeno, potražite opcije na kojima se kaže "Upload Favicon" ili "Add Favicon" u izborniku postavki vaše web stranice. Odaberite favicon.ico datoteku i postavite je na svoju web lokaciju.
Ako ne možete pronaći mjesto za postavljanje svoje ikone na uređivaču web stranice, morat ćete to učiniti ručno
Korak 2. Otpremite datoteku u korijenski direktorij vaše web lokacije
Ako vaša web stranica podržava File Transfer Protocol ili FTP, tada možete koristiti svoj FTP klijent za postavljanje nove favicon.icon datoteke u vaš root (indeksni) direktorij. Ako ne, morat ćete otići na stranicu web domaćina i ručno prenijeti sliku. Ne zaboravite zamijeniti postojeću favicon.ico datoteku 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 lokacije i uredite je. Pod vrstom oznake,"
-
. Ovo bi trebalo povezati vašu web lokaciju s vašom favicon.
Budući da koristite PHP, to znači da će sve web lokacije koje koriste vašu datoteku zaglavlja sada imati isti simbol
Kreirajte vlastitu ikonu Favicon Korak 14 Korak 4. Osvježite pregledač
Kada završite s postavljanjem favicona, možete osvježiti preglednik da biste vidjeli novu sliku pored adresne trake. Da biste otišli izravno 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 u postavke preglednika i izbrišite svoje privremene internetske datoteke, kolačiće i povijest.
