Favicon-generátor

A weboldalad összes ikonja a logódból, feltöltésre készen.

Más eszközök: JPEG átalakítása JPG-be JPG tömörítése PNG tömörítése WebP tömörítése Kép átméretezése Kép vágása Képek összefűzése

Válassz PNG, JPG, WebP vagy SVG képet

Egyszerre egy fájl, legfeljebb 20 MB.

Igazítás a négyzethez

Beillesztés A teljes kép Kitöltés Levágja a széleket

Az ikonok négyzet alakúak. Ha a képed nem az, válaszd ki, hogy teljes egészében látsszon (átlátszó szegéllyel), vagy töltse ki a négyzetet.

Háttérszín

Az Apple-ikonhoz, amely nem lehet átlátszó, és Androidon a téma színeként.

A fájljaidat az átalakítás után, de legkésőbb a feltöltéstől számított egy órán belül automatikusan töröljük. Hogyan kezeljük a fájljaidat

Készítsd el a weboldalad teljes faviconjét a logódból: a böngészőfül ikonját, az iPhone és az Android kezdőképernyő-ikonjait, a manifestet és az ezeket összekötő HTML-kódot. Tölts fel egy PNG, JPG, WebP vagy SVG képet, és töltsd le az egészet egy ZIP-fájlban, regisztráció és vízjel nélkül.

Így hozz létre faviconet

Válaszd ki a logódat vagy ikonodat PNG, JPG, WebP vagy SVG formátumban, lehetőleg négyzet alakút és legalább 512 pixeleset.
Válaszd ki, hogy a kép teljes egészében látsszon vagy töltse ki a négyzetet, valamint az Apple-ikon háttérszínét.
Kattints a „Favicon létrehozása” gombra, és töltsd le a ZIP-fájlt.
Tedd a fájlokat a weboldalad gyökérkönyvtárába, a head.html kódját pedig illeszd be az oldalaid head címkéjébe.

Mit tartalmaz a csomag

Fájl	Mire való
`favicon.ico`	A klasszikus fülikon 16, 32 és 48 pixeles méretben, egyetlen fájlban. A böngészők akkor is keresik, ha nem hivatkozol rá.
`favicon-16x16.png` és `favicon-32x32.png`	A fül- és könyvjelzőikonok a mai böngészőkben.
`apple-touch-icon.png`	A 180 pixeles ikon, amelyet az iPhone és az iPad használ, ha valaki a kezdőképernyőre teszi a weboldaladat.
`android-chrome-192x192.png` és `android-chrome-512x512.png`	Az Android és a telepíthető webalkalmazások ikonjai.
`site.webmanifest`	A manifest, amely megadja az Android-ikonokat és a weboldalad színét.
`head.html`	Az ikonokat az oldalaidhoz kapcsoló címkék.

Így telepítsd a weboldaladra

Csomagold ki a ZIP-fájlt, és a head.html kivételével minden fájlt tegyél a weboldalad gyökérkönyvtárába (ahol a főoldal van).
Másold be ezeket a címkéket, amelyek a head.html-ben is megtalálhatók, az oldalaid head címkéjébe:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Ha szeretnéd, írd be a weboldalad nevét a site.webmanifest fájl name és short_name mezőjébe.

A böngészők gyorsítótárban tárolják a faviconet: ha nem látod azonnal az újat, kényszerítsd az oldal újratöltését, vagy várj egy kicsit.

Beillesztés vagy kitöltés

Minden ikon négyzet alakú. Ha a képed nem az, beillesztheted, hogy átlátszó szegéllyel teljes egészében látsszon, vagy kitöltheted vele a négyzetet, levágva azt, ami oldalt kilóg. Szöveges, fekvő logó esetén gyakran jobb csak a logó jelét használni, négyzetre vágva.

Az Apple-ikon nem lehet átlátszó: az iOS feketével töltené ki a hátterét. Ezért a választott háttérszínnel készítjük el, amely Androidon a weboldalad színeként is szolgál. A többi ikon megtartja az átlátszóságát.

Tippek a jó eredményhez

Nagy képből indulj ki, legalább 512 × 512 pixelesből, vagy még jobb, ha SVG-ből: ebből számítjuk ki a kis ikonokat.
Egyszerűsíts: 16 pixelen a szövegek és az apró részletek olvashatatlanok. Egy jel vagy egy kezdőbetű kontrasztos színekkel sokkal jobban működik.

Ha csak a .ico fájlra van szükséged, átalakíthatod a PNG-t ICO-ba.

Korlátok

Egyszerre egy kép, legfeljebb 20 MB-os és 100 megapixeles.
A weboldaladhoz nem nyúlunk: a fájlokat neked kell feltöltened és a címkéket hozzáadnod, vagy megkérheted erre azt, aki az oldaladat kezeli.

Gyakori kérdések

Mekkora legyen a kép a favicon elkészítéséhez?

Minél nagyobb, annál jobb: legalább 512 × 512 pixel, vagy egy SVG. Az összes ikont, 512-től 16 pixelig, ebből számítjuk ki.

Hová tegyem a favicon fájljait?

A weboldalad gyökérkönyvtárába, ugyanabba a mappába, ahol a főoldal van. Ezután illeszd be a head.html címkéit az oldalaid head címkéjébe.

Miért nem látom az új faviconet a böngészőmben?

Mert a böngészők gyorsítótárban tárolják a faviconet. Kényszerítsd az oldal újratöltését, nyisd meg inkognitóablakban, vagy várj egy kicsit.

Miért színes az Apple-ikon háttere?

Mert az iOS nem fogadja el az átlátszóságot a kezdőképernyő-ikonoknál, és feketével töltené ki a hátteret. A választott háttérszínnel készítjük el, hogy jól nézzen ki.

Elkészíthetem így egy WordPress-oldal faviconjét?

A WordPressnek saját lehetősége van, a „Honlap ikon” (a Megjelenés › Testreszabás › Honlap azonosító menüpontban, vagy verziótól és sablontól függően az általános beállításokban): feltöltesz egy négyzetes képet, és a WordPress elkészíti a méreteket. Ennek az eszköznek a csomagja olyan oldalakhoz való, ahová fájlokat tölthetsz fel, és a kódot szerkesztheted.