Utilia
Kategóriák ▾
Nyelv: hu ▾

Favicon generátor

Készíts favicon.ico-t, PNG-ikonokat, apple-touch-icont és site.webmanifestet egy képből vagy emojiból, kész HTML-címkékkel. ZIP, feltöltés nélkül.

Forrás

Illesztés
site.webmanifest

Hogyan készíts faviconot?

  1. A Forrás alatt válaszd a Kép vagy a Szöveg vagy emoji lehetőséget. - Kép: húzz be egy PNG-t, JPG-t, WebP-t vagy SVG-t. Legalább 512 × 512 px-es négyzetes logó működik a legjobban. A Teljes kép az ikonon belülre illeszti, a Kitöltés és vágás pedig kitölti a négyzetet. - Szöveg vagy emoji: írj be egy betűt, monogramot vagy egy emojit, majd válaszd ki a Betűtípust, a Félkövér stílust és a Szövegszínt.
  2. Állítsd be a Háttérszínt, vagy jelöld be az Átlátszó háttér négyzetet. Válassz Alakot (Négyzet, Lekerekített vagy Kör) és Belső margó (%) értéket, hogy hely maradjon a tartalom körül.
  3. Ha szeretnéd, nyisd meg a site.webmanifest részt, és add meg az Alkalmazás neve (web manifest), a Rövid név, a Témaszín és az Az ikonok mappájának URL-je értékét (hagyd /-en, ha a fájlok az oldalad gyökerébe kerülnek).
  4. Kattints a Faviconok generálása gombra. Az ikonok valós méretben jelennek meg egy minta böngészőfül mellett. Ezután minden módosítás azonnal frissíti őket.
  5. Kattints a ZIP letöltése gombra, töltsd fel a fájlokat az oldaladra, majd a Címkék másolása gombbal másold ki a címkéket, és illeszd be az oldalaid <head> részébe.

Mi van a ZIP-ben?

Fájl Méret Ki használja
favicon.ico 16, 32 és 48 px Böngészőfülek, könyvjelzők, régi böngészők, Windows
favicon-16x16.png 16 × 16 Böngészőfülek
favicon-32x32.png 32 × 32 Fülek nagy pixelsűrűségű képernyőn, tálcaparancsikonok
apple-touch-icon.png 180 × 180 iPhone és iPad kezdőképernyő
android-chrome-192x192.png 192 × 192 Android kezdőképernyő (web manifest)
android-chrome-512x512.png 512 × 512 Telepítési indítóképernyők (web manifest)
site.webmanifest — Egy telepíthető oldal neve, színei és ikonjai
favicon-tags.html — A HTML-címkék, tájékoztatásul

Az ICO-fájl három PNG-képet tartalmaz, ezt a formátumot a Windows (a Vista óta) és minden mai böngésző beolvassa. Az apple-touch-icon mindig tömör háttérrel kerül mentésre, mert az iOS az átlátszó pixeleket feketének mutatja; átlátszó háttér esetén fehéret használ az eszköz.

A HTML-címkék

A generált címkék így néznek ki (a te mappa-URL-eddel):

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

A böngészők a domain gyökerében automatikusan lekérik a /favicon.ico fájlt is, ezért az ott tartása a címkék nélküli oldalakon is segít.

Tervezési tippek

  • Legyen egyszerű. 16 × 16 px-en a részletek eltűnnek. Egyetlen betű, egy merész szimbólum vagy a logód legegyszerűbb változata olvasható a legjobban.
  • Ellenőrizd az előnézetet valós méretben. A mintafülön látható 16 px-es ikont látják valójában a látogatók.
  • Gondolj a sötét módra. Egy sötét logó átlátszó háttéren eltűnhet a sötét böngészőtémákban; segít a színes háttér vagy egy kis belső margó.
  • Az emojik rendszerenként másképp néznek ki, mert minden platform a saját stílusában rajzolja őket. A PNG-fájlok az eszközöd megjelenését őrzik meg.

Gyakori kérdések

Milyen méretekre van szüksége egy faviconnak?

A gyakorlatban: egy favicon.ico 16, 32 és 48 px-szel, egy 180 px-es apple-touch-icon, valamint 192 és 512 px-es PNG-k a web manifesthez. Ez az eszköz mindet létrehozza egyetlen forrásból.

Használhatok SVG-logót?

Igen. Az SVG-fájlokat nagy felbontásban rajzolja ki az eszköz, mielőtt az ikonokat elkészítené. Az SVG egyszerű képként jelenik meg, így a szkriptjei soha nem futnak le.

Hogyan készíthetek emoji-faviconot?

Válaszd a Szöveg vagy emoji lehetőséget, írd be vagy illeszd be az emojit, válassz hátteret vagy hagyd átlátszónak, és generálj. Az eredmény valódi PNG és ICO, így minden böngészőben működik.

Miért nem jelenik meg az új faviconom?

A böngészők agresszíven gyorsítótárazzák a faviconokat. Töltsd újra az oldalt a gyorsítótár törlésével, nyisd meg az oldalt privát ablakban, vagy adj verziót az URL-hez, például /favicon.ico?v=2.

Feltöltődik a képem?

Nem. Az ikonokat, a ZIP-et és a manifestet a böngésződben hozza létre az eszköz; semmi nem hagyja el az eszközödet.

Kapcsolódó eszközök