Vygenerovat sadu favicon _

Jak funguje generování favicon v prohlížeči

Celý generační pipeline běží uvnitř záložky prohlížeče pomocí Canvas API a kompresní knihovny fflate. Žádné serverové zpracování, žádné nahrávání, žádné služby třetích stran.

1. Načtěte zdrojový obrázek nebo vykreslete text či emodži na offscreen canvas ve vysokém rozlišení. Pokud jste vybrali obrázek, je dekódován nativně prohlížečem. Pokud jste zvolili textový režim, stránka nakreslí vaše slovo na canvas se zvoleným písmem, barvou popředí a pozadí.
2. Pro každou cílovou velikost (16, 32, 48, 180, 192, 512 pixelů) stránka vytvoří nový offscreen canvas v přesném rozměru a vykreslí na něj zdrojový obsah pomocí Canvas API. Vestavěné změna velikosti prohlížeče zpracuje downscale s bilineárním nebo bikubickým filtrováním automaticky a vytvoří ostrou favicon v každé velikosti.
3. Každý canvas je exportován do PNG Blob pomocí canvas.toBlob(). Panel náhledu zobrazuje všech šest velikostí, abyste mohli výsledek zkontrolovat před stažením. HTML blok připravený k vložení a úryvek manifestu webové aplikace (manifest.json) jsou sestaveny z názvů souborů, takže je můžete rovnou vložit do head tagu vaší stránky.
4. Po kliknutí na Stáhnout ZIP stránka načte všechny PNG Bloby do paměti, použije fflate k jejich zabalení spolu se souborem manifest.json do jednoho ZIP archivu a jedním kliknutím spustí stažení. Celý balíček je sestaven ve vašem prohlížeči — v žádné fázi se nic nenahrává.

Proč generovat favicony v prohlížeči?

• Kompletní sada favicon eliminuje 404 prohlížeče při prvním navštívení a zajišťuje profesionální vzhled stránky v záložkách, panelech prohlížeče a PWA instalačních obrazovkách. Chybějící velikosti znamenají, že prohlížeč buď nenačte nic, nebo spadne na rozmazaný nearest-neighbour škál.
• Přibalené HTML a manifest snippet šetří ruční psaní šesti tagů a JSON manifest bloku. Vložte je do head stránky, upravte cesty pokud je potřeba a máte hotovo za vteřiny místo minut.
• Klientské generování je jedinou možností na uzamčených firemních zařízeních bez editoru fotografií. Protože se nic nenahrává, nehrozí únik dat a není potřeba schvalování pro citlivé nebo značkové obrázky.
• Textový režim a režim emodži umožňuje vygenerovat favicon bez jakéhokoli obrázku. Napište iniciálu značky, písmeno nebo emodži, vyberte písmo a barvu a získáte celou sadu — ideální pro osobní projekty, prototypy nebo stránky, které právě teď potřebují placeholder favicon.

Běžná použití generování favicon

Každá stránka, kterou lidé ukládají do záložek nebo instalují, potřebuje favicon. Zde jsou tři scénáře, kde prohlížečový generátor šetří čas.

• Nastavení nové landing page nebo microsite. Vygenerujte celou sadu favicon z loga značky za méně než minutu, zkopírujte tagy do head stránky a nasaďte. Není potřeba žádný designový nástroj.
• Vytváření PWA ikon pro progresivní webovou aplikaci. PNG ikony 192×192 a 512×512 jsou vyžadovány pro manifest.json. Vygenerujte je spolu se zbytkem sady favicon v jednom kroku místo ruční změny velikosti loga.
• Vytváření placeholderů pro prototypy a staging weby. Napište jedno písmeno nebo emodži, vyberte barvu pozadí a získejte realistické favicony bez čekání na finální značkové assety od designového týmu.

Příklad: generování sady favicon z firemního loga

Máte 500×500 PNG logo a potřebujete celou sadu favicon pro nový marketingový web.

Otevřete tuto stránku a přetáhněte logo PNG do nahrávací zóny. Obrázek se načte a zobrazí se náhled vedle mřížky velikostí. Klikněte na Generovat favicony. Stránka nakreslí logo na šest offscreen canvasů o velikostech 16, 32, 48, 180, 192 a 512 pixelů a zobrazí každý výsledek. Pod panelem náhledu se objeví HTML blok připravený k vložení s položkami rel="icon" pro velikosti 16/32/48, odkazem apple-touch-icon pro velikost 180 a odkazem manifest pro PWA ikony. Úryvek manifestu níže uvádí ikony 192 a 512. Klikněte na Stáhnout ZIP — stránka zabalí všech šest PNG plus manifest.json do jednoho ZIP archivu pomocí fflate. Celý proces trvá dvě vteřiny a nespotřebovává žádnou šířku pásma kromě počátečního načtení stránky.

Které velikosti favicon nástroj generuje?

Šest velikostí: 16×16, 32×32 a 48×48 pro standardní favicony prohlížeče, 180×180 pro Apple Touch Icon a 192×192 a 512×512 pro PWA manifest ikony. Každá velikost je vydána jako PNG. Moderní prohlížeče přijímají PNG favicony přes .

Mohu vygenerovat favicon z textu nebo emodži?

Ano. Přepněte do režimu text nebo emodži, napište slovo nebo vložte emodži, vyberte písmo, barvu popředí a pozadí a klikněte na Generovat. Text je vykreslen na offscreen canvas ve vysokém rozlišení a poté změněn na každou cílovou velikost favicon.

Nahrává se obrázek na server?

Ne. Obrázek nikdy neopouští vaše zařízení. Stránka používá File API prohlížeče k načtení obrázku do paměti a Canvas API ke změně velikosti a exportu každé favicon. Otevřete panel Network v DevTools při generování — jediné odchozí požadavky jsou počáteční načtení stránky a reklamní volání. Žádná data obrázku nejsou přenášena.

Jaké formáty jsou přijímány pro nahrání obrázku?

Jakýkoli formát, který prohlížeč dokáže dekódovat: PNG, JPEG, WebP, GIF a SVG (rasterizovaný prohlížečem). Limit velikosti souboru je 10 MB na nahrání.

Jak funguje ZIP stažení?

Stránka používá knihovnu fflate (načtenou na vyžádání ze sdílené vendor cesty) k zabalení všech vygenerovaných PNG plus manifest.json do standardního ZIP archivu. Balení probíhá zcela v paměti prohlížeče — žádné nahrávání, žádná komunikace se serverem. ZIP je poskytnut jako Blob stažení jedním kliknutím.

Mohu tyto favicony použít na jakémkoli webu?

Ano. Vygenerované PNG favicony fungují na všech moderních prohlížečích podporujících tag. 180×180 Apple Touch Icon pokrývá iOS a Safari. 192×192 a 512×512 PWA ikony splňují požadavky manifestu pro Chrome na Androidu a další prohlížeče podporující PWA.

Existuje možnost formátu .ico?

Aktuální verze vydává PNG, protože všechny moderní prohlížeče je přijímají přes . Skutečný multi-resolution .ico formát zatím není podporován a může být přidán v budoucí verzi.