Prosta metoda na favicona

Tworząc nowy serwis dla pomocy technicznej pomoc.uslugi-komputerowe.eu, doszedłem do punktu utworzenia favicona i umieszczenia na stronie.

Najprostrzą metodą jest utworzenie pliku z rozszerzeniem *.ico, oraz rozmiarami np 24×24 lub 48×48. Umieszczenie na serwerze i dodanie takiego kodu w sekcji <HEAD>

<head>
<link rel="shortcut icon" href="http://nazwa-serwisu.pl/favicon.ico" type="image/x-icon">
</head>

Jednak ku mojemu zdziwieniu obecne czasy wszelkiej maści róznych technologii wymagają również różnych wersji faviconów i tak np.:

  • przeglądarki Chrome, Firefox, Edge, Opera, Safari
  • iOS Safari
  • Chrome Android
  • Windows 8, 10
  • Mac OS
  • Classic Desktop

Z pomocą przychodzi nam aplikacja https://realfavicongenerator.net/ która pozwoli nam:

Strona główna aplikacji realfavicongenerator.net
  • wygenerować favicony pod różne urządzenia
  • wygenerować kod + pliki do umieszczenia na stronie
  • sprawdzi nam kompatybilność po dodaniu faviconów
Przykładowa walidacja istniejących faviconów na stronie.