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.

Melyik fájl hová való?
| Felhasználás | Fájl | Méret / ellenőrzés |
|---|---|---|
| Böngészőfül | SVG / ICO / PNG | 16, 32 px |
| Google Search | PNG / ICO | >48×48 px; PNG96 |
| Apple-kezdőképernyő | apple-touch-icon.png | 180×180 px |
| Telepített PWA | PNG + site.webmanifest | 192×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
- Felismerhető jelből induljon ki; hagyja el a szlogent és az apró részleteket.
- Ellenőrizze a formát 16 és 32 px méretben, világos és sötét háttéren.
- Vektorból exportáljon. Válasszon egy faviconmappát a LogoSaga-csomagból, és őrizze meg a manifest útvonalait.
- Az alábbi linkeket csak a szerveren létező fájlokra adja meg. A PNG96 külön export a kereséshez.

<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ő faviconnalGyakori 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
- Define a favicon to show in search results — Google Search Central
- Web app manifest: icons — MDN Web Docs
- Configuring Web Applications — Apple Developer