Jak vytvořit favicon za minutu (a proč bez něj web vypadá nedodělaně)

Ve zkratce: favicon vyrobíte za minutu přímo tady na webu ve Favicon generátoru. Nahrajete obrázek nebo logo, případně jen napíšete písmeno, a stáhnete balíček se všemi velikostmi a kódem, který stačí vložit do webu.

Co je favicon a kde ho lidé vidí

Favicon je malá čtvercová ikona webu. Ukazuje se na místech, kde se váš web potkává s desítkami jiných:

• záložka prohlížeče – podle ikony vás lidé najdou mezi dvaceti otevřenými stránkami
• výsledky Googlu – ikona je vedle názvu webu u každého výsledku
• oblíbené a historie – ikona je často jediné, co je z webu vidět
• plocha telefonu – když si někdo web uloží mezi aplikace

Web bez faviconu má v záložce šedou zeměkouli. Působí nedodělaně a hůř se hledá.

Jak vytvořit favicon krok za krokem

Ve Favicon generátoru to jsou čtyři kroky, stejné na počítači i v mobilu:

1. Nahrajte obrázek nebo logo – přetažením do pole, kliknutím, nebo vložením ze schránky.
2. Není čtvercový? V Nastavení zvolte Oříznout a výřez si posuňte tam, kde ho chcete.
3. Podle chuti vyberte Tvar podkladu (čtverec, oblý čtverec, kruh) a jeho barvu. V náhledu hned vidíte záložku, výsledek Googlu i ikonu v telefonu.
4. Klikněte na Stáhnout balíček (ZIP). Uvnitř jsou všechny soubory i kód do webu.

Nemáte logo ani obrázek? Přepněte na Písmeno a udělejte ikonu z prvního písmene názvu firmy.

Jaké rozměry a soubory favicon potřebuje

Favicon je jedna ikona, jen každé zařízení chce jinou velikost. Hlavní je ta první, zbytek je pro telefony:

Nástroj vyrobí všechny najednou. Menší velikosti ani starý soubor favicon.ico nepotřebujete, dnešní prohlížeče si ikonu zmenší samy.

Jaký obrázek se na favicon hodí

V záložce má ikona jen 16 pixelů. Co vypadá dobře na vizitce, se tam ztratí.

• čtverec – favicon je vždy čtvercový, obdélníkové logo se musí oříznout nebo zmenšit
• jednoduchý motiv – znak nebo monogram, ne celé logo s textem
• žádný drobný text – slogan ani název firmy nikdo nepřečte
• kontrast – ikona musí být vidět na světlé i tmavé liště prohlížeče

Dlouhé logo s nápisem? Použijte jen jeho znak, nebo první písmeno.

Kde vzít obrázek, když žádný nemáte

Dobrým zdrojem je Flaticon (otevře se v novém okně), velká databáze ikon. Najdete tam základ pro favicon v provedení, které vám sedí:

• jednobarevné i dvoubarevné ikony – barvy jde před stažením upravit podle webu
• obrysové, nebo vyplněné – obrys působí lehce, výplň je v malé záložce čitelnější
• různě silný tah – na favicon berte spíš silnější, tenké čáry se v 16 pixelech ztratí

Ikonu stáhněte jako PNG v největší velikosti (512 px) a nahrajte ji do Favicon generátoru. Tam jí přidáte podklad v barvě svého webu.

Zdarma jsou na Flaticonu ikony ve formátu PNG s podmínkou, že na webu uvedete autora. S předplatným autora uvádět nemusíte a dostanete i vektorové SVG.

Kam favicon nahrát

Vlastní web (HTML, PHP)

Soubory z balíčku nahrajte do hlavní složky webu a do hlavičky stránky vložte kód, který vám nástroj připraví:

<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

WordPress

V administraci otevřete Vzhled → Přizpůsobit → Identita webu a u Ikony webu nahrajte soubor icon-512.png. Ostatní velikosti i kód si WordPress doplní sám.

Stavebnice webů a e-shopy

Wix, Webnode, Shoptet a podobné mají v nastavení políčko Favicon nebo Ikona webu. Nahrajte do něj icon-192.png, a když chce větší obrázek, tak icon-512.png.

Proč se nový favicon neukazuje

• prohlížeč si pamatuje starou ikonu – načtěte stránku znovu přes Ctrl + F5 (na Macu Cmd + Shift + R), nebo ji otevřete v anonymním okně
• Google ji mění pomalu – nová ikona se ve výsledcích objeví za dny až týdny
• Google chce čtverec o velikosti násobku 48 px – ikona 192 × 192 px z balíčku to splňuje
• odkaz na ikonu chybí v hlavičce úvodní stránky – bez něj ji prohlížeč ani Google nenajde

Do hlavičky webu patří ještě jedna drobnost, která dělá velký rozdíl: obrázek, který se ukáže, když někdo odkaz na váš web pošle dál. Jak na něj, čtěte v článku Proč se u odkazu na váš web ukazuje špatný obrázek.

Na webech, které tvořím na míru, je favicon nastavený od prvního dne. Chystáte nový web? Začít můžete návrhem webu zdarma.