Kiedyś świat był prosty, jeden obrazek w formacie ikony (favicon.ico) wystarczał do identyfikacji strony.
Obecnie każdy system operacyjny telefonów wymaga własnych miniatur, najlepiej w kilku rozmiarach.
Jak wykazuje poniższe zestawienie prym upierdliwości wiedzie system z pod znaku jabłka który zamiast wdrożyć mechanizm skalowania ikon przekłada koszty na posiadaczy stron. Grafik zapewne policzy sobie za każdy wytworzony obrazek. Najwyraźniej według koncepcji Apple nie da się przeskalować obrazka o 3 piksele ładnie a wygląd ikony o boku 57 pikseli diametralnie się różni od wyglądu ikony o boku 60 pikseli.
Istnieje co prawda koncepcja użycia pliku typu svg jako favicony ale opinie na temat skuteczności takiego kroku są różne, zapewne w przyszłości to się sprawdzi, ale póki co to bywa różnie.
Warto podczas instalacji serwisu wdrożyć od ręki favicony gdyż jest to czynność prosta i najczęściej jednorazowa, o której łatwo później zapomnieć. Wdrożenie favicon to kolejny kroczek ku lepszemu marketingowi naszej strony, budowaniu rozpoznawalności marki itd.
Wdrażanie favicon pod różne systemy
Przykładowy element nagłówka strony zawierający linki do typowych faviconek dla różnych systemów pokazuję niżej.
Wystarczy skopiować zawartość okienka, a następnie osadzić skopiowany tekst w sekcji <head> strony i oczywiście zadbać żeby ikony znajdowały się w wskazanych katalogu pod wskazaną nazwą.
Rozwiązań jest kilka:
- jeżeli motyw pozwala na dodawanie treści w nagłówku to kopiujemy tekst w określonym przez autora motywu miejscu,
- w motywie potomnym kopiujemy tekst bezpośrednio do pliku motywu odpowiedzialnego za generowanie nagłówka strony www (zazwyczaj header.php),
- używamy wtyczki umożliwiającej dodawanie własnych treści do nagłówka lub stopki.
Nie zapomnij wgrać pliki ikon oraz manifest.json w głównym katalogu swojego serwera.
Po wykonaniu tych dwóch kroków można się cieszyć satysfakcją użytkownika mogącego sobie wybrać nasz serwis klikając w obrazującą go favikonę, oraz krótszym plikiem błędów na serwerze.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
Na szczęście dla nas istnieją serwisy internetowe które wspomagają problemie mnogości ikon. Generują one ikony we wszystkich rozmiarach i wychodzi im to całkiem zgrabnie przy dobrym pliku źródłowym. Obrazek wyróżniający w nagłówku tego artykułu pokazuje favicony wygenerowane automatycznie dla wpomoc.pl w polecanym niżej automacie.
Przydatne:
- Generator różnych rozmiarów favicon.ico
- Artykuł na temat różnych rodzajów nagłówków
- Wtyczka umożliwiająca dodawanie własnych treści, skryptów do nagłówka i stopki wordpressa.
