Jak prosto wygenerować Favicon

Favicon (ang. favorites icon) to taka ikonka, która symbolizuje aplikację webową. Pojawia się wtedy, gdy zamiast nazwy aplikacji trzeba pokazać obrazek. W przeglądarce pojawia się obok lub zamiast tytułu strony.

Taka mała rzecz a pomaga i cieszy. Jest to, zdaje się, konieczność dla poważnych stron, ale również dla mniej poważnych projektów, BackEnd developer mógłby sobie na to pozwolić.

favicons in crowded browser

Przykład zatłoczonego paska przeglądarki – ostatnie dwie strony nie zadbały o ikonkę i nie wyróżniają się z tłumu.

Zrobienie po swojemu

  1. przepytuję google o np. „book icon” lub „book” i wybieram, żeby wyszukiwał w „grafika”
  2. czasem coś dorabiam dorysuję literkę itp
  3. przerabiam na *.png z przezroczystością na stonie http://www.online-image-editor.com/ korzystając z opisu
  4. resize/crop do wymaganych 32×32 pikseli (robię prawie tylko stronki, rzadko na inne urządzenia)
  5. wrzucam favicon.png do katalogu głównego aplikacji

Favicon generator

Przedostatni krok wykonuję ostatnio w Real Favicon Generator. Ten tool wykonuje ikonki na wiele platform (na dziś 23 ikonki) w odpowiednich rozdzielczościach oraz generuje gotowy html do umieszczenia na strone. Umożliwia też sprawdzenie, czy strona, którą opublikowaliśmy w sieci, ma dobrze to wszystko ustawione – Favicon checker. Jeśli czegoś brakuje to jest fajny FAQ tłumaczący co jak i dlaczego nie działa.

Skorzystanie z gotowców

Można też skorzystać w wielu stron oferujących zestawy ikonek. Na przykład http://www.flaticon.com

Odświeżanie favicon

Favicon na pewno będzie cachowane przez przeglądarkę. Najprostszym sposobem wymuszenia odświeżenia (jeśli zmieniliśmy ikonkę, to nie zmusimy użytkowników do czyszczenia cache) jest dodanie jakiegoś query stringa:

<link rel="shortcut icon" href="favicon.png?v=2" />
Reklamy
Ten wpis został opublikowany w kategorii Programowanie i oznaczony tagami , , . Dodaj zakładkę do bezpośredniego odnośnika.