Spletne ikone ali favicone so ključni del spletne prisotnosti in celostne grafične podobe vsakega spletnega mesta. Prikazujejo se v zavihkih brskalnika, na seznamih zaznamkov, na domačih zaslonih mobilnih naprav ter v okoljih progresivnih spletnih aplikacij (PWA). Orodje Generator ikon Favicon omogoča pretvorbo ene same izvorne slike v celoten paket ikon, prilagojenih za različne naprave in platforme.
Delovanje in podprti vhodni formati
Orodje sprejme eno slikovno datoteko v formatu PNG, JPG ali SVG in jo pretvori v zbirko ikon, ki jih zapakira v prenosljivo datoteko ZIP, hkrati pa pripravi ustrezno kodo HTML za integracijo.
Pri pripravi vhodne slike veljajo naslednja pravila in omejitve:
- Podprti formati: Izberete lahko izključno datoteke PNG, JPG ali SVG.
- Omejitev velikosti: Največja dovoljena velikost datoteke je 50 MB.
- Priporočene dimenzije: Za rasterske formate (PNG ali JPG) je priporočljiva velikost vsaj 512 × 512 slikovnih pik. Uporaba manjših slik lahko povzroči, da bodo večje generirane ikone videti zamegljene.
Orodje med nalaganjem in analizo datoteke prikazuje dejansko širino in višino naložene slike v formatu "{w} × {h} px". Če poskusite naložiti neustrezno datoteko, sistem javi napako. V primeru neveljavne ali poškodovane datoteke se izpiše opozorilo "Te datoteke ni bilo mogoče odpreti kot slike. Morda je poškodovana, prazna ali pa sploh ne gre za sliko.". Če je težava v strukturi vektorske datoteke, se prikaže "Tega SVG-ja ni bilo mogoče prebrati. Preverite, ali je datoteka veljaven dokument SVG.". Za nepodprte formate se izpiše "Podprte so samo slike PNG, JPG in SVG.". Če datoteka presega omejitev, sistem opozori s sporočilom "Ta datoteka presega 50 MB. Uporabite manjšo izvorno sliko.".
Prilagajanje nekvadratnih slik in izbira ozadja
Ikone morajo biti vedno kvadratne oblike. Če vaša izvorna slika nima razmerja stranic 1:1, lahko v vmesniku izberete enega od dveh načinov prilagajanja pod možnostjo "Nekvadratna slika":
- Prilagodi (z odmikom): Celotna slika ostane vidna, centrirana z odmiki okoli nje. To je privzeta nastavitev za nekvadratne vire.
- Zapolni (obreži): Slika zapolni kvadrat, odvečni robovi pa se obrežejo.
Poleg obrezovanja je pomembna nastavitev ozadja pod možnostjo "Ozadje":
- Prosojno: Privzeta možnost, pri kateri ikona nima barvnega ozadja. Prosojna ozadja so najbolj primerna za zavihke brskalnikov.
- Barva: Omogoča izbiro poljubne barve ozadja. Nastavitev barvnega ozadja je varnejša izbira za ikone na domačem zaslonu naprav iPhone in iPad, saj operacijski sistem iOS prosojna območja na domačem zaslonu samodejno obarva črno.
Vsebina generiranega paketa ikon
Po zaključku postopka orodje pripravi datoteko ZIP, ki vsebuje naslednje elemente:
| Ime datoteke / format | Velikosti (v slikovnih pikah) | Namen in uporaba |
|---|---|---|
favicon.ico |
16 × 16, 32 × 32, 48 × 48 | Klasična ikona zavihka za starejše in sodobne brskalnike. |
| Ikone PNG | 16 × 16, 32 × 32 | Ikone zavihkov v formatu PNG. |
| Ikona PNG | 180 × 180 | Namenjena za domači zaslon naprav iPhone in iPad (Apple touch icon). |
| Ikone PNG | 192 × 192, 512 × 512 | Namenjene za Android in nameščene spletne aplikacije (PWA). |
site.webmanifest |
- | Majhna tekstovna datoteka, ki napravam sporoča, kje se nahajajo velike ikone. |
| Izvorna SVG (opcijsko) | Vektorska velikost | Vključena le, če je bila izvorna slika SVG; zagotavlja ostrino pri vseh velikostih. |
Namestitev in implementacija na spletno mesto
Za pravilno delovanje ikon na vašem spletnem mestu sledite naslednjemu postopku:
- Prenesite pripravljeno datoteko ZIP s klikom na gumb "Prenesi ZIP".
- Razpakirajte vsebino in vse datoteke naložite neposredno v korensko mapo svojega spletnega mesta. Ključno je, da je datoteka
favicon.icodostopna neposredno na naslovu/favicon.ico. - Kopirajte generirano kodo HTML, ki jo ponudi orodje, in jo prilepite v glavo (znotraj oznak
<head>) na vsaki strani svojega spletnega mesta.
Brskalniki in mobilne naprave bodo ob obisku spletnega mesta samodejno prebrali te zapise ter izbrali in naložili najprimernejšo velikost ikone za določen zaslon.
Zasebnost in obdelava podatkov
Obdelava vaših slik poteka lokalno. Celotna pretvorba izvorne datoteke v različne formate in velikosti se izvede neposredno v vašem brskalniku. Med tem postopkom se na strežnike BroBroGo ne prenaša ničesar, kar zagotavlja, da vaši podatki ne zapustijo vaše naprave.
Pogosta vprašanja (FAQ)
Katere datoteke so v paketu ikon?
Datoteka favicon.ico z različicami velikosti 16, 32 in 48 pikslov, ikone PNG v velikostih 16, 32, 180, 192 in 512 pikslov ter datoteka site.webmanifest, ki navaja velike ikone. Če začnete z SVG, je vključena tudi sama vektorska slika. Vse skupaj je zapakirano v eni datoteki ZIP.
Kakšne velikosti naj bo moja izvorna slika?
Format SVG je idealen — vsaka ikona se izriše iz vektorja, zato ostane ostra tudi pri velikosti 16 pikslov. Za PNG ali JPG začnite z velikostjo vsaj 512 × 512; manjše slike se povečajo in lahko izgledajo zamegljeno.
Naj bo ozadje prosojno ali barvno?
Ikone zavihkov izgledajo odlično s prosojnim ozadjem. Vendar pa domači zasloni naprav iPhone in iPad prosojna območja obarvajo črno — če obstaja možnost, da bodo uporabniki dodali vaše spletno mesto na svoj domači zaslon, izberite barvo ozadja.
Kaj se zgodi s sliko, ki ni kvadratna?
Ikone so kvadratne, vendar vaša slika nikoli ne bo raztegnjena. Privzeto je centrirana z odmiki okoli nje; preklopite na možnost "Zapolni (obreži)", da namesto tega obrežete daljše robove.
Kam na svojem spletnem mestu moram naložiti datoteke?
Naložite jih v korensko mapo svojega spletnega mesta, tako da je favicon.ico dosegljiv na naslovu /favicon.ico, nato pa kopirajte ustvarjene vrstice v glavo svojih strani. Brskalniki bodo sami izbrali pravo velikost.