Generátor favikon — ICO, PNG a Apple Touch Icon
Premeňte jeden obrázok na kompletnú sadu favikon: favicon.ico, ikony PNG, apple-touch-icon a manifest webovej aplikácie.
Apple-touch-icon je vždy nepriehľadná. Ak je názov aplikácie prázdny, manifest použije názov súboru obrázka.
Náhľad
Súbory v ZIP
Ako vytvoriť favikonu
- Vyberte štvorcový obrázok, ideálne aspoň 512 na 512 pixelov, vo formáte PNG, JPG, WebP alebo SVG.
- Vyberte, ako majú neštvorcové obrázky sedieť: contain ich doplní farbou pozadia, cover ich vycentruje a oreže.
- Nastavte farbu pozadia a motívu, vnútorný okraj a to, či si malé ikony zachovajú priehľadné pozadie.
- Zadajte názov aplikácie a krátky názov, ktoré má niesť manifest webovej aplikácie, a potom skontrolujte živé náhľady.
- Stiahnite ZIP so všetkými súbormi alebo si vezmite favicon.ico a apple-touch-icon.png samostatne a skopírujte HTML úryvok.
Kedy to pomôže
- Dať novej webovej stránke favikonu bez otvárania grafického editora.
- Nahradiť chýbajúcu alebo rozmazanú favikonu, ktorá sa v kartách zobrazuje ako prázdna ikona stránky.
- Pridať apple-touch-icon, aby stránka vyzerala dobre po uložení na domovskú obrazovku iPhonu.
- Pripraviť ikony pre Android a manifest pre progresívnu webovú aplikáciu.
- Premeňte logo na uhladenú sadu ikon s rovnomerným okrajom v každej veľkosti.
Často kladené otázky
Aké veľkosti generátor vytvára?
Vytvára favicon.ico s obrázkami 16, 32 a 48 pixelov vnútri, samostatné súbory favicon-16x16.png a favicon-32x32.png, apple-touch-icon.png s rozmermi 180 na 180 a ikony pre Android s rozmermi 192 a 512 pixelov.
Prečo je apple-touch-icon vždy nepriehľadná?
iOS nezobrazuje priehľadnosť v ikone na domovskej obrazovke, takže priehľadný PNG by mal za sebou čierny alebo biely blok. Generátor tento súbor vyplní vašou farbou pozadia a malé veľkosti favikony nechá priehľadné, ak chcete.
Čo mám uviesť v manifeste?
Použite úplný názov stránky alebo aplikácie a krátky názov s približne dvanástimi znakmi, pretože krátky názov sa zobrazuje pod ikonou v telefóne. Farba motívu tónuje panel prehliadača a farba pozadia vypĺňa úvodnú obrazovku.
Môžem použiť logo SVG?
Áno. SVG sa rasterizuje na šírku 512 pixelov a jeho pomer strán sa prevezme z atribútov šírky a výšky alebo z viewBox, takže štvorcové logo zostane štvorcové.
Kam umiestniť súbory na serveri?
Umiestnite ich do koreňového priečinka stránky vedľa index.html, aby cesty v úryvku ako /favicon.ico a /site.webmanifest fungovali. Ak ich máte v podpriečinku, upravte hodnoty href v úryvku.
Nahráva sa môj obrázok niekam?
Nie. Obrázok sa dekóduje a kreslí na plátne vo vašom prehliadači a ZIP sa zostavuje v pamäti, takže sa na server nič neposiela.