Ugrás a fő tartalomhoz

Apple Touch Icon vs Favicon: Mit kell tartalmaznia egy modern webhelynek?

Szerző: Converty Team

Hasonlítsa össze az Apple érintőképernyős ikonjait és faviconjait, értse meg, miért van szükség a modern webhelyeknek gyakran mindkettőre, és tanulja meg, hogyan csomagolja őket egyetlen forrásképből.

Apple Touch Icon vs Favicon: Mit kell tartalmaznia egy modern webhelynek?

Az Apple touch ikon és a favicon összefügg egymással, de nem ugyanaz a fájl, és ugyanazt a célt szolgálják. A favicon általában a böngésző lapjaihoz, könyvjelzőihez és az ismerős böngészőkrómhoz kapcsolódik. Az Apple érintőképernyős ikon az Apple-eszközök parancsikonfelületeire szolgál, ahol a webhely inkább alkalmazásikonként jelenik meg.

A zűrzavar érthető, mert sok projektben mindkét fájl ugyanarról a márkajelzésről indul. A forrásgrafika lehet egy négyzet alakú kép, de a csomagnak különböző felületeket kell kiszolgálnia. Éppen ezért egy modern favicon munkafolyamat nem állhat meg egyetlen favicon.ico fájlnál.

Mit csinál egy favicon

A favicon az a kis vizuális jelölő, amelyet a felhasználók a böngésző lapjain, könyvjelzőiben, előzményeiben és a kapcsolódó böngészőfelületeken látnak. Segít a felhasználóknak a webhely gyors felismerésében, ha több lap van nyitva.

A klasszikus fájl a favicon.ico, bár sok modern beállítás PNG ikonfájlokat is tartalmaz. A webhelyek rutinindításainál továbbra is praktikus a favicon.ico csomagban tartása, mert lefedi az ismert elvárásokat és a kompatibilitási utakat.

Mit csinál egy Apple érintőképernyő

Az Apple érintőképernyős ikonja akkor használatos, ha egy webhelyet az Apple eszközfelületére mentenek, például a kezdőképernyő parancsikonjaira. Ez nem csak egy apró füljelző. Ikonként kell működnie egy alkalmazásszerűbb környezetben.

Ez megváltoztatja a tervezési nyomást. A böngésző lap ikonja rendkívül kicsi is lehet. Az érintőikon nagyobbnak tűnhet, de tisztának, középre igazítottnak és önálló jelként is felismerhetőnek kell lennie. Ugyanaz a forrásgrafika mindkettőnél működhet, ha egyszerű és négyzet alakú, de a kimeneteket továbbra is helyesen kell csomagolni.

Miért van szükség a modern webhelyeknek gyakran mindkettőre?

Ha webhelyén csak egy kedvenc ikon található, akkor az asztali böngésző élménye jól néz ki, míg a mobil parancsikonok felületei hiányosnak vagy következetlennek tűnhetnek. Ha a csomag csak az érintési ikonokra összpontosít, előfordulhat, hogy a hagyományos böngészőlap elérési útja hiányzik.

SaaS-indítás, dokumentációs webhely, termékmikrowebhely vagy kis webalkalmazás esetén a gyakorlati válasz általában mindkettő. Olyan csomagot szeretne, amely lefedi a böngésző lapjait és az alkalmazásszerű parancsikonokat anélkül, hogy meg kellene kérnie valakit, hogy manuálisan exportálja az összes ikonváltozatot.

Ide illik a Favicon / App Icon Generator. Egy négyzet alakú forrásképből favicon.ico, PNG ikonokat, Apple érintőképernyős ikonokat, Android-kompatibilis ikonokat és indító site.webmanifest elemet hoz létre.

A forrásgrafika a megosztott kényszer

A legnagyobb minőségi tényező a forráskép. Ugyanannak a jelnek több felületen és méretben is túl kell élnie. A részletes illusztrációk, a kis szövegek és az éltől szélig terjedő grafikák általában gyengén teljesítenek. Egy egyszerű forma elegendő párnázással nagyobb valószínűséggel marad felismerhető.

Az átalakítás körkörös opciót tartalmaz a böngésző és az Android kimenetekhez, miközben az Apple érintőképernyős ikonjai négyzet alakúak maradnak. Ez akkor számít, ha a márkajelzés jobban működik egy kör alakú keretben, de továbbra is szeretné, hogy az Apple felületei megőrizzék a várt négyzet alakú megjelenésüket.

A gyakorlati döntés

Használjon favicont, ha böngésző felismerésre van szüksége. Használjon Apple érintőképernyős ikont, ha fontos az Apple parancsikon felületei. Használjon teljes csomagot, ha azt szeretné, hogy a webhely mindkettőn késznek tűnjön.

A fájlok részletesebb ellenőrzőlistájáért olvassa el a What Files Do You Need in a Favicon Package? című részt. Ha készen áll az eszközök exportálására, nyissa meg a Favicon / App Icon Generator alkalmazást, töltsön fel egy négyzet alakú forrásképet, tekintse át a csomagot, és töltse le a ZIP-fájlt.

Ez is érdekelhet