Favicongenerátor

Mi a favicon, és hol jelenik meg?

A favicon a webhelyedet jelölő kis négyzetes ikon. A név a „favorite icon”, azaz kedvencikon rövidítése: az első ilyen böngésző a Favorites nevű könyvjelzők mellett jelenítette meg.

A böngészőlapon az oldalcím mellett látod, 16 képpont szélesen, élesebb kijelzőn 32-ben. Könyvjelzőkben és előzményekben is jelöli a webhelyet. Telefonos kezdőképernyőre mentve alkalmazásikonná válik. A Google a keresési találatban a webhely neve mellett is mutatja.

Mindenhol ugyanaz a feladata: egy pillantásra felismerhető legyen a többi ikon között.

Miért lesz egy faviconból több fájl?

Ezek a felületek különböző időben jelentek meg, és saját fájlt kérnek. A fenti favicongenerátor mindet elkészíti egy képből.

A lapok, könyvjelzők és előzmények a favicon.ico-t használják, amely egy fájlban tartalmazza a 16, 32 és 48 képpontos változatot. Ez a legrégebbi formátum; ha az oldal nem nevez meg ikont, a böngésző még mindig ezt keresi a gyökérmappában.

Ha SVG-ből indulsz, favicon.svg-t is kapsz, ezt az SVG-ikont támogató böngészők használják. Alakzatokból áll képpontok helyett, így bármely kijelzőn éles marad.

Az iPhone és iPad az apple-touch-icon.png-t használja a kezdőképernyőre mentett webhelyhez, 180 képpontos négyzetként. Az iPhone feketével tölti ki az átlátszó részt, ezért ez az ikon mindig egyszínű hátteret kap: a te színedet, vagy fehéret.

Az Android és a böngészőből telepített webes alkalmazás az icon-192.png és icon-512.png fájlokat használja. Ezeket a site.webmanifest nevű kis szövegfájlból találja meg, amely a megadott webhelynevet és a nagyobb ikonok helyét tartalmazza.

A különálló 16–48 képpontos PNG-k tartalékok a PNG-t kérő szolgáltatásoknak. A keresési találatokhoz a Google a kezdőlap HTML-jében szereplő ikonhivatkozásokat olvassa.

Hogyan add a faviconfájlokat a webhelyedhez?

Ha te vagy a fejlesztőd szerkeszti a webhely fájljait, két lépés kell.

Csomagold ki a letöltést, és tedd a fájlokat a webhely gyökérmappájába, ahol a kezdőlap van. Ellenőrzésként írd a cím végére, hogy /favicon.ico: az ikonnak meg kell nyílnia.

Ezután illeszd a README-ben és az eszközben látható HTML-sorokat az oldalak head részébe, ahol az oldalcím is van. Külön sor tartozik az ICO-hoz, Apple touch ikonhoz, manifesthez és az SVG-hez, ha van.

Az oldalak általában közös sablont használnak, így egyszer kell beilleszteni. A régi ikonsorokat előbb töröld, különben a böngésző továbbra is a régit választhatja.

Weboldalkészítőben kihagyhatod a két lépést: töltsd fel az icon-512.png-t a webhelyikon beállításánál, a rendszer hozzáadja a HTML-t.

Hogyan működjön a logó 16 képponton?

16 × 16 méretben a teljes ikon 256 apró színes négyzet. A legtöbb logó nem erre készült.

A szimbólummal kezdj, ne a névvel: nyolc betű 16 képponton betűnként két képpontot kap. Nincs szimbólumod? Használd az első betűt nagyban, vastagon. A vastag betű tovább marad olvasható, mint a vékony.

Ezután vegyél el részleteket. A vékony vonal és kis hézag összemosódik a környezetével, a szlogen pacává válik.

A világos és sötét különbsége számít, nem önmagában a szín. A lapok témától függően világosak vagy sötétek; a tengerészkék ikon sötét sávon eltűnik. Sötét jelhez adj világos hátteret az eszközben, vagy fordítva.

A belső margó, a logó és a négyzet széle közti tér, kompromisszum. Ha túl nagy, apró lesz a logó; ha túl kicsi, az iPhone lekerekített ikonsarkai levághatják.

Végül nézd meg fent a világos és sötét lapelőnézetet valódi méretben, nagyítás nélkül. Az ingyenes logóellenőrző tovább megy: 32 képpontra kicsinyíti a logód, és méri, mennyi részlet marad.

Mikor rajzold újra kicsinyítés helyett?

Néha semmilyen beállítás nem segít. Egy részletes rajznál vagy árnyékokra épülő 3D megjelenésnél a részlet maga a terv, és 16 képponton eltűnik. Ez az eszköz átméretez, nem rajzol újra.

Ettől még nem rossz a logó, csak nagyobb helyre készült. Tervezz külön kis változatot: egyszerűsített szimbólumot vagy kezdőbetűt a márka betűtípusával. Tartsd meg a színeket és a forma egy részét, így összekapcsolják őket. Egy tiszta kezdőbetűt mindig többre tartunk egy homályos miniatűrnél.

Új jel kell? Az AI-logógenerátor a márkanevedből és egy tetszőleges rövid leírásból tervez. A logósablonjainkból készült logók külön szimbólumfájlt is adnak, ha van bennük, és minden megvásárolt logóhoz járnak faviconfájlok.