Åadowanie...
Åadowanie...
Wrzuć jeden obraz i uzyskaj każdy rozmiar favicon, którego potrzebuje nowoczesna strona — favicon.ico, rozmiary PNG dla przeglądarek, Apple i Android, plus gotowe do wklejenia fragmenty HTML i manifestu.
Generator faviconów przekształca jeden obraz źródłowy w rodzinę plików ikon, których potrzebuje nowoczesna witryna — dziedziczny plik .ico, który przeglądarki pobierają automatycznie, małe rozmiary PNG wyświetlane na kartach i w zakładkach, 180-pikselowa ikona apple-touch, używana, gdy użytkownik iPhone'a dodaje twoją witrynę do ekranu głównego, oraz obrazy 192/512 pikseli, które Android pobiera z manifestu sieciowego. Robienie tego ręcznie oznacza otwieranie edytora obrazów, eksportowanie siedmiu oddzielnych plików i pisanie długiego bloku tagów <link> w HTML. Ten generator uruchamia cały proces w twojej przeglądarce: wrzuć jeden obraz, uzyskaj każdy rozmiar i skopiuj odpowiadający fragment HTML i manifestu. Twój obraz nigdy nie opuszcza strony.
Prześlij PNG, JPG, WebP lub SVG, które jest kwadratowe i ma co najmniej 512×512 pikseli. Niekwadratowe źródło jest umieszczane w kwadratowym obszarze roboczym, aby logo nigdy nie było przycinane, ale małe szczegóły wyglądają najlepiej, gdy źródło jest już kwadratowe.
Pozostaw przezroczyste, jeśli twoje logo jest widoczne zarówno na jasnym, jak i ciemnym chromie przeglądarki. Przełącz na jednolity kolor, jeśli twoja ikona ma jasny pierwszy plan, który zniknie na białej karcie — większość kart przedsiębiorstw jest nadal bardzo jasna.
Dokładnie przyjrzyj się podglądom 16- i 32-pikselowym. Większość logo traci szczegóły w tym rozmiarze. Jeśli wynik to rozmaz, uprość źródło — mniej kolorów, grubsze linie, mniej drobnego tekstu — i prześlij ponownie.
Użyj Pobierz wszystko, aby pobrać favicon.ico oraz sześć rozmiarów PNG. Umieść je w katalogu głównym swojej witryny. .ico zawiera wewnętrznie PNG o rozmiarach 16, 32 i 48 px, co jest tym, czego oczekują obecne przeglądarki Chrome, Firefox i Edge.
Skopiuj fragment HTML do <head> każdej strony. Zapisz fragment site.webmanifest obok ikon, aby Android pokazał poprawny obraz na ekranie głównym, gdy ktoś doda twoją witrynę.
1. Dekoduj przesłany obraz za pomocą natywnego loadera obrazów przeglądarki.
2. Dla każdego docelowego rozmiaru (16, 32, 48, 180, 192, 512) rysuj na kwadratowym obszarze roboczym.
3. Umieść źródło w kwadratowym obszarze roboczym, aby dłuższy bok pasował do obszaru roboczego — nigdy nie przycinaj, nigdy nie rozciągaj.
4. Ponownie zakoduj obszar roboczy jako PNG za pomocą canvas.toBlob('image/png').
5. Dla favicon.ico, zmontuj PNG o rozmiarach 16/32/48 w strukturę ICONDIR + ICONDIRENTRY.
6. Połącz bajty PNG po 16-bajtowych wpisach katalogowych — to jest ważny wielorozdzielczy plik .ico.Nowoczesne przeglądarki i urządzenia Apple akceptują bajty PNG osadzone w kontenerze .ico — nie ma potrzeby kodowania przestarzałego formatu BMP-z-maską-AND, który pierwotnie dostarczono z Windows 95. Kontener to tylko sześciobajtowy nagłówek (zarezerwowany + typ + liczba), jeden 16-bajtowy wpis katalogowy dla każdego dołączonego obrazu (rozmiar + głębia bitowa + offset + długość) oraz połączone ładunki PNG. To jest to, co produkuje to narzędzie, i to jest to, co Chrome, Firefox, Safari i Edge pobierają, gdy żądają /favicon.ico z twojego serwera.
Źródło: Wikipedia — format pliku ICO
| Obraz źródłowy | Czego się spodziewać |
|---|---|
Wyraźne kwadratowe logo, 1024×1024 PNG, przezroczyste tło | Wyraźne w każdym rozmiarze. Podglądy 16 i 32 px są nadal czytelne. Można je bezpośrednio umieścić na stronie produkcyjnej. Idealny input. |
Szeroki poziomy znak słowny, 2000×400 | Umieszczony w kwadratowym obszarze z pustymi pasami na górze i dole. Znak słowny jest nadal czytelny przy 192 i 512, ale nieczytelny przy 16 i 32 — tekst jest za mały. Przytnij do kwadratowego znaku przed przesłaniem. |
Fotograficzne logo z cienkim gradientowym konturem | Gradient i kontur znikają przy 16 i 32 px. Użyj uproszczonej, wysokokontrastowej wersji tego samego logo dla zasobów w rozmiarze ikony. Utrata detali jest problemem źródłowym, a nie problemem eksportu. |
SVG bez wyraźnej szerokości lub wysokości | Renderuje się w domyślnym rozmiarze 300×150, który przeglądarka przypisuje SVG bez rozmiaru pochodzącego z viewBox. Dodaj atrybuty szerokości/wysokości lub viewBox do źródłowego SVG przed przesłaniem. Krawędź przypadku SVG — napraw źródło. |
Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.
Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.
Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.
Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.
Ostatnia aktualizacja