Sledite temu delovnemu primeru, nato prilagodite iste kontrole svoji sliki. Odpri Generator ikon za zaznamke / ICO.
Izberite jasen logotip ali začnite z začetnicami
Odprite Favicon / ICO Generator in izberite Slika. Naložite PNG, JPG, JPEG, WebP ali GIF ali izberite Preizkusi vzorec. Delovni primer uporablja favicon-orbit.png, vijolično orbitno oznako velikosti 512 × 512 slikovnih pik s prozornimi vogali. Vnos je 202,491 bajtov.
Za blagovno znamko brez končanega logotipa na strani orodja izberite Besedilo. Vnesite eno ali dve črki in izberite Nadaljuj. Urejevalnik ponuja pisave Modern sans, Classic serif in Monospace ter ločene barve besedila in ozadja. Sprejetih je do tri znake, vendar lahko dodatni znaki postanejo težko prepoznavni pri majhnih velikostih.
Ohranite izvirno umetnino. Generator ustvari nove datoteke ikon in ne prepiše vira. Vnos GIF postane mirujoča ikona namesto animiranega favicona.
Za monogram se meni Pisava začne s tremi vključenimi slogi. Izberite Uporabi sistemske pisave v podprtem namiznem brskalniku in dovolite dostop za dodajanje pisav, nameščenih v vaši napravi. Uporabite prejšnje in naslednje puščice za primerjavo sosednjih pisav ali izberite družino in preglejte predogled v živo, zlasti pri 16 slikovnih pikah. Pisave ostanejo v vaši napravi; vključeni slogi delujejo brez dovoljenja.
Uporabite preprosto silhueto. Podrobna fotografija je lahko privlačna pri 512 slikovnih pikah, vendar postane nejasna pika pri 16 slikovnih pikah.
Izboljšajte kadriranje in preglejte majhne predoglede
Urejevalnik prikazuje svetle in temne zavihke brskalnika ter predoglede pri običajnih velikostih ikon. Najprej preverite primer s 16 slikovnimi pikami; to je najstrožji preizkus, ali oznaka ostane prepoznavna. Predogled Apple Touch predstavlja izvoz 180 slikovnih pik in je v delovnem prostoru prikazan manjši.
V telefonu odprite Nastavitve. Pustite Ustvari iz nastavljeno na Naložena slika in Prilagoditev slike nastavljeno na Pokaži celotno sliko. Za ta vzorec nastavite Prostor okoli vsebine na 0 in omogočite Prozorno ozadje. Vir že vsebuje svojo zaobljeno vijolično obliko in jasne robove, zato ne potrebuje dodatnega barvnega ozadja.
Pri drugačnem viru Pokaži celotno sliko ohrani robove, medtem ko jih Zapolni ikono lahko obreže. Zaobljen kvadrat, Kvadrat in Krog določajo zunanjo obliko. Prozorno ozadje ohrani jasna območja, vendar ne more odstraniti neprozornega ozadja, ki je že narisano na fotografiji. Po vsaki spremembi kadriranja preglejte najmanjši predogled.
Logotip s prozornimi vogali lahko dobi nezaželen drugi okvir, če dodate ločeno neprozorno ozadje. Predoglejte obe izbiri ozadja.
Primer v tem vodniku
Poskusite vzorec: favicon-orbit.png, 512 × 512 slikovnih pik. Naložena slika; Prikaži celotno sliko; Zaobljen kvadrat; Prostor okoli vsebine 0%; Omogočeno prozorno ozadje; Paket ikon za spletno mesto (ZIP); Ime spletnega mesta My website.
- Izvorna slika
- 512 × 512 PNG · 202,491 bajtov
- ICO sličic
- 16, 24, 32, 48, 64, 128 in 256 slikovnih pik
- Paket
- 9 datotek · 304,351 bajtov
- Prikazan rezultat
- Dejanski 256 × 256 ICO okvir
Izberite več velikosti ICO ali paket spletnega mesta
Pod možnostjo Prenos izberite Paket ikon za spletno mesto (ZIP) za ta primer. Ime spletnega mesta pustite kot My website za vzorec ali ga zamenjajte z dejanskim imenom blagovne znamke za svoj projekt. To ime se uporablja v site.webmanifest; ne doda se kot besedilo čez sliko.
Izberite Začni. Brskalnik ustvari favicon.ico s sedmimi sličicami s kvadratnimi slikami pri 16, 24, 32, 48, 64, 128 in 256 slikovnih pikah. Ustvari tudi PNG ikon pri 16, 32, 48, 180, 192 in 512 slikovnih pikah, manifest in navodila za namestitev. Rezultat je ena datoteka ZIP namesto ločenega gumba za prenos za vsako ikono.
Če potrebujete le klasično favicon.ico, namesto tega izberite Več velikosti ICO. To je uporabno, ko platforma spletnega mesta sprejme nalaganje ICO in ne potrebuje ločenega paketa.
Paket je nabor sredstev za ikone spletnega mesta. Spletnega mesta ne spremeni samodejno v progresivno spletno aplikacijo.
Prenesite, namestite in preverite datoteke ikon
Prenos shrani website-icons.zip. Dejanski delovni primer vsebuje devet datotek in meri 304,351 bajtov. Zgornja primerjava prikazuje vir s 512 slikovnimi pikami poleg pristnega okvirja s 256 slikovnimi pikami, pridobljenega iz izvoženega ICO, namesto simuliranega posnetka zaslona brskalnika.
Izvlecite ZIP, naložite datoteke ikon v koren svojega spletnega mesta in preberite INSTALL.txt. Vključuje HTML povezovalne oznake za ICO, PNG ikono, ikono Apple Touch in spletni manifest. Če datoteke postavite v podmapo, posodobite tako poti HTML kot poti do ikon znotraj site.webmanifest.
Preverite svoje spletno mesto v novem zavihku brskalnika in na napravah, ki so vam pomembne. Brskalniki lahko predpomnijo favikone, zato stara ikona ne dokazuje takoj, da namestitev ni uspela. Obdržite izvorno sliko in preneseni paket, preden osvežite urejevalnik, saj osvežitev vrne na glavno stran orodja.
Izberite eno kanonično lokacijo ikone in ohranite poti HTML dosledne. Generator ustvari sredstva; njihovo objavljanje ostaja del vašega delovnega procesa spletnega mesta.
Pogosta vprašanja
Ali lahko ustvarim favicon brez nalaganja logotipa?
Da. Izberite Besedilo, vnesite svoje začetnice, nato v urejevalniku izberite pisavo, barve, obliko in razmik.
Katere velikosti so v datoteki ICO?
Datoteka ICO vsebuje sedem okvirjev na osnovi PNG: 16, 24, 32, 48, 64, 128 in 256 kvadratnih slikovnih pik. Brskalnik izbere ustrezen okvir.
Kaj je vključeno v spletni ZIP?
Vsebuje favicon.ico, šest PNG ikon za brskalnik, Apple in Android, site.webmanifest in INSTALL.txt s povezovalnimi oznakami HTML.
Ali ima lahko moj favicon prozorno ozadje?
Da. Omogočite Prozorno ozadje. To ohrani prozorna območja okoli vira; ne odstrani neprozornega ozadja s fotografije.
Ali se slika naloži za pretvorbo?
Ne. To orodje ustvari in zapakira datoteke ikon v vašem brskalniku. Prenesene datoteke shranite, saj urejevalnik ni trajna shramba projektov.
Ali lahko uporabim pisave, nameščene v mojem računalniku?
Da, ko vaš brskalnik podpira dostop do lokalnih pisav. Izberite Besedilo / monogram, izberite Uporabi sistemske pisave in dovolite brskalniku dostop. Vaše razpoložljive družine pisav se prikažejo na seznamu Pisave. Vključeni slogi ostanejo uporabni, če je dovoljenje zavrnjeno ali dostop do lokalnih pisav ni na voljo.
Svojemu naslednjemu spletnemu mestu dajte jasen majhen podpis.
Preizkusite vzorec ali uporabite svojo datoteko in pred skupno rabo preglejte rezultat.
