Kako izraditi favicon
Za izradu favicona dodajte logotip iznad - ili upišite slovo ili emoji - podesite izgled i preuzmite ZIP. Pregledi prikazuju ikonu u svakoj stvarnoj veličini i u kartici preglednika, u svijetlom i tamnom načinu rada.
- Odaberite izvor. Najbolje radi PNG ili SVG logotip; svaka druga slika uklapa se u kvadrat. Nemate logotip? Upotrijebite slovo ili emoji na obojenoj pozadini.
- Podesite izgled. Boja pozadine ili prozirnost, oblik (zaobljeni kvadrat, kvadrat ili krug) i koliko razmaka ide oko slike.
- Preuzmite. Preuzmi sve ikone daje vam cijeli paket; Samo favicon.ico daje samo tu jednu datoteku.
Što sadrži paket s faviconom
| Datoteka | Veličina | Gdje se koristi |
|---|---|---|
favicon.ico | 16, 32 i 48 px | Svi preglednici, Windows, rezultati pretraživanja |
favicon-16x16.png, favicon-32x32.png | 16 i 32 px | Kartice preglednika i oznake |
apple-touch-icon.png | 180 px | Početni zaslon iPhonea i iPada |
android-chrome-192x192.png, -512x512.png | 192 i 512 px | Početni zaslon Androida, instalirane web-aplikacije |
site.webmanifest | - | Imenuje ikone i boje za Android i web-aplikacije |
favicon-html.txt | - | Oznake koje zalijepite u svoje stranice |
Apple ikona uvijek dobiva punu pozadinu i četvrtaste kutove: iPhone sam zaobljuje kutove i prozirna područja prikazuje kao crna.
Dodajte favicon na svoje web-mjesto
- Raspakirajte paket i učitajte datoteke u korijensku mapu svojeg web-mjesta, pokraj početne
stranice, tako da
yoursite.com/favicon.icootvara ikonu. - Zalijepite HTML oznake (prikazane gore i u datoteci
favicon-html.txt) u<head>svojih stranica. - Osvježite stranicu s očišćenom predmemorijom. Preglednici zadržavaju stare favicone, pa je privatni prozor najbrži način provjere.
Na WordPressu umjesto toga možete postaviti ikonu od 512 px kao ikonu web-mjesta u Customizeru, a on sam izrađuje ostale veličine.
Savjeti za jasan favicon
- Pojednostavite. Na 16 piksela detaljan se logotip pretvara u mutnu mrlju. Upotrijebite simbol iz svojeg logotipa ili njegovo prvo slovo, a ne cijeli logotip s tekstom.
- Koristite kontrast. Kartice su svijetle ili tamne ovisno o temi preglednika - provjerite oba pregleda.
- Pazite na razmak. Manji razmak čini ikonu većom u kartici; malo veći izgleda bolje na početnim zaslonima mobitela.
Trebate samo jednu .ico datoteku druge veličine? Pretvarač slika sprema bilo koju sliku kao ICO.
Česta pitanja
Kako izraditi favicon?
Dodajte svoj logotip ili bilo koju kvadratnu sliku u okvir na ovoj stranici ili upišite slovo ili emoji. Podesite pozadinu, razmak i oblik, a zatim preuzmite ZIP sa svim veličinama ikona i HTML-om koji ćete zalijepiti na svoje web-mjesto.
Koje veličine favicona su potrebne?
Datoteka favicon.ico s verzijama od 16, 32 i 48 piksela pokriva preglednike i Windows; apple-touch-icon od 180 piksela pokriva iPhone i iPad; ikone od 192 i 512 piksela pokrivaju Android i instalirane web-aplikacije. Paket sadrži sve njih.
Kako dodati favicon na svoje web-mjesto?
Učitajte datoteke iz ZIP-a u korijensku mapu svojeg web-mjesta tako da se favicon.ico otvara na yoursite.com/favicon.ico. Zatim zalijepite HTML oznake u head dio svojih stranica.
Zašto se moj novi favicon ne prikazuje?
Preglednici dugo čuvaju favicone u predmemoriji. Otvorite adresu favicona izravno, osvježite je ili probajte privatni prozor. Rezultatima pretraživanja može trebati i nekoliko tjedana da se ažuriraju.
Mogu li izraditi favicon iz teksta ili emojija?
Da. Odaberite „Slovo ili emoji", upišite jedan ili dva znaka i odaberite boje. To je brz način da dobijete uredan favicon bez logotipa.
Učitava li se moja slika?
Ne. Sve se ikone izrađuju u vašem pregledniku, a vaša slika nikada ne napušta vaš uređaj.