Kövesd ezt a kidolgozott példát, majd alkalmazd ugyanazokat a vezérlőket a saját képedre. Favikon / ICO generátor megnyitása.
Válasszon egy tiszta logót, vagy kezdje a kezdőbetűkkel
Nyissa meg a Favicon / ICO generátort, és válassza a Kép lehetőséget. Töltsön fel egy PNG, JPG, JPEG, WebP vagy GIF fájlt, vagy válassza a Minta kipróbálása lehetőséget. A kidolgozott példa a favicon-orbit.png fájlt használja, egy 512 × 512 pixeles lila pálya jelet átlátszó sarkokkal. A bemenet 202,491 bájt.
Kész logó nélküli márkához válassza a Szöveg lehetőséget az eszközoldalon. Írjon be egy vagy két betűt, és válassza a Folytatás lehetőséget. A szerkesztő Modern sans, Klasszikus serif és Monospace betűtípusokat kínál, valamint külön szöveg- és háttérszíneket. Legfeljebb három karakter fogadható el, de a plusz karakterek kis méretben nehezen felismerhetővé válhatnak.
Tartsa meg az eredeti grafikát. A generátor új ikonfájlokat hoz létre, és nem írja felül a forrást. A GIF bemenet álló ikonná válik, nem pedig animált faviconná.
Monogram esetén a Betűtípus menü három beépített stílussal indul. Válassza a Rendszerbetűtípusok használata lehetőséget egy támogatott asztali böngészőben, és engedélyezze a hozzáférést az eszközére telepített betűtípusok hozzáadásához. Használja az előző és következő nyilakat a szomszédos betűtípusok összehasonlításához, vagy válasszon egy családot, és vizsgálja meg az élő előnézetet, különösen 16 pixelnél. A betűtípusok az eszközén maradnak; a beépített stílusok engedély nélkül működnek.
Használjon egyszerű sziluettet. Egy részletes fénykép vonzónak tűnhet 512 pixelnél, de 16 pixelnél elmosódott folttá válhat.
Finomítsa a keretezést és vizsgálja meg a kis előnézeteket
A szerkesztő világos és sötét böngészőfüleket, valamint előnézeteket jelenít meg a gyakori ikonméretekben. Először a 16 pixeles példát ellenőrizze; ez a legszigorúbb teszt arra, hogy a jel felismerhető marad-e. Az Apple Touch előnézet egy 180 pixeles exportot képvisel, és kisebb méretben jelenik meg a munkaterületen.
Telefonon nyissa meg a Beállításokat. Hagyja a Létrehozás innen beállítást Feltöltött kép értéken, a Kép illesztése beállítást pedig a Teljes kép megjelenítése értéken. Ehhez a mintához állítsa a Tartalom körüli térközt 0 értékre, és engedélyezze az Átlátszó hátteret. A forrás már tartalmazza a saját lekerekített lila alakját és tiszta margóit, így nincs szüksége további színes háttérre.
Más forrás esetén a Teljes kép megjelenítése megtartja a széleket, míg az Ikon kitöltése levághatja azokat. A Lekerekített négyzet, Négyzet és Kör határozza meg a külső alakot. Az Átlátszó háttér megőrzi az átlátszó területeket, de nem tudja eltávolítani a fényképen már meglévő átlátszatlan hátteret. Minden keretezési módosítás után tekintse át a legkisebb előnézetet.
Az átlátszó sarkokkal rendelkező logó nem kívánt második keretet kaphat, ha külön átlátszatlan hátteret ad hozzá. Tekintse meg mindkét háttérválasztási lehetőséget.
A példa ebben az útmutatóban
Próbálj ki egy mintát: favicon-orbit.png, 512 × 512 px. Feltöltött kép; Teljes kép megjelenítése; Lekerekített négyzet; Hely a tartalom körül 0%; Átlátszó háttér engedélyezve; Weboldal ikoncsomag (ZIP); Weboldal neve My website.
- Forráskép
- 512 × 512 PNG · 202,491 bájt
- ICO képkocka
- 16, 24, 32, 48, 64, 128 és 256 px
- Csomag
- 9 fájl · 304,351 bájt
- Megjelenített eredmény
- Valódi 256 × 256 ICO képkocka
Válasszon egy többméretű ICO fájlt vagy a webhelycsomagot
A Letöltés alatt válaszd a Weboldal ikoncsomag (ZIP) lehetőséget ehhez a példához. Hagyd a Weboldal neve mezőt My website értéken a minta kedvéért, vagy írd át a saját projekted valódi márkanevére. Ezt a nevet a site.webmanifest fájl használja; nem kerül szövegként a képre.
Válaszd a Start gombot. A böngésző generál egy hétkockás favicon.ico fájlt 16, 24, 32, 48, 64, 128 és 256 képpontos négyzet alakú képekkel. Létrehoz továbbá PNG ikonokat 16, 32, 48, 180, 192 és 512 képpontos méretben, egy jegyzékfájlt és telepítési útmutatót. Az eredmény egyetlen ZIP fájl, ahelyett, hogy minden ikonhoz külön letöltőgomb tartozna.
Ha csak egy klasszikus favicon.ico fájlra van szükséged, válaszd helyette a Többméretű ICO opciót. Ez akkor hasznos, ha a weboldal platformja elfogad egy ICO feltöltést, és nincs szüksége külön csomagra.
A csomag weboldal ikonok készlete. Nem alakítja át automatikusan a webhelyet progresszív webalkalmazássá.
Ikonfájlok letöltése, telepítése és ellenőrzése
A Letöltés elmenti a website-icons.zip fájlt. A tényleges példa kilenc fájlt tartalmaz, és 304,351 bájt méretű. A fenti összehasonlítás a 512 képpontos forrást mutatja a valódi 256 képpontos, az exportált ICO fájlból kinyert képkocka mellett, nem pedig egy szimulált böngésző-képernyőképet.
Bontsd ki a ZIP-et, töltsd fel az ikonfájlokat a webhelyed gyökérkönyvtárába, és olvasd el a INSTALL.txt fájlt. Tartalmazza a HTML linkcímkéket a ICO, PNG ikonhoz, az Apple Touch ikonhoz és a webes jegyzékfájlhoz. Ha a fájlokat almappába helyezed, frissítsd a HTML elérési utakat és a site.webmanifest fájlon belüli ikonútvonalakat is.
Ellenőrizd a webhelyedet egy friss böngészőlapon és azokon az eszközökön, amelyek fontosak számodra. A böngészők gyorsítótárazhatják a faviconokat, így egy régi ikon nem bizonyítja azonnal a telepítés sikertelenségét. Tartsd meg a forrásképet és a letöltött csomagot a szerkesztő frissítése előtt, mert a frissítés visszavisz a fő eszközoldalra.
Válassz egy kanonikus ikonhelyet, és tartsd következetesen a HTML elérési utakat. A generátor eszközöket hoz létre; ezek közzététele továbbra is a weboldal-munkafolyamatod része marad.
Gyakori kérdések
Létrehozhatok ikont logó feltöltése nélkül?
Igen. Válassza a Szöveg lehetőséget, írja be a kezdőbetűit, majd válassza ki a betűtípust, a színeket, az alakzatot és a térközt a szerkesztőben.
Milyen méretek vannak a ICO fájlban?
A ICO hét PNG-alapú keretet tartalmaz: 16, 24, 32, 48, 64, 128 és 256 képpontos négyzeteket. A böngésző kiválasztja a megfelelő keretet.
Mit tartalmaz a webhely ZIP-fájlja?
Tartalmazza a favicon.ico-t, hat PNG ikont böngésző, Apple és Android használatra, a site.webmanifest fájlt és a INSTALL.txt-t a HTML linkcímkékkel.
Lehet az ikonnak átlátszó háttere?
Igen. Engedélyezze az Átlátszó háttér opciót. Ez megőrzi a forrás körüli átlátszó területeket; nem távolítja el az átlátszatlan hátteret egy fényképről.
Fel van töltve a kép konvertálásra?
Nem. Ez az eszköz a böngészőjében generálja és csomagolja az ikonfájlokat. Tartsa meg a letöltött fájlokat, mert a szerkesztő nem állandó projekttároló.
Használhatom a számítógépemre telepített betűtípusokat?
Igen, ha a böngészője támogatja a helyi betűtípus-hozzáférést. Válassza a Szöveg / monogram lehetőséget, válassza a Rendszerbetűtípusok használata opciót, és adja meg a böngésző engedélyét. Az elérhető betűtípuscsaládok megjelennek a Betűtípus listában. A mellékelt stílusok akkor is használhatók maradnak, ha az engedélyt elutasítják, vagy a helyi betűtípus-hozzáférés nem érhető el.
Adj a következő weboldaladnak egy tiszta, kis méretű névjegyet.
Próbálj ki egy mintát vagy használd a saját fájlodat, és ellenőrizd az eredményt a megosztás előtt.
