Favicon po nowemu

Dawno już porządnie nie aktualizowałem moich witryn, codziennie ogarniać wszystkie trudno, a tak trochę się ich zebrało, jak i technologie idą do przodu. Co było aktualne cztery czy osiem lat temu, dziś może trącić myszką albo nie działać, dopóki nie zostanie zaktualizowane. Żeby tylko wspomnieć ile technologii w specyfikacji, kodzie, API i URL-ach, pojawiało się i zmieniało przez lata na Facebooku, Google, WordPress, Wikipedii, PHP, SQL, HTML, CSS, AJAX, JSON, jQuery, Adobe Flash, Java, Atom / RSS… Przez kilka lat pojawiły się i stały się coraz bardziej popularne różnorodne nowe przeglądarki (Apple Safari, Google Chrome…), urządzenia (tablety, smartfony, telewizory) i systemy (Android, iOS, Windows Phone), wymagające responsywnej szaty graficznej o różnych rozmiarach. O obsłudze kodowania znaków czy urwanych linkach nie wspomnę. Powoli więc kontynuuję ogarnianie.

Tym razem naprawiłem ikony witryn widoczne na tytule karty / okna lub w ulubionych / zakładkach / łączach. Sprawdzając statystyki z logów serwera dowiedziałem się, że nie wystarczy już proste umieszczenie jednego pliku favicon.ico w głównej lokalizacji (root), ani nawet jego wskazanie w kodzie HTML (znacznik / tag w sekcji head):

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

bowiem najwyraźniej tysiące przeglądarek internetowych odpytuje i żąda kolejnych plików, choć niezadeklarowanych kodem źródłowym. Wobec nieodnalezienia, zwracają kody błędu HTTP 404. „Nagle” okazuje się, że powinienem był sam stworzyć pliki: apple-touch-icon.png, apple-touch-icon-precomposed, android-chrome, mstile, favicon.gif… W dodatku oprócz podstawowego pliku, muszą być jeszcze kwadratowe, prostokątne lub zaokrąglone wersje o różnych rozmiarach w pikselach: 16, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 144, 150, 152, 180, 192, 310×150 i 310×310 px (np. apple-touch-icon-152×152.png). Zazwyczaj są to pliki PNG. Nie wystarczy dotychczasowy tag, są i nowe metody wskazywania tych plików:

<link rel=”…” sizes=”AxA” href=”…” type=”…”>
<meta name=”msapplication-…” content=”…”>

Gdyby nasze CMS-y domyślnie zawsze same obsługiwały (tworzyły) wszystkie możliwe ikony, byłoby super, tak jednak nie zawsze jest. Co dopiero, gdy webmaster napisał witrynę sam w kodzie HTML bez CMS. Ręcznie ogarnąć tego się nie da lub nie ma takiej potrzeby. Z pomocą przyszedł mi Favicon Generator.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *