Bezplatný prevodník

Favicon Generátor

Generujte súbory favicon vo viacerých veľkostiach (16x16 až 512x512) z ľubovoľného obrázka. Zadarmo, okamžite a úplne beží vo vašom prehliadači.

Drag & Drop obrázok sem

Podporuje PNG, JPG, SVG, WebP. Maximálne 10 MB.

Alebo

O tomto nástroji

Favicon je malá ikona, ktorá sa zobrazuje na kartách prehliadača, záložkách a zoznamoch histórie. Pôvodná favicon — súbor ICO 16×16 na stránke /favicon.ico — sa rozrástla na komplexnú sadu ikon v rôznych veľkostiach pre rôzne platformy: 16×16 a 32×32 pre karty prehliadača, 180×180 pre domovské obrazovky iOS, 192×192 a 512×512 pre dlaždice Windows a rôzne veľkosti pre dlaždice systému Windows. Vytváranie týchto všetkých obrázkov z jedného zdroja je to, čo robí moderný generátor favicon.

Tento nástroj vytvorí jeden zdrojový obrázok vo vysokom rozlíšení (zvyčajne štvorcové logo) a vygeneruje celú množinu prvkov favicon plus značky odkazov HTML, ktoré sú potrebné na to, aby na ne odkazovali. Výstup zahŕňa ICO, viacero súborov PNG a súbor manifest.json pre progresívne metadáta webovej aplikácie. Presuňte výsledné súbory do koreňového adresára vašej lokality a odkazujte na ne prostredníctvom vygenerovaného kódu HTML.

Všetko spracovanie prebieha vo vašom prehliadači. Žiadne nahrávanie, žiadne volanie API, žiadne obmedzenie sadzby. Výstup funguje na každom modernom prehliadači a operačnom systéme, ktorý zobrazuje ikony favicon.

Prečo generovať Favicon

Stránky bez favicon vyzerajú nedokončené. Karty prehliadača zobrazujú všeobecnú ikonu; záložky nemajú vizuálny identifikátor; stránka pôsobí menej profesionálne. Pridanie správnej sady favicon je krok leštenia s malým úsilím a vysokým dopadom, ktorý signalizuje pozornosť venovanú detailom.

Požiadavky moderných favicon presiahli /favicon.ico. Ikony na domovskej obrazovke iOS, ikony Android Chrome, ikony dlaždíc systému Windows a varianty tmavého režimu používajú rôzne súbory. Generovanie ich všetkých z jedného zdroja zaisťuje konzistentný branding bez ručnej správy každého súboru.

Ako používať

Nahrajte zdrojový obrázok a získajte celú sadu ikon favicon.

  1. Nahrajte zdrojový obrázok: Použite štvorcový obrázok s rozmermi aspoň 512 × 512 pixelov. Uprednostňuje sa PNG (podpora transparentnosti); SVG je tiež akceptované. Zdroje s vyšším rozlíšením vytvárajú ostrejšie menšie ikony.
  2. Nakonfigurujte možnosti platformy: Podľa potreby povoľte výstupy pre iOS, Android, Windows a PWA. Predvolené nastavenia vytvárajú štandardnú sadu, ktorú väčšina stránok potrebuje.
  3. Prispôsobte farby a motív: Vyberte farby motívu pre dlaždice Windows a úvodné obrazovky PWA. Zlaďte identitu svojej značky.
  4. Stiahnite si a nasaďte: Uložte vygenerovaný zips. Umiestnite súbory do koreňového adresára svojej lokality a pridajte vygenerované značky odkazov HTML do svojej <head>. HTML odkazuje na každú ikonu v správnej veľkosti.

Bežné prípady použitia

Technické detaily

Kompletná súprava moderných favicon: favicon.ico (16+32+48 s viacerými rozlíšeniami), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-51chrome-512x mstile-150x150.png. Plus site.webmanifest pre PWA, browserconfig.xml pre Windows.

Každý PNG je generovaný prevzorkovaním na základe plátna zo zdroja. ICO je konštruované v JavaScripte kombináciou 16/32/48 verzií do formátu ICO s viacerými rozlíšením pomocou zápisov DataView.

Značky odkazov HTML odkazujú na každý súbor s príslušnými atribútmi rel a size. Generátor ich vytvorí ako útržok pripravený na kopírovanie a prilepenie pre <head> vašej lokality.

osvedčené postupy

Často kladené otázky

Aký formát obrázka mám nahrať?
Najlepšie funguje PNG s priehľadným pozadím. Použite štvorcový obrázok s rozmermi aspoň 512 x 512 pixelov, aby sa nástroj mohol zmenšiť bez straty kvality. SVG tiež funguje dobre, pretože sa škáluje na akúkoľvek veľkosť.
Aké veľkosti to generuje?
16 x 16 (karta prehliadača), 32 x 32 (karta prehliadača @2x), 48 x 48 (panel úloh systému Windows), 180 x 180 (ikona Apple Touch), 192 x 192 (domovská obrazovka systému Android), 512 x 512 (úvodná obrazovka PWA). Súbor ICO obsahuje veľkosti 16, 32 a 48 pixelov.
Kam umiestnim súbory favicon?
Umiestnite favicon.ico do koreňového adresára svojej webovej stránky. Ostatné veľkosti PNG sa uložia do vášho verejného priečinka alebo na akúkoľvek prístupnú cestu. Pridajte značky odkazov HTML do sekcie <head> smerujúce na každé umiestnenie súboru.
Prečo sa moja favicon neaktualizuje v prehliadači?
Prehliadače agresívne ukladajú ikony favicon. Vymažte vyrovnávaciu pamäť prehliadača, skúste ho otvoriť v okne inkognito alebo pridajte reťazec dopytu verzie (?v=2) do adresy URL favicon, aby ste vynútili obnovenie.
Prečo sa moja favicon neaktualizuje?
Prehliadače ukladajú obľúbené ikony agresívne, niekedy aj niekoľko dní. Vynútiť obnovenie vymazaním vyrovnávacej pamäte, priamym otvorením adresy URL ikony alebo pripojením parametra dopytu verzie k značke odkazu.
Je môj obrázok nahraný na server?
Nie. Generovanie prebieha vo vašom prehliadači.
Mám použiť SVG alebo PNG?
SVG pre zdroj (nezávislé na rozlíšení). Generátor vydáva PNG v špecifických veľkostiach; moderné prehliadače tiež podporujú favicony SVG cez odkaz rel=ikona typ=obrázok/svg+xml.
Čo je site.webmanifest?
Manifest JSON pre progresívne webové aplikácie popisujúce ikony, farby a ďalšie metadáta. Vyžaduje sa pre inštalovateľné webové aplikácie; neškodné zahrnúť aj na štandardné stránky.