Žádné nahrávání, 100% lokálně, bez účtu

Generátor favicon

Nahrajte své logo nebo ikonu a stáhněte všechny standardní velikosti favicon jako PNG. Včetně Apple Touch Icon a ikon PWA. Nic neopustí vaše zařízení.

Jak Generátor favicon funguje

Generátor favikon vezme jakýkoli obrázek, který poskytnete, a změní jeho velikost na standardní rozměry favikon pomocí Canvas API drawImage: 16x16, 32x32, 48x48, 180x180 (ikona Apple touch), 192x192 (Android Chrome) a 512x512 (manifest PWA). Všech šest velikostí se generuje ve vašem prohlížeči a stáhnete je jako jednotlivé soubory PNG spolu s vícevelikostním souborem favicon.ico, který sdružuje obrázky 16x16, 32x32 a 48x48 do jednoho staršího formátu souboru. Váš zdrojový obrázek nikdy neopustí vaše zařízení.

Kompletní sada favikon pokrývá celý rozsah ikon záložek prohlížeče, záložek, zástupců na domovské obrazovce a úvodních obrazovek PWA. Použití zdrojového obrázku s vysokým rozlišením (alespoň 512x512 pixelů) poskytuje algoritmu pro zmenšení co nejvíce detailů k práci. Tagy HTML link, které potřebujete pro odkazování na každý vygenerovaný soubor, jsou zobrazeny v úryvku, který můžete přímo zkopírovat do elementu head vaší stránky.

Napsal Bastien Sulyan

Generátor favicon: návod krok za krokem

  1. Přetáhněte zdrojový obrázek do oblasti nahrávání. Pro nejlepší výsledky použijte čtvercový obrázek o velikosti 512 px nebo větší.
  2. Zobrazte náhled šesti vygenerovaných velikostí v panelu výsledků.
  3. Stáhněte šest souborů PNG a favicon.ico z panelu výsledků.
  4. Zkopírujte HTML úryvek zobrazující tagy link pro všechny velikosti.
  5. Umístěte soubory PNG do kořenového adresáře vašeho webu a vložte tagy link do hlavičky vaší stránky.

Časté případy použití

  • Vývojář nastaví nový web a potřebuje všechny velikosti favikon vygenerované z loga značky bez předplatného návrhového nástroje.
  • Autor PWA generuje ikony 192x192 a 512x512 vyžadované v manifestu webové aplikace pro instalaci na domovskou obrazovku.
  • Bloger obnoví identitu svého webu a nahradí výchozí favikonu vlastní ikonou vytvořenou ze svého loga.
  • Freelancer rychle vytvoří kompletní sadu favikon pro projekt klienta bez čekání na instalaci offline návrhového softwaru.

Často kladené otázky

Jaké formáty obrázků mohu použít jako zdroj?

Jako vstup funguje jakýkoli formát, který prohlížeč dokáže dekódovat: JPEG, PNG, WebP, GIF a SVG. Pro zdroje SVG prohlížeč rastruje vektor na Canvas před změnou velikosti, takže výstupní PNG jsou rastrové obrázky bez ohledu na to.

Proč je moje favikona v záložce prohlížeče rozmazaná?

Velikosti 16x16 a 32x32 jsou velmi malé. Pokud zdrojový obrázek obsahuje jemné detaily nebo tenké čáry, nepřežijí zmenšení. Jednoduchý, výrazný design s jasně čitelnými tvary funguje mnohem lépe při malých velikostech než složitá ilustrace.

Generuje nástroj soubory ICO?

Ano. Kromě šesti souborů PNG nástroj sestaví i soubor favicon.ico, který v jediném souboru obsahuje obrázky 16x16, 32x32 a 48x48; jde o formát, který stále hledají starší prohlížeče Windows a někteří prohledávače v kořenovém adresáři webu. Moderní prohlížeče si vystačí s odkazy na PNG, takže publikování obou nic nestojí a necháte klienta, aby si vybral.

Je zdrojový obrázek zpracováván na serveru?

Ne. Volání Canvas drawImage, která vytváří každou velikost, probíhají v záložce vašeho prohlížeče. Zdrojový obrázek se čte z vašeho lokálního disku a šest výstupů PNG se vytváří v paměti a nabízí ke stažení. Žádná data souborů neprocházejí serverem.

Jakou velikost mám použít pro ikonu Apple touch?

iOS a iPadOS používají PNG o velikosti 180x180 pixelů odkazovaný tagem link apple-touch-icon. Tato velikost se používá, když uživatel přidá váš web na domovskou obrazovku Apple zařízení. Nástroj generuje tento soubor spolu s ostatními velikostmi.

Mohu jako zdroj použít obdélníkový obrázek?

Ano, ale výstup bude upraven formátem letterbox nebo pillarbox, aby se vešel na čtvercové plátno. Pro nejlepší výsledky začněte čtvercovým obrázkem nebo ořízněte zdrojový obrázek na čtverec před použitím nástroje.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje na obrázky