Vlastní web (HTML, PHP)
Nahraj soubory z balíčku do hlavní složky webu, tam, kde leží index.html nebo index.php. Pak vlož kód z nástroje mezi <head> a </head>. Stačí ve společné šabloně, ne na každé stránce zvlášť.
Favicon generátor zdarma
Vytvoř si favicon z obrázku nebo písmene
Nahraj obrázek. Dolaď vzhled. Stáhni balíček. Favicon je malá ikona webu v záložce prohlížeče a je vždy čtvercová. Nástroj z tvého obrázku udělá čtverec, vyrobí všechny potřebné soubory a dá ti kód, který stačí vložit do webu. Zdarma, bez registrace a bez nahrávání na server.
Co chceš udělat? Vyber a ukážu ti postup krok za krokem.
Beta Nástroj je ve vývoji. Našel jsi chybu? Napiš mi na stepan@webpodnos.cz, ať ji opravím.
Tvůj obrázek nikam neodchází. Všechno se děje přímo ve tvém prohlížeči a zůstává to u tebe.
- Nahraj obrázek Do pole výše, nebo ze schránky.
- Dolaď vzhled Výřez, podklad a okraj v Nastavení.
- Stáhni a vlož Balíček na web, kód do hlavičky.
Takhle ikonu uvidí návštěvníci
Připravuju soubory…
Kód do hlavičky webu
Soubory nahraj do hlavní složky webu (tam, kde je index.html nebo index.php). Tyhle řádky vlož mezi <head> a </head>:
Co je v balíčku a k čemu to je
Favicon je jedna ikona, jen každé zařízení chce jinou velikost. Hlavní je ta 192 px, tu potřebuje každý web. Ostatní se ukáží, když si někdo web uloží na plochu telefonu, jako aplikaci. Nástroj vyrobí všechny najednou, stačí je nahrát na web a vložit kód.
| Soubor | K čemu je | Velikost |
|---|---|---|
| icon-192.png | hlavní favicon: záložka prohlížeče, Google i Android | 192 × 192 px |
| apple-touch-icon.png | ikona, když si někdo web uloží na plochu iPhonu nebo iPadu | 180 × 180 px |
| icon-512.png | Android (velká ikona a úvodní obrazovka) a WordPress (Ikona webu) | 512 × 512 px |
| site.webmanifest | název a barvy webu pro Android, patří k ikonám 192 a 512 | textový soubor |
Kam s ikonou
WordPress
V administraci otevři Vzhled → Přizpůsobit → Identita webu a u Ikony webu nahraj icon-512.png. Ostatní velikosti a kód do hlavičky WordPress doplní sám, ze zbytku balíčku nepotřebuješ nic.
Stavebnice webů a e-shopy
Wix, Webnode, Shoptet a podobné mívají v nastavení webu políčko pojmenované Favicon nebo Ikona webu. Nahraj do něj icon-192.png, a když chce větší, tak icon-512.png.
Celý postup i s tím, jaký obrázek se na ikonu hodí, je v článku Jak vytvořit favicon za minutu.
Ikona je jen jedna z věcí, které web potřebuje v hlavičce. Druhá je obrázek, který se ukáže při sdílení odkazu na Facebooku nebo WhatsAppu – ten si vyrobíš v generátoru obrázku pro sdílení. Na webech, které tvořím na míru, tohle řešit nemusíš – ikonu i náhled pro sdílení nastavím už při tvorbě.
Často se ptáš
Co je favicon a k čemu je?
Favicon je malá ikona webu. Ukazuje se v záložce prohlížeče, v oblíbených, v historii a u výsledků vyhledávání. Podle ní si lidé najdou tvůj web mezi desítkou otevřených záložek a Google díky ní vypadá tvůj výsledek důvěryhodněji.
Jaké soubory favicon potřebuje?
Hlavní je jeden: icon-192.png. To je favicon, který se ukáže v záložce a v Googlu, prohlížeč si ho zmenší sám. K němu dostaneš apple-touch-icon.png (180 px) pro iPhone, icon-512.png pro Android a WordPress a site.webmanifest. Nástroj vyrobí všechno najednou a dá ti kód, který to na web zapojí.
Kde je favicon.ico a malé velikosti 16 a 32 px?
Nejsou potřeba. Dnešní prohlížeče si ikonu 192 px zmenší do záložky samy a Google chce čtverec o velikosti násobku 48 px, což 192 splňuje. Soubor favicon.ico potřebovaly staré prohlížeče, které se už nepoužívají.
K čemu je ikona pro iPhone a Android, když mám web?
Pro samotný web ji nepotřebuješ. Je jen pro lidi, kteří si web uloží na plochu telefonu (v iPhonu přes Sdílet → Přidat na plochu). Web se pak na ploše ukáže jako aplikace a právě tahle ikona je na ní vidět. Když ji nemáš, iPhone místo ní použije zmenšený snímek stránky. Nic tě to nestojí, tak se vyplatí ji mít.
Jaký obrázek se na favicon hodí?
V záložce má favicon jen 16 pixelů, takže se jemné čáry, drobný text a slogany ztratí. Nejlíp funguje znak, monogram nebo jednoduchý motiv. Máš-li dlouhé logo s textem, použij jen jeho znak. Žádný obrázek nemáš? Udělej ikonu z jednoho nebo dvou písmen.
Obrázek není čtvercový. Co s tím?
Favicon je vždy čtverec. V Nastavení zvolíš, jestli obrázek vložit celý (zmenší se a kolem zůstane volné místo), nebo oříznout. Při oříznutí se otevře okno, kde si čtvercový výřez posuneš a zmenšíš, jak potřebuješ. Oříznout jde i čtvercový obrázek, když chceš jen jeho část.
Proč má ikona pro iPhone vždy plný podklad?
iOS neumí průhlednost a průhledná místa vyplní černou. Proto má apple-touch-icon.png plné čtvercové pozadí (v barvě podkladu, bez podkladu bílé). Rohy si iPhone zaoblí sám.
Proč se favicon neukazuje v Googlu?
Google si ikonu stahuje s časovým odstupem, mívá to dny až týdny. Musí to být čtverec o velikosti násobku 48 px (tady 192 × 192) a soubor nesmí blokovat robots.txt. Odkaz na ikonu musí být v hlavičce hlavní stránky. U nového webu zkus Google požádat o nové zpracování v Search Console.
Proč se v prohlížeči pořád ukazuje stará ikona?
Prohlížeče si favicon drží v paměti velmi dlouho. Zkus stránku znovu načíst přes Ctrl + F5 (na Macu Cmd + Shift + R), nebo ji otevřít v anonymním okně.
Jak to nastavit ve WordPressu?
V administraci otevři Vzhled → Přizpůsobit → Identita webu a v části Ikona webu nahraj soubor icon-512.png. WordPress z něj sám vyrobí všechny ostatní velikosti a doplní kód do hlavičky. Soubory ani kód z balíčku pak nepotřebuješ.
Posílá se můj obrázek někam?
Ne. Všechno se děje přímo ve tvém prohlížeči a obrázek tvoje zařízení neopustí. Nic se nenahrává na server a nic se neukládá.
Je nástroj opravdu zdarma?
Jo. Bez registrace, bez vodoznaku a bez omezení.
Cookies