Nástroje na míru
Praha, CZ
ICO · PNG · manifest

Generátor favicon.

Generátor vytvoří kompletní sadu ikon webu z vlastního obrázku nebo z písmena či emoji na barevném pozadí: favicon.ico ve velikostech 16, 32 a 48 pixelů, PNG ikony 192 a 512, maskovatelnou ikonu pro Android, apple-touch-icon pro iPhone, web manifest a HTML kód do hlavičky. Vše stáhnete v jednom ZIPu.

Zdroj
Náhled16 · 32 · 48 · 180 · 192 · 512
HTML <head>

Balíček obsahuje favicon.ico (16, 32, 48 px), PNG 192 a 512, maskovatelnou ikonu, apple-touch-icon, manifest a HTML kód do hlavičky. Vše se vytváří ve vašem prohlížeči.

Běží celý ve vašem prohlížeči. Nic se nikam neodesílá ani neukládá.

Jak na to

03
  1. Krok01

    Zvolte zdroj

    Vlastní obrázek (ideálně čtvercový SVG nebo PNG), nebo písmeno s barvou.

  2. Krok02

    Zkontrolujte malé velikosti

    16 px je opravdu málo, jednoduchý tvar funguje nejlépe.

  3. Krok03

    Stáhněte ZIP a nahrajte soubory

    Do kořene webu, a HTML kód vložte do hlavičky stránek.

Tipy pro dobrou favicon

  • Jednoduchost. V 16 pixelech se ztratí detaily, nápisy i tenké linky. Stačí iniciála nebo symbol.
  • Kontrast. Ikona musí být vidět na světlé i tmavé liště prohlížeče.
  • Stejná všude. Favicon, ikona aplikace a profilové obrázky na sítích by měly vycházet ze stejného symbolu.

Tento web používá jako faviconu modrý kruh s bílým Z, stejný odznak jako na plovoucí liště.

Open-source, na kterém stavíme01
FAQ04

Na co se lidé ptají

01Které velikosti favicon dnes potřebuji?

favicon.ico (pro záložky a starší prohlížeče), PNG 192 a 512 (Android, manifest), apple-touch-icon 180 × 180 (iPhone) a maskovatelnou ikonu. Všechny jsou v balíčku.

02Ukáže Google moji favicon ve výsledcích?

Ano, hlavně na mobilu. Google vyžaduje čtvercovou ikonu o velikosti alespoň 48 × 48 pixelů a dostupnou pro Googlebot.

03Co je maskovatelná ikona?

Ikona, kterou si Android ořízne do kruhu, čtverce nebo jiného tvaru podle systému. Proto má kolem obsahu bezpečný okraj.

04Nahrávají se moje obrázky na server?

Ne, ikony vznikají ve vašem prohlížeči na plátně (canvas).

Další krok01

Co dál

Souvisí04

Pokračujte

Máte práci, kterou by měl dělat program?

Kontakt ještě spouštím. Mezitím si vyzkoušejte nástroje, které už fungují.

Kontakt