Favicon i obraz OG: drobne detale o dużym wpływie na kliknięcia i zaufanie

Dwa małe pliki graficzne często współdecydują o tym, czy ktoś kliknie w Twój link, czy przewinie dalej: favicon (ta maleńka ikona na karcie przeglądarki) oraz obraz OG (miniatura podglądu, która pojawia się, gdy ktoś udostępni Twój link na WhatsAppie, LinkedIn, Slacku czy Facebooku). Oba są technicznie banalne do skonfigurowania - a mimo to zaskakująco często się o nich zapomina lub robi się je byle jak. Ten artykuł wyjaśnia, dlaczego są ważne, kiedy naprawdę przynoszą efekt i jak wdrożyć je poprawnie.

Dlaczego te detale w ogóle się liczą

Ludzie podejmują decyzję o kliknięciu w ułamku sekundy. Generyczny symbol globusa na karcie przeglądarki albo zepsuty, pusty podgląd linku podświadomie sygnalizuje: tutaj ktoś się nie postarał. I odwrotnie - schludna ikona i porządny podgląd przekazują staranność i wiarygodność, czyli dokładnie te cechy, których potencjalny klient od Ciebie oczekuje.

Konkretnie te dwa elementy działają tak:

• Favicon: sprawia, że Twoja karta jest rozpoznawalna wśród wielu otwartych zakładek, pojawia się w zakładkach (ulubionych) i w historii przeglądarki, a niekiedy także w wynikach wyszukiwania Google obok Twojego adresu URL.
• Obraz OG: decyduje o tym, jak profesjonalnie wygląda Twój link w chwili, gdy ktoś go udostępni. Atrakcyjny podgląd jest w sposób mierzalny częściej klikany niż goły link bez obrazka.

Szczerze mówiąc: te elementy nie zmienią słabej strony w dobrą. Ale przy dobrej stronie niepotrzebnie zaprzepaszczają kliknięcia i zaufanie, gdy ich brakuje. Należą do podstawowej higieny każdej profesjonalnej strony internetowej.

Jak poprawnie wdrożyć favicon

Favicon to dziś coś więcej niż stary plik favicon.ico. Różne urządzenia i konteksty oczekują różnych rozmiarów. Sensowny jest niewielki zestaw:

• Wersja SVG jako skalowalna, główna ikona dla nowoczesnych przeglądarek.
• Pliki PNG w rozmiarach 32x32 i 16x16 pikseli na potrzeby karty.
• Apple Touch Icon o wymiarach 180x180 pikseli na ekran główny iPhone'ów.
• Opcjonalnie plik site.webmanifest dla urządzeń z Androidem.

Ważne, aby motyw był czytelny nawet przy 16 pikselach. Kompletne logo z napisem nigdy nie zadziała w tym rozmiarze - zamiast tego użyj wyraźnego symbolu, litery albo uproszczonego znaku graficznego o dobrym kontraście. Przetestuj go na jasnym i ciemnym tle karty.

Obraz OG, który zostaje udostępniony

Obraz OG jest osadzony w kodzie źródłowym Twojej strony jako meta tag (og:image) i odczytywany przez sieci społecznościowe. Sprawdza się:

• Format 1200x630 pikseli (proporcje około 1,91:1) - to wspólny mianownik niemal wszystkich platform.
• Bezwzględny adres URL do pliku graficznego, a nie tylko ścieżka względna, bo inaczej niektóre serwisy niczego nie wyświetlą.
• Czytelny tekst i logo z wystarczającym marginesem, ponieważ część platform przycina krawędzie.
• Dodatkowo tagi og:title oraz og:description, aby tytuł i opis podglądu były prawidłowe.

Częsta pułapka: platformy buforują podgląd. Gdy zmienisz obrazek, często nadal widzisz starą wersję. Za pomocą narzędzi takich jak Facebook Sharing Debugger czy LinkedIn Post Inspector możesz celowo odświeżyć pamięć podręczną i jednocześnie sprawdzić, czy wszystkie tagi są poprawnie rozpoznawane.

Krótki check w praktyce

Oto jak w kilka minut sprawdzisz, czy Twoja strona jest dobrze przygotowana:

• Otwórz swoją stronę w karcie przeglądarki - pojawia się Twoja własna ikona, czy szary, standardowy symbol?
• Udostępnij testowo stronę główną do samego siebie w komunikatorze - czy przychodzi kompletny podgląd z obrazem, tytułem i tekstem?
• Przyjrzyj się podstronom - najlepiej, by ważne strony miały własny, pasujący obraz OG, a nie wszędzie ten sam.
• Sprawdź podgląd na smartfonie, nie tylko na komputerze.

Kiedy nakład pracy się opłaca - a kiedy nie

Dla każdej publicznej strony, która ma pozyskiwać klientów, nakład pracy opłaca się niemal zawsze, bo jest niewielki i jednorazowy. Inaczej wygląda to w przypadku czysto wewnętrznej aplikacji albo narzędzia za logowaniem, które nigdy nie jest udostępniane - tam rozbudowany obraz OG jest po prostu zbędny. Prosty favicon i tak nigdy nie zaszkodzi.

U nas oba elementy należą do standardowego zakresu każdego projektu. Prowadzimy w produkcji siedem własnych marek - od skanera dostępności, przez portal produktowy z ponad 177 000 wpisów, aż po SaaS dla branży morskiej. Z tej bieżącej działalności wiemy, jak różnie platformy renderują podglądy i gdzie kryją się typowe pułapki związane z pamięcią podręczną i formatami. To właśnie te drobne detale ostatecznie decydują o różnicy między stroną, która sprawia profesjonalne wrażenie, a taką, która sprawia wrażenie niemal profesjonalnej.