Zdarma převodník

Favicon Generátor

Generujte soubory favicon v různých velikostech (16x16 až 512x512) z libovolného obrázku. Zdarma, okamžitě a běží výhradně ve vašem prohlížeči.

Sem přetáhněte obrázek

Podporuje PNG, JPG, SVG, WebP. Maximálně 10 MB.

Nebo

O tomto nástroji

Favicon je malá ikona, která se zobrazuje na kartách prohlížeče, záložkách a seznamech historie. Původní favicon — soubor 16×16 ICO na /favicon.ico — se rozšířil do komplexní sady ikon v různých velikostech pro různé platformy: 16×16 a 32×32 pro karty prohlížeče, 180×180 pro domovské obrazovky iOS, 192×192 a 512×512 pro dlaždice Windows a různé velikosti pro dlaždice Windows. Produkce těchto všech z jednoho zdrojového obrázku je to, co dělá moderní generátor favicon.

Tento nástroj pořídí jeden zdrojový obrázek s vysokým rozlišením (obvykle čtvercové logo) a vygeneruje celou sadu položek favicon plus značky odkazů HTML potřebné k jejich odkazování. Výstup zahrnuje ICO, několik souborů PNG a manifest.json pro progresivní metadata webových aplikací. Přetáhněte výsledné soubory do kořenového adresáře vašeho webu a odkazujte na ně prostřednictvím vygenerovaného HTML.

Veškeré zpracování probíhá ve vašem prohlížeči. Žádné nahrávání, žádné volání API, žádný limit sazby. Výstup funguje na každém moderním prohlížeči a operačním systému, který zobrazuje oblíbené ikony.

Proč generovat favicon

Stránky bez favicon vypadají nedokončené. Karty prohlížeče zobrazují obecnou ikonu; záložky nemají žádný vizuální identifikátor; web působí méně profesionálně. Přidání správné sady favicon je krok leštění s nízkým úsilím a vysokým dopadem, který signalizuje pozornost věnovanou detailům.

Požadavky na moderní favicon přesáhly /favicon.ico. Ikony domovské obrazovky iOS, ikony Android Chrome, ikony dlaždic Windows a varianty tmavého režimu používají různé soubory. Generování všech z jednoho zdroje zajišťuje konzistentní branding bez ruční správy každého souboru.

Jak používat

Nahrajte zdrojový obrázek a získejte celou sadu favicon.

  1. Nahrajte zdrojový obrázek: Použijte čtvercový obrázek o velikosti alespoň 512 × 512 pixelů. Preferován je PNG (podpora transparentnosti); SVG je také akceptováno. Zdroje s vyšším rozlišením vytvářejí ostřejší menší ikony.
  2. Nakonfigurujte možnosti platformy: Podle potřeby povolte výstupy pro iOS, Android, Windows a PWA. Výchozí nastavení vytváří standardní sadu, kterou většina webů potřebuje.
  3. Přizpůsobte si barvy a motiv: Vyberte barvy motivu pro dlaždice Windows a úvodní obrazovky PWA. Slaďte identitu vaší značky.
  4. Stáhnout a nasadit: Uložte vygenerovaný zip. Umístěte soubory do kořenového adresáře svého webu a do <head> přidejte vygenerované značky odkazů HTML. HTML odkazuje na každou ikonu ve správné velikosti.

Běžné případy použití

Technické detaily

Kompletní moderní sada favicon: favicon.ico (16+32+48 s více rozlišeními), 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 pro PWA, browserconfig.xml pro Windows.

Každý PNG je generován převzorkováním na základě plátna ze zdroje. ICO je konstruováno v JavaScriptu kombinací 16/32/48 verzí do formátu ICO s více rozlišením pomocí zápisů DataView.

Značky odkazů HTML odkazují na každý soubor s příslušnými atributy rel a size. Generátor je vytvoří jako úryvek připravený pro kopírování a vkládání pro <head> vašeho webu.

Nejlepší postupy

Často kladené dotazy

Jaký formát obrázku mám nahrát?
Nejlépe funguje PNG s průhledným pozadím. Použijte čtvercový obrázek o velikosti alespoň 512 x 512 pixelů, aby se nástroj mohl zmenšit bez ztráty kvality. SVG také funguje dobře, protože se škáluje na jakoukoli velikost.
Jaké velikosti to generuje?
16x16 (karta prohlížeče), 32x32 (karta prohlížeče @2x), 48x48 (hlavní panel Windows), 180x180 (ikona Apple Touch), 192x192 (domovská obrazovka Androidu), 512x512 (úvodní obrazovka PWA). Soubor ICO obsahuje velikosti 16, 32 a 48 pixelů.
Kam vložím soubory favicon?
Umístěte favicon.ico do kořenového adresáře svého webu. Ostatní velikosti PNG jsou ve vaší veřejné složce nebo na jakékoli přístupné cestě. Přidejte značky odkazů HTML do sekce <head> směřující na každé umístění souboru.
Proč se moje favicon neaktualizuje v prohlížeči?
Prohlížeče agresivně ukládají oblíbené ikony. Vymažte mezipaměť prohlížeče, zkuste otevřít v anonymním okně nebo přidejte řetězec dotazu na verzi (?v=2) do adresy URL favicon, abyste vynutili obnovení.
Proč se moje favicon neaktualizuje?
Prohlížeče ukládají oblíbené ikony agresivně, někdy i celé dny. Vynutit aktualizaci vymazáním mezipaměti, přímým otevřením adresy URL ikony nebo připojením parametru dotazu na verzi ke značce odkazu.
Je můj obrázek nahrán na server?
Ne. Generování probíhá ve vašem prohlížeči.
Mám použít SVG nebo PNG?
SVG pro zdroj (nezávislé na rozlišení). Generátor vydává PNG v určitých velikostech; moderní prohlížeče také podporují favicony SVG přes odkaz rel=ikona typ=image/svg+xml.
Co je site.webmanifest?
Manifest JSON pro progresivní webové aplikace popisující ikony, barvy a další metadata. Vyžadováno pro instalovatelné webové aplikace; neškodné zahrnout i na standardní stránky.