W projektowaniu stron internetowych, jak zapewne wiesz, każdy szczegół ma znaczenie. Osoba, która przeszła na Twój zasób, nie widzi każdego z elementów z osobna, ale cały obraz odbiera jako pakiet składający się z innych drobnych detali. Tak więc, jeśli coś pominiesz w procesie rozwoju swojego zasobu, ten szczegół może później zepsuć cały kompleks, całą kompozycję.
Taką drobnostką może być np. tło przycisku, błędnie dobrana czcionka jakiegoś drobnego elementu, a nawet favicon. Rzeczywiście, przekonaj się sam - duże, dobrze znane witryny mają indywidualną ikonę, która wskazuje na to w sekcji „Zakładki” przeglądarki użytkownika. Bez tego twórcy zasobu nie byliby w stanie stworzyć kompozycji, do której pierwotnie dążyli.
Dlatego tworząc projekt dla swojej strony, powinieneś zadbać o taki szczegół jak favicon. W tym artykule porozmawiamy o tym, jak dopasować go do ogólnego stylu zasobu, a także jakie rozmiary powinien mieć ten obraz.
Ikona witryny
Najpierw zdefiniujmy, czym jest ten element. W tej chwili spójrz na tytuł karty przeglądarki. Jak widać, po lewej stronie znajduje się mały obrazek, wskazujący uproszczoną wersję logo zasobu. Ten sam obrazek znajduje się również przy nazwie witryny wyświetlanej w wynikach wyszukiwania. Tym kieruje się użytkownik, gdy widzi tytuł.
Wielu webmasterów rozumie, że takie zdjęcie jest potrzebne - ale niewiele osób wie, jaki rozmiar favicon dla witryny będzie najbardziej odpowiedni. Dlatego w tym artykule nie tylko podamy informacje o tym, jak utworzyć taką ikonę i jak można ją zainstalować w swoim zasobie, ale także porozmawiamy o rozmiarach obrazów.
Cel favicon
Tak więc obrazek w pobliżu nagłówka witryny służy do identyfikacji. To jest jego pierwotny cel: wyrazić miejsce, którego nazwę widzimy, i wyróżnić go w oczach innych. Odbywa się to w możliwie najprostszy sposób dzięki wykorzystaniu grafiki: intuicyjnie odbieramy informacje na zdjęciach znacznie szybciej i łatwiej niż w formacie tekstowym. Favicons nam w tym pomagają. Ale nie zapominaj, że rozmiar favicon jest minimalny w oczach użytkownika. Nie jest to logo w „nagłówku” serwisu, które może zawierać dodatkowe informacje w postaci napisów, jakichś wyjaśnień czy danych kontaktowych. Wszystko, co można wyświetlić w ikonie obok nazwy, powinno w jak największym stopniu pasować do rozmiaru favikony. A on, jak już wskazano, jest po prostu miniaturowy (tylko 16 na 16 pikseli).
Jak wybraćfavicon?
Jak więc webmaster może zaprojektować ikonę dla swojej witryny? Należy zauważyć, że samo skompresowanie logo witryny najczęściej nie działa. Na emblematach umieszczanych w postaci logo danego zasobu często widoczne są różne elementy, które nie zawsze będą poprawnie wyeksponowane w miniaturowej formie. Lepiej od razu zrezygnować z takiego przedsięwzięcia.
Oczywiście rozmiar faviconu nie pozwala mówić o prostym wstawieniu tam napisu. W tej rozdzielczości każdy tekst będzie po prostu niewidoczny. Musimy opracować nową ikonę, która odda styl strony. Aby znaleźć rozwiązania, ponownie przejdźmy do największych witryn.
Wiele osób używa stylizowanej pierwszej litery nazwy usługi jako favikony. Tak np. Bing, Yahoo, Yandex, Wikipedia, Google. Jest inne podejście - jeśli masz krótką nazwę witryny, możesz ustawić ją jako tło swojej ikony. Aby rozmiar faviconu (w pikselach sięga, powtarzam, 16 na 16 pikseli) poprawnie wyświetlał ten napis, nie powinien być dłuższy niż 3 litery. To właśnie robi na przykład usługa Aol.
Jak stworzyć faviconę?
Istnieje kilka sposobów na stworzenie ikony dla nazwy witryny. Oczywiście najłatwiej jest pracować z różnymi gotowymi rozwiązaniami. Możemy mówić o niektórych usługach lub programach, które pozwalają na stworzenie ikony z pełnoprawnego obrazu poprzez jej zmniejszenie. Polecam jednak samodzielne opracowanie takiego logo. To po pierwsze damożliwość nauczenia się czegoś; a po drugie, zapewni więcej narzędzi. Wszystko, co musisz wiedzieć, to co narysować, a także wiedzieć, jaki rozmiar powinien mieć favicon w ostatecznej wersji. Nieco później porozmawiamy o rozmiarze ikon witryny, ale na razie zauważymy pewne subtelności pracy z takimi obrazami. W szczególności, nie wspominając o rozmiarze favicon dla strony, należy doprecyzować format takiego obrazu. Jak zauważają doświadczeni projektanci, obraz musi być zapisany jako-p.webp
Możesz zapisać obraz, na przykład za pomocą Photoshopa, gdzie zostanie narysowany emblemat.
Wymiary favicon
Porozmawiajmy teraz o tym, jak duży powinien być obraz, który widzimy obok nazwy witryny w wynikach wyszukiwania. Domyślnie, jak już wspomniano, jego rozmiar to tylko 16 pikseli (z każdej strony). Jeśli jednak spróbujesz edytować ten obraz w Photoshopie, przekonasz się, jak to jest niewygodne. Dlatego zalecamy pracę z powiększonym obrazem, który w przyszłości można po prostu skompresować wzdłuż krawędzi i zapisać w wymaganym formacie.
Wieloplatformowy
Ale mówiąc o tym, jak duża powinna być favikona w Twojej witrynie, należy pamiętać o jeszcze jednej rzeczy. Nie wszystkie platformy wyświetlają obraz zasobów w ten sam sposób. Na przykład urządzenia z wyświetlaczem Retina „widzą” Twoją faviconę w rozdzielczości 32 na 32 piksele. W Safari i na nowej platformie Windows ikony te w ogóle osiągają rozmiar 64piksele.
Dlatego zalecamy zapisanie różnych wersji ikony i po prostu zapewnienie jej zmiany w przyszłości w zależności od platformy użytkownika. Kolejna ciekawostka - możesz spróbować załadować ikonę w największym formacie, licząc na to, że będzie się „kurczyła” w zależności od przeglądarki.
Zewnętrzni redaktorzy
Oczywiście dobrze jest, jeśli jesteś dobry w Photoshopie i wiesz, jaki rozmiar powinien mieć favicon i jak to osiągnąć podczas zapisywania obrazu. Jednak jest wielu początkujących, którzy po prostu nie mieli do czynienia z edytorami graficznymi tak blisko, więc nie mogą tak łatwo narysować pożądanego obrazu. Aby pomóc takim webmasterom, istnieją różne usługi, które umożliwiają automatyczne tworzenie interesującej Cię ikony. Wiele z nich jest nawet bezpłatnych, co nie wymaga od użytkownika żadnych inwestycji.
Czasami wystarczy się zarejestrować, aby pracować, ale jak rozumiesz, robi się to raz – w końcu firmy nie zmieniają tak często faviconu. Spójrz na Google, który codziennie zmienia logo, ale nie dotyka ikony.
Jak zainstalować faviconę?
Ogólnie rzecz biorąc, konfiguracja witryny w taki sposób, aby poprawnie wyświetlała potrzebny obraz, jest bardzo prosta. Wystarczy wykonać szereg prostych kroków, które pozwolą wyszukiwarkom, a także prostym przeglądarkom na odczytanie informacji.
Aby to zrobić, wynikowy obraz należy zapisać za pomocąnazwany favicon.ico i umieszczony w katalogu głównym zasobu. To wszystko, teraz Twój obraz zostanie automatycznie rozpoznany, a po pewnym czasie zostanie połączony z Twoją witryną.
Oprócz tego wiązania możesz dodać jeszcze jedną linię, która „zasugeruje”, gdzie znajduje się twoja ikona. Wygląda to tak:
Zainstaluj kod w nagłówku strony.
Wnioski
Tak więc, po przeczytaniu naszego artykułu, zorientowałeś się, jaki rozmiar powinna mieć favikona dla witryny i jaki jest. Myślę też, że zrozumiałeś, że znalezienie odpowiedniej ikony dla twojego zasobu jest koniecznością, ponieważ gra to w twoje ręce zarówno pod względem rosnącego rozpoznawalności, jak i dodatkowego wyróżnienia się wśród twoich konkurentów. Przynajmniej największe witryny robią to samo, co można traktować jako doskonały przykład. A poza tym nie wymaga to dużego wysiłku - raz zrobiwszy faviconę i poprawnie ją zainstalował na swojej stronie, możesz o niej zapomnieć na kilka następnych miesięcy.
Dlatego nie krępuj się eksperymentować, wymyśl coś nowego, spróbuj - i wszystko się ułoży!
