Vyplnit ořízne nečtvercový obrázek na střed, Vejít se celý ho zmenší a doplní okraje.
Malé logo bývá na 16 px čitelnější bez okraje.
JPG průhlednost nemá — po odškrtnutí se vybere plná barva.
Náhled velikostí
HTML kód do hlavičky
Kam soubory nahrajete — třeba /assets/ nebo /wp-content/uploads/favicon/.
Manifest je potřeba pro ikony 192 a 512 px na Androidu a v PWA.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Jak převést PNG na ICO
- Nahrajte obrázek nebo ho přetáhněte do vyznačeného pole. Nástroj bere PNG, JPG, WebP i SVG.
- Vyberte, jestli má obrázek vyplnit celý čtverec, nebo se do něj vejít. U loga s textem zvolte druhou možnost.
- Doladit můžete okraj, barvu pozadí a zaoblení rohů. Náhledy vpravo se překreslují průběžně, včetně ukázky v panelu prohlížeče.
- Stáhněte favicon.ico, jednotlivá PNG, nebo rovnou ZIP se vším. Pod výstupy najdete HTML kód pro vložení do hlavičky.
Co je soubor ICO a proč obsahuje víc obrázků
ICO není obyčejný obrázek, ale schránka na několik obrázků různých velikostí. Prohlížeč si z ní vybere tu, kterou právě potřebuje: menší do panelu, větší do seznamu oblíbených. Proto jeden soubor favicon.ico stačí na všechna místa, kde se ikona zobrazuje malá.
Nástroj do ICO ukládá tři velikosti: 16, 32 a 48 pixelů. Větší dovnitř nedává schválně. Kontejner by narostl na stovky kilobajtů a prohlížeče z něj velké ikony přesto neberou, protože pro ně existují samostatné soubory PNG.
Převod SVG na ICO
Vektorové logo je pro ikonu nejlepší vstup, protože se dá zvětšit i zmenšit bez ztráty ostrosti. Většina konvertorů ale SVG odmítne, nebo z něj vyrobí prázdný obrázek. Naráží na to, že leckterá SVG neuvádějí rozměry a mají jen atribut viewBox.
Tenhle nástroj chybějící rozměry doplní z viewBoxu sám, takže se vektor vykreslí správně a ikona 512 pixelů vyjde ostrá. Barvy zkontrolujte předem, protože v malých velikostech se tenké linky slijí. Odstíny doladíte v převodníku barev.
Jaké velikosti faviconu potřebujete
| Velikost | Soubor | Kde se použije |
|---|---|---|
| 16 a 32 px | favicon.ico, favicon-16×16.png, favicon-32×32.png | panel prohlížeče, oblíbené, historie |
| 48 px | favicon.ico, favicon-48×48.png | zástupce na ploše ve Windows |
| 180 px | apple-touch-icon.png | ikona na ploše iPhonu a iPadu |
| 192 px | icon-192.png | Android, ikona na domovské obrazovce |
| 512 px | icon-512.png | úvodní obrazovka instalované aplikace |
Zdrojový obrázek proto dodejte alespoň 512 pixelů na stranu, ideálně čtvercový. Z menšího by se velké ikony rozostřily, protože zvětšovat pixely nejde. Nečtvercový obrázek nástroj přijme, ale upozorní vás na to, aby vás výsledný ořez nezaskočil.
Jak favicon vložit do webu
Soubory nahrajte do kořene webu, tedy tam, kde leží úvodní stránka, a do hlavičky přidejte odkazy. Dnes stačí čtyři řádky, ne pět a víc, jak radí starší návody. Prohlížeč si sám vybere, co použije.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Přesný kód s vaší cestou k souborům nástroj vypíše pod výstupy, takže ho jen zkopírujete. Soubor site.webmanifest popisuje velké ikony pro mobily a bez něj se ikona na domovské obrazovce Androidu nemusí zobrazit správně.
Časté otázky
Odesílá se můj obrázek na server?
Ne. Celý převod běží ve vašem prohlížeči, obrázek nikam neodchází. Generátory, které soubor nahrávají na server, tohle zaručit nemohou, takže u firemního loga před zveřejněním je to rozdíl, který stojí za pozornost.
Jak nastavím favicon na WordPressu?
V nabídce Vzhled a dále Přizpůsobit najdete položku Ikona webu, kam nahrajete PNG velké alespoň 512 pixelů. WordPress si potřebné velikosti vyrobí sám, takže tady ICO soubor nepotřebujete. Ruční vkládání do hlavičky se hodí u webů bez redakčního systému.
Jak nastavím favicon na Shoptetu?
V administraci otevřete Vzhled a design, dále Editor vzhledu a v nastavení šablony nahrajte ikonu webu. Shoptet očekává obrázek ve formátu ICO nebo PNG, takže se vám hodí favicon.ico vygenerovaný tímto nástrojem.
Proč se nová ikona v prohlížeči nezobrazila?
Prohlížeče drží favicon v paměti hodně dlouho a nová se často objeví až po tvrdém obnovení nebo v anonymním okně. Zkontrolujte taky, že soubor leží přesně na adrese z odkazu a že se vrací obrázek místo chybové stránky.
Umí nástroj převést ICO zpět na PNG?
Ne, funguje jen jedním směrem, tedy z obrázku do ikony. Obrácený převod nástroj neumí, protože ICO obsahuje víc velikostí a bylo by potřeba vybrat, kterou vzít.