Konwertuj PNG na ICO dla ostrej favikony
Favikonka to mały obraz, który nadaje stronie internetowej jej wizualną sygnaturę. Widzisz ją w zakładce przeglądarki obok tytułu strony, na liście zakładek, na liście rozwijanej paska adresu w historii przeglądania i niekiedy obok wyników wyszukiwania. Jest mała, ale robi dużo roboty: rozpoznawalna favikonka pomaga użytkownikom znaleźć Twoją zakładkę wśród tuzina innych i sygnalizuje, że strona jest dopracowana i zadbana. Klasycznym formatem dla tej małej ikony jest ICO, a najprostszym sposobem na jej stworzenie jest wyjście od czystego kwadratowego PNG i jego konwersja.
To narzędzie pobiera obraz PNG i zamienia go w favikonkę ICO bezpośrednio w Twojej przeglądarce. Konwersja działa lokalnie na Twoim urządzeniu, więc wybrane zdjęcie nigdy nie jest przesyłane na serwer. Ma to znaczenie, gdy Twoja ikona to logo lub zasób marki, którego wolisz nie oddawać stronie trzeciej. Gdy plik jest gotowy, po prostu go pobierasz.
Czym jest format ICO i dlaczego przechowuje kilka rozmiarów
ICO to format kontenera ikon, który powstał w systemie Microsoft Windows, gdzie przechowuje ikony używane dla programów, skrótów i folderów. Jego cechą definiującą, a zarazem powodem, dla którego stał się standardem dla favikonek w sieci, jest to, że pojedynczy plik ICO może przechowywać ten sam obraz w kilku rozdzielczościach jednocześnie. Zamiast jednej stałej bitmapy plik pakuje mały zestaw kwadratowych obrazów i pozwala przeglądarce lub systemowi operacyjnemu wybrać rozmiar pasujący do miejsca, w którym ikona ma być narysowana.
To naprawdę przydatne. Zakładka przeglądarki potrzebuje małej ikony, pasek zakładek może używać nieco większej, a przypięty skrót na pulpicie może prosić o coś jeszcze większego. Przy wielorozmiarowym ICO każdy kontekst pobiera wersję, która do niego pasuje, więc ikona pozostaje ostra zamiast być skalowana z jednej małej bitmapy i stając się rozmazana. ICO zachowuje też przezroczystość, co utrzymuje narożniki okrągłego lub nieregularnego logo w czystości na tle dowolnego koloru zakładki.
Zalecane rozmiary favikonek
Do favikonki strony trzy rozmiary warte uwzględnienia to 16x16, 32x32 i 48x48 pikseli. Wersja 16-pikselowa to ta, którą większość przeglądarek pokazuje w zakładce i pasku adresu. Wersja 32-pikselowa jest używana na wyświetlaczach o wyższej rozdzielczości i w niektórych widokach zakładek i historii, więc zachowuje ostrość na nowoczesnych ekranach. Wersja 48-pikselowa obejmuje większe konteksty, takie jak skróty do stron w systemie Windows. Ponieważ wszystkie mieszkają w jednym pliku ICO, dostarczasz jeden zasób i pozwalasz każdej powierzchni wybrać to, czego potrzebuje.
Zacznij od kwadratowego PNG, żeby nic się nie rozciągało. Jeśli Twój obraz źródłowy jest prostokątny lub za duży, najpierw przytnij lub przeskaluj go do czystego kwadratu za pomocą naszego narzędzia do zmiany rozmiaru obrazów, a potem przeprowadź konwersję. Prosty, kontrastowy projekt jest znacznie lepiej czytelny przy 16 pikselach niż szczegółowa ilustracja, więc preferuj pogrubione kształty nad drobnym tekstem.
Jak dodać favikonkę do swojej strony
Gdy masz już plik ICO, prześlij go na swoją stronę, tradycyjnie jako favicon.ico w katalogu głównym witryny. Wiele przeglądarek znajdzie go tam automatycznie, ale najlepszą praktyką jest deklarowanie go wprost w nagłówku HTML, żeby nie było żadnych domysłów. Dodaj znacznik link w ten sposób:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Umieść ten wiersz wewnątrz sekcji <head> swoich stron. Atrybut rel="icon" informuje przeglądarkę, że ten zasób to ikona strony, a href wskazuje miejsce, gdzie przechowujesz plik. Jeśli używasz ścieżki względnej do katalogu głównego, takiej jak powyżej, ta sama deklaracja działa na każdej podstronie Twojej witryny. Po wdrożeniu może być konieczne odświeżenie twarde lub wyczyszczenie pamięci podręcznej, zanim nowa ikona się pojawi, ponieważ przeglądarki agresywnie trzymają się favikonek.
Prywatna konwersja w Twojej przeglądarce
Wszystko dzieje się na Twoim urządzeniu. Wybrane PNG jest odczytywane, dekodowane i ponownie kodowane jako ICO lokalnie, i nic nie opuszcza Twojego komputera podczas tego procesu. Nie ma konta, kolejki ani przechowywania po stronie serwera, co sprawia, że jest to wygodne nawet dla nieupublicznionych logo lub projektów dla klientów objętych umową. Po więcej sposobów na przygotowanie i uporządkowanie grafiki, przeglądaj nasz pełny zestaw narzędzi do obrazów.
Najczęściej zadawane pytania
Czy mój obraz jest gdzieś przesyłany?
Nie. PNG jest konwertowany na ICO w całości w Twojej przeglądarce na Twoim własnym urządzeniu. Nic nie jest wysyłane na serwer i nic nie jest przechowywane, więc Twój obraz pozostaje prywatny.
Jakie rozmiary powinna zawierać moja favikonka?
Najbardziej przydatne rozmiary to 16x16, 32x32 i 48x48 pikseli. Obraz 16-pikselowy jest pokazywany w zakładkach przeglądarki, a większe utrzymują ikonę ostro na wyświetlaczach o wysokiej rozdzielczości i skrótach pulpitu.
Dlaczego używać ICO zamiast zwykłego PNG?
ICO to wieloletni format favikonek i może przechowywać kilka rozmiarów w jednym pliku. Przeglądarki i system operacyjny wybierają rozdzielczość pasującą do każdego kontekstu, więc ikona pozostaje ostra zamiast być skalowana z jednej bitmapy.
Czy ICO zachowuje przezroczystość z mojego PNG?
Tak. Format ICO obsługuje przezroczystość, więc przeźroczyste obszary Twojego PNG są zachowane, a ikona czysto wtapia się w dowolną zakładkę lub kolor tła.
Jak dodać favikonkę do mojej strony?
Prześlij plik ICO na swoją witrynę, zazwyczaj jako favicon.ico w katalogu głównym, i dodaj znacznik link w nagłówku HTML, na przykład link rel icon type image x-icon href slash favicon.ico. Następnie wyczyść pamięć podręczną przeglądarki, żeby ją zobaczyć.
Mój obraz źródłowy nie jest kwadratowy. Co powinienem zrobić?
Najpierw przytnij lub przeskaluj go do kwadratu, żeby nie był rozciągnięty. Możesz użyć naszego narzędzia do zmiany rozmiaru obrazów, żeby zrobić czysty kwadrat, a potem skonwertować go na ICO dla najlepiej wyglądającej favikonki.