Generátor favicon

Všechny ikony vašeho webu z loga, připravené k nahrání.

Další nástroje: JPEG na JPG Komprimovat JPG Komprimovat PNG Komprimovat WebP Změnit velikost obrázku Oříznout obrázek Sloučit obrázky

Vyberte obrázek PNG, JPG, WebP nebo SVG

Jeden soubor najednou, do 20 MB.

Přizpůsobení čtverci

Vměstnat Celý obrázek Vyplnit Ořízne okraje

Ikony jsou čtvercové. Pokud váš obrázek čtvercový není, zvolte, zda se zobrazí celý (s průhlednými okraji), nebo zda vyplní čtverec.

Barva pozadí

Pro ikonu Apple, která nemůže být průhledná, a jako barva motivu v Androidu.

Vaše soubory se automaticky mažou po převodu a nejpozději hodinu po nahrání. Jak zacházíme s vašimi soubory

Vytvořte kompletní favicon svého webu z loga: ikonu na kartě prohlížeče, ikony pro plochu iPhonu a Androidu, manifest a kód HTML, který vše propojí. Nahrajte obrázek PNG, JPG, WebP nebo SVG a stáhněte si ZIP se vším, bez registrace a bez vodoznaku.

Jak vytvořit favicon

Vyberte logo nebo ikonu v PNG, JPG, WebP nebo SVG, nejlépe čtvercové a alespoň 512 pixelů velké.
Zvolte, zda se obrázek zobrazí celý, nebo vyplní čtverec, a barvu pozadí ikony Apple.
Klikněte na „Vytvořit favicon“ a stáhněte ZIP.
Soubory vložte do kořenové složky webu a kód z head.html vložte do značky head svých stránek.

Co balíček obsahuje

Soubor	K čemu slouží
`favicon.ico`	Klasická ikona karty s velikostmi 16, 32 a 48 pixelů v jednom souboru. Prohlížeče ji hledají, i když ji nepropojíte.
`favicon-16x16.png` a `favicon-32x32.png`	Ikony karty a záložek v současných prohlížečích.
`apple-touch-icon.png`	Ikona o velikosti 180 pixelů, kterou iPhone a iPad použijí, když si někdo přidá váš web na plochu.
`android-chrome-192x192.png` a `android-chrome-512x512.png`	Ikony pro Android a instalovatelné webové aplikace.
`site.webmanifest`	Manifest, který deklaruje ikony pro Android a barvu vašeho webu.
`head.html`	Značky, které propojí ikony s vašimi stránkami.

Jak ho na web nainstalovat

Rozbalte ZIP a všechny soubory kromě head.html vložte do kořenové složky webu (tam, kde je úvodní stránka).
Zkopírujte tyto značky, které najdete i v head.html, do značky head svých stránek:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Pokud chcete, doplňte název webu do polí name a short_name v souboru site.webmanifest.

Prohlížeče si favicon ukládají do mezipaměti: pokud nový neuvidíte hned, vynuťte znovunačtení stránky nebo chvíli počkejte.

Vměstnat, nebo vyplnit

Všechny ikony jsou čtvercové. Pokud váš obrázek čtvercový není, můžete ho vměstnat, aby byl vidět celý s průhlednými okraji, nebo jím vyplnit čtverec a oříznout, co přesahuje do stran. U vodorovného loga s textem je často lepší použít jen symbol loga, oříznutý do čtverce.

Ikona Apple nemůže být průhledná: iOS by pozadí vyplnil černou. Proto ji vytváříme s barvou pozadí, kterou zvolíte a která slouží i jako barva vašeho webu v Androidu. Ostatní ikony si průhlednost ponechají.

Tipy pro dobrý výsledek

Začněte velkým obrázkem, alespoň 512 × 512 pixelů, nebo ještě lépe SVG: malé ikony se počítají z něj.
Zjednodušte: při 16 pixelech nejsou texty a jemné detaily čitelné. Symbol nebo iniciála v kontrastních barvách fungují mnohem lépe.

Pokud potřebujete jen soubor .ico, můžete převést PNG do ICO.

Omezení

Jeden obrázek najednou, do 20 MB a 100 megapixelů.
Do vašeho webu nezasahujeme: soubory musíte nahrát a značky přidat sami, nebo o to požádat správce webu.

Časté dotazy

Jak velký má být obrázek pro vytvoření favicon?

Čím větší, tím lepší: alespoň 512 × 512 pixelů, nebo SVG. Všechny ikony od 512 do 16 pixelů se počítají z něj.

Kam soubory favicon vložit?

Do kořenové složky webu, do stejné složky jako úvodní stránku. Potom vložte značky z head.html do značky head svých stránek.

Proč v prohlížeči nevidím nový favicon?

Protože si ho prohlížeče ukládají do mezipaměti. Vynuťte znovunačtení stránky, otevřete ji v anonymním okně nebo chvíli počkejte.

Proč má ikona Apple barevné pozadí?

Protože iOS nepřijímá průhlednost v ikonách na ploše a pozadí by vyplnil černou. Vytváříme ji s barvou pozadí, kterou zvolíte, aby vypadala dobře.

Mohu takto vytvořit favicon webu na WordPressu?

WordPress má vlastní volbu, „Ikona webu“ (v nabídce Vzhled › Přizpůsobit › Identita webu nebo podle verze a šablony v obecném nastavení): nahrajete čtvercový obrázek a WordPress vytvoří velikosti sám. Balíček z tohoto nástroje je určen pro weby, na které můžete nahrávat soubory a upravovat kód.