tigtools

Generátor favicon

Vytvořte kompletní sadu favicon z loga nebo z jednoho či dvou písmen na barevném pozadí a poté zkopírujte HTML tagy. Ikony se generují ve vašem prohlížeči.

Běží ve vašem prohlížeči Bez registrace

Vytvořit z

Nejlépe fungují jeden nebo dva znaky; použijí se pouze první dva.

62%
Tvar

Jak používat

  1. Zvolte Písmena a zadejte jeden nebo dva znaky s vašimi barvami, nebo zvolte Obrázek a vyberte logo (ideálně čtvercové, alespoň 512 px).
  2. Zkontrolujte náhledy všech velikostí, zejména 16 a 32 px, které se zobrazují v kartách prohlížeče.
  3. Stáhněte ZIP a nahrajte jeho soubory do kořene svého webu.
  4. Vložte HTML tagy do sekce head svých stránek a případně upravte název v souboru site.webmanifest.

Jak to funguje

Prohlížeče a zařízení hledají ikony na různých místech. Sada vytvořená zde pokrývá běžné případy: soubor favicon.ico s obrázky 16, 32 a 48 px pro karty prohlížeče, záložky a starší software, který automaticky požaduje /favicon.ico; soubory PNG 16 a 32 px odkazované pomocí značek link; ikonu 180 × 180 apple-touch-icon používanou při přidání webu na plochu iPhonu nebo iPadu; a ikony 192 a 512 px odkazované ze souboru site.webmanifest pro plochy Androidu a instalovatelné webové aplikace.

Soubor favicon.ico ukládá ikony jako obrázky PNG v kontejneru ICO, který umí číst všechny současné prohlížeče a Windows Vista a novější. Soubory ICO a ZIP jsou sestavovány kódem na této stránce; nic se neodesílá na server.

Malé velikosti vyžadují jednoduchý design: při 16 × 16 pixelech tenké čáry a malý text zmizí, takže tučné písmeno nebo zjednodušená značka loga funguje lépe než celé logo se slovy. Obrázek je zmenšen v několika krocích vysoké kvality. Ikona apple-touch-icon má vždy plnou barvu pozadí, protože iOS vyplňuje průhledné oblasti černě a sám zaobluje rohy.

Po nahrání nových ikon mohou prohlížeče ještě chvíli zobrazovat starou favicon, protože ji agresivně ukládají do mezipaměti. Obvykle pomůže tvrdé obnovení nebo přímé otevření /favicon.ico.

Příklady

Ikona s písmenem pro nový projekt

Napsání „TG“ bílými písmeny na tmavě zeleném zaobleném čtverci poskytne čistou ikonu, která zůstává čitelná při 16 × 16 px na kartě prohlížeče, aniž byste potřebovali navržené logo.

Ikona ze stávajícího loga

Logo PNG 1024 × 1024 s průhledným pozadím, nastavené na Přizpůsobení celého obrázku, vytvoří průhledné ikony karet a ikonu apple-touch-icon v barvě vaší značky.

Široké logo

U slovního loga 1200 × 300 ponechá oříznutí středu jen prostřední písmena. Přizpůsobení celého obrázku zachová vše, ale bude to drobné; samostatná čtvercová značka loga obvykle vypadá lépe.

Časté dotazy

Potřebuji stále favicon.ico?

Stále je užitečný. Některé prohlížeče, čtečky kanálů a nástroje požadují /favicon.ico z kořene webu i bez tagu link. Moderní prohlížeče také používají PNG ikony uvedené v HTML.

Kam mám soubory umístit?

Nahrajte je do kořenové složky webu, vedle domovské stránky, aby /favicon.ico a ostatní cesty v HTML fungovaly. Pokud používáte podsložku, upravte cesty v tazích link a v souboru site.webmanifest.

Proč se stále zobrazuje můj starý favicon?

Prohlížeče ukládají favicony do mezipaměti samostatně a na dlouhou dobu. Zkuste vynucené obnovení stránky, otevřete /favicon.ico na nové kartě nebo to zkontrolujte v anonymním okně. Přejmenování souborů, například favicon-v2.ico, také vynutí opětovné načtení.

Vytvoří to SVG favicon?

Ne. Vytváří soubory PNG a ICO, které fungují všude. Pokud už máte logo v SVG, můžete ho sami přidat pomocí tagu link s typem image/svg+xml navíc k těmto souborům.

Soukromí

Ikony, soubor ICO a ZIP se vytvářejí ve vašem prohlížeči. Váš obrázek a text se nenahrávají, neukládají ani nezahrnují do analytiky.