Generátor favikon — ICO, PNG a Apple Touch Icon
Proměňte jeden obrázek v kompletní sadu favikon: favicon.ico, ikony PNG, apple-touch-icon a manifest webové aplikace.
Apple-touch-icon je vždy neprůhledná. Pokud je název aplikace prázdný, manifest použije název souboru obrázku.
Náhled
Soubory v ZIP
Jak vytvořit favikonu
- Vyberte čtvercový obrázek, ideálně alespoň 512 na 512 pixelů, ve formátu PNG, JPG, WebP nebo SVG.
- Zvolte, jak mají být nečtvercové obrázky vloženy: contain je doplní barvou pozadí, cover je ořízne od středu.
- Nastavte barvu pozadí a motivu, vnitřní okraj a zda mají malé ikony zachovat průhledné pozadí.
- Zadejte název aplikace a krátký název, které má manifest obsahovat, a zkontrolujte živé náhledy.
- Stáhněte ZIP se všemi soubory nebo si vezměte favicon.ico a apple-touch-icon.png zvlášť a zkopírujte HTML úryvek.
Kdy se hodí
- Dát novému webu favikonu, aniž byste otevírali grafický editor.
- Nahradit chybějící nebo rozmazanou favikonu, která se v kartách zobrazuje jako prázdná ikona stránky.
- Přidat apple-touch-icon, aby web vypadal správně po uložení na domovskou obrazovku iPhonu.
- Připravit ikony pro Android a manifest pro progresivní webovou aplikaci.
- Proměnit logo v ucelenou sadu ikon s rovnoměrným okrajem v každé velikosti.
Často kladené otázky
Jaké velikosti generátor vytváří?
Zapisuje favicon.ico s obrázky 16, 32 a 48 pixelů uvnitř, samostatné soubory favicon-16x16.png a favicon-32x32.png, apple-touch-icon.png o velikosti 180 na 180 a ikony pro Android 192 a 512 pixelů.
Proč je apple-touch-icon vždy neprůhledná?
iOS nezobrazuje průhlednost v ikoně na domovské obrazovce, takže průhledný PNG by měl za sebou černý nebo bílý blok. Generátor tento soubor vyplní vaší barvou pozadí a malé velikosti favikony může ponechat průhledné.
Co mám uvést v manifestu?
Použijte plný název webu nebo aplikace a krátký název o délce přibližně dvanácti znaků, protože krátký název se zobrazuje pod ikonou na telefonu. Barva motivu obarví panel prohlížeče a barva pozadí vyplní úvodní obrazovku.
Mohu použít logo SVG?
Ano. SVG se rasterizuje na šířku 512 pixelů a jeho poměr stran se bere z atributů šířky a výšky nebo z viewBox, takže čtvercové logo zůstane čtvercové.
Kam mám soubory na serveru umístit?
Umístěte je do kořene webu vedle index.html, aby cesty v úryvku jako /favicon.ico a /site.webmanifest fungovaly. Pokud je chcete v podsložce, upravte hodnoty href v úryvku.
Je můj obrázek někam nahráván?
Ne. Obrázek se dekóduje a kreslí na plátně ve vašem prohlížeči a ZIP se sestavuje v paměti, takže se na server nic neposílá.