Favicon (skrót od Favorites Icon, nazywany również ikoną witryny, ikoną zakładki) to mała ikona wyświetlana na karcie przeglądarki, pasku zakładek, w historii, na pasku adresu. Jest to jeden z podstawowych elementów identyfikacji marki witryny. Witryna bez favicon wyświetla pustą ikonę dokumentu wśród wielu kart, co wygląda nieprofesjonalnie; dobrze zaprojektowany favicon pozwala użytkownikom szybko znaleźć Twoją witrynę wśród stosu kart, jest niezbędnym podstawowym zasobem przed uruchomieniem witryny.
Nowoczesne witryny potrzebują czegoś więcej niż tylko jednego favicon.ico. Wraz z rozpowszechnieniem się urządzeń mobilnych i rozwojem PWA (progresywnych aplikacji internetowych), kompletny pakiet ikon witryny musi zawierać wiele rozmiarów i formatów: tradycyjny favicon.ico dla kompatybilności ze starymi przeglądarkami, 16/32 PNG dla zwykłych kart przeglądarki i zakładek, apple-touch-icon 180×180 dla opcji «Dodaj do ekranu głównego» użytkowników iPhone/iPad, 192/512 PNG dla pulpitu Android i ekranu startowego PWA, oraz site.webmanifest informujący przeglądarkę o lokalizacji tych ikon i kolorze motywu. Ręczne tworzenie wszystkich tych rozmiarów i pisanie poprawnego kodu odwołań HTML jest kłopotliwe dla developerów bez doświadczenia w projektowaniu.
Tekstowy favicon to najszybszy sposób: większość osobistych blogów, projektów open source, systemów wewnętrznych w rzeczywistości nie potrzebuje złożonego projektu logo. Prosta ikona tekstowa wykonana za pomocą pierwszej litery marki (np. G dla Google, F dla Facebook) w kolorze marki daje bardzo dobry efekt. Narzędzie oferuje 8 popularnych czcionek systemowych, regulację rozmiaru, dostosowywanie kolorów, bez otwierania Photoshopa/Figmy, w minutę możesz stworzyć profesjonalny favicon.
Emoji favicon to popularny w ostatnich latach prosty schemat: Emoji same w sobie są małymi ikonami zaprojektowanymi przez projektantów, mają wyraziste kolory i wysoką rozpoznawalność. Użycie odpowiedniego Emoji (np. rakieta 🚀 oznaczająca szybkość, żarówka 💡 oznaczająca kreatywność, ogień 🔥 oznaczający popularność) jako favicon w osobistych projektach, prototypach, witrynach z dokumentacją jest zabawne i oszczędza czas, znacznie lepsze niż pusta ikona, a dodatkowo ma spójność międzyplatformową (chociaż renderowanie nieznacznie się różni między systemami).
Tryb obrazu nadaje się do scenariuszy z istniejącym logo: jeśli masz już obraz logo marki, po przesłaniu narzędzie automatycznie przycina go na kwadratowo wyśrodkowany i generuje wszystkie potrzebne rozmiary. Należy pamiętać, że przy małych rozmiarach ikona ma tylko 16 pikseli szerokości, złożone logo po zmniejszeniu rozmyje się w plamę, dlatego favicon zazwyczaj nie jest pełną wersją logo, a częścią symbolu/znaku logo — na przykład znak Nike, jabłko Apple, M McDonald's, proste kształty pozostają wyraźne i czytelne nawet przy małych rozmiarach.
Dlaczego generować lokalnie bez wysyłania na serwer? Po pierwsze, prywatność: nieopublikowane logo marki, projekty klientów są wrażliwymi zasobami, wysyłanie ich na serwer narzędzia trzeciego wiąże się z ryzykiem wycieku; po drugie, szybkość: rysowanie w lokalnym Canvas jest natychmiastowe, nie trzeba czekać na wysyłanie i pobieranie; po trzecie, niezawodność: nie wymaga sieci, działa również w środowiskach intranetowych. Wszystkie przetwarzania obrazów używają natywnego API Canvas przeglądarki, pakowanie ZIP używa czysto JavaScriptowej biblioteki JSZip, nie wymaga usługi backendowej.
Trzy kształty (kwadrat, zaokrąglony, okrągły) są po to, aby dopasować się do różnych stylów platform: Windows tradycyjnie używa kwadratowych ikon, iOS/iPadOS używa zaokrąglonych prostokątów (Squircle), Android i niektóre witryny używają okrągłych ikon. 22% zaokrąglenie w narzędziu to dość uniwersalny rozmiar zaokrąglenia, zbliżony do nowoczesnego stylu UI. Uwaga: przeglądarki podczas faktycznego wyświetlania favicon zazwyczaj nie przycinają ikony na okrągło (poza niektórymi przeglądarkami), okrągły kształt głównie wpływa na wygląd po dodaniu do pulpitu telefonu.
Należy zaznaczyć: ① efekt favicon w wysokim stopniu zależy od prostoty projektu, złożone wzory na 16×16 koniecznie będą rozmyte, zaleca się używanie prostego tekstu/kształtu/Emoji; ② efekt renderowania Emoji zależy od czcionki systemu operacyjnego, Emoji widziane na różnych systemach mogą się nieznacznie różnić; ③ plik ICO jest generowany na podstawie osadzonego PNG 32×32, spełnia większość wymagań kompatybilności; ④ przezroczyste tło w niektórych starych przeglądarkach może wyświetlać się jako czarne lub białe tło, zaleca się używanie koloru tła dla głównej witryny dla większej niezawodności.
