Favicon a logóból: méretek böngészőhöz és Google-höz

A favicon a webhely kis jelképe. A logó jelét használja, ne a teljes nevet kicsinyítse le. A böngészőfülek, a Google és a telepített webalkalmazások követelményei eltérnek; a tényleges felhasználást tesztelje.

Ezen az oldalon
  1. Melyik fájl hová való?
  2. Az ikon elkészítése és közzététele
  3. Miért nem jelenik meg?
Ugyanaz a jel favicon méretekben megjelenítve, köztük egy böngészőfül méretű változatban.
A favicon a logó jele, olyan mértékig egyszerűsítve, hogy apró méretben is tiszta maradjon.

Melyik fájl hová való?

FelhasználásFájlMéret / ellenőrzés
BöngészőfülSVG / ICO / PNG16, 32 px
Google SearchPNG / ICO>48×48 px; PNG96
Apple-kezdőképernyőapple-touch-icon.png180×180 px
Telepített PWAPNG + site.webmanifest192×192, 512×512 px

A Google számára támogatott formátumot, például PNG-t vagy ICO-t válasszon: az SVG nincs a jelenlegi listán. A négyzetes ikon legalább 8×8 px legyen; a Google 48×48-nál nagyobbat ajánl, így a 96×96 hasznos, nem elavult. A kezdőlapon hivatkozzon rá, az URL maradjon állandó, a Googlebot érje el az oldalt, a Googlebot-Image pedig a képet. A szabályok teljesítése nem garantálja a megjelenést.

Az ikon elkészítése és közzététele

  1. Felismerhető jelből induljon ki; hagyja el a szlogent és az apró részleteket.
  2. Ellenőrizze a formát 16 és 32 px méretben, világos és sötét háttéren.
  3. Vektorból exportáljon. Válasszon egy faviconmappát a LogoSaga-csomagból, és őrizze meg a manifest útvonalait.
  4. Az alábbi linkeket csak a szerveren létező fájlokra adja meg. A PNG96 külön export a kereséshez.
A LogoSaga szerkesztő exportlépése, amely a favicon.svg-t a logófájlok között mutatja.
A vektoros mesterfájlból való exportálás olyan favicont ad, amely pontosan megegyezik a logóval.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />

Az SVG használhat prefers-color-scheme szabályt, de tesztelje a támogatott böngészőket és verziókat. A mindkét háttéren olvasható jel megbízható tartalék. Az Apple-touch- és manifestikonok külön fájlok, nem a böngésző SVG-jének automatikus változatai.

Miért nem jelenik meg?

Nyissa meg közvetlenül az URL-t: képet kell adnia, nem hibát vagy bejelentkezést. Ellenőrizze a kezdőlap hivatkozásait és a robotok hozzáférését. A böngészőben frissítsen vagy törölje a helyi ikongyorsítótárat. A Google számára tartsa meg az URL-t, és kérje a kezdőlap indexelését a Search Console-ban; ez napokig vagy hetekig tarthat. A folyamatos átnevezés nem javítja a keresést.

Kapcsolódó gyakorlati útmutatók: Logóteszt: 10 ellenőrzés a megjelenés előtt · Google Cégprofil-logó: méret, feltöltés és hibakeresés

Készítsen logót hozzáillő faviconnal

Gyakori kérdések

Milyen méretű legyen egy favicon?

A Google számára támogatott formátumot, például PNG-t vagy ICO-t válasszon: az SVG nincs a jelenlegi listán. A négyzetes ikon legalább 8×8 px legyen; a Google 48×48-nál nagyobbat ajánl, így a 96×96 hasznos, nem elavult. A kezdőlapon hivatkozzon rá, az URL maradjon állandó, a Googlebot érje el az oldalt, a Googlebot-Image pedig a képet. A szabályok teljesítése nem garantálja a megjelenést.

Milyen formátumú legyen egy favicon — SVG, PNG vagy ICO?

A favicon a webhely kis jelképe. A logó jelét használja, ne a teljes nevet kicsinyítse le. A böngészőfülek, a Google és a telepített webalkalmazások követelményei eltérnek; a tényleges felhasználást tesztelje.

Változhat egy favicon sötét módban?

Az SVG használhat prefers-color-scheme szabályt, de tesztelje a támogatott böngészőket és verziókat. A mindkét háttéren olvasható jel megbízható tartalék. Az Apple-touch- és manifestikonok külön fájlok, nem a böngésző SVG-jének automatikus változatai.

Miért nem jelenik meg vagy nem frissül a faviconom?

Nyissa meg közvetlenül az URL-t: képet kell adnia, nem hibát vagy bejelentkezést. Ellenőrizze a kezdőlap hivatkozásait és a robotok hozzáférését. A böngészőben frissítsen vagy törölje a helyi ikongyorsítótárat. A Google számára tartsa meg az URL-t, és kérje a kezdőlap indexelését a Search Console-ban; ez napokig vagy hetekig tarthat. A folyamatos átnevezés nem javítja a keresést.

Forrás