W artykule:
- W jaki sposób Twoja strona internetowa WordPress może na pierwszy rzut oka stworzyć silną identyfikację wizualną? Jak sprawić, by Twoje strony i posty wyróżniały się w morzu kart? Jak egzekwować spójność marki na wszystkich urządzeniach?
- Favicons-co, gdzie i dlaczego?
- Najlepsze praktyki i Formaty obrazów
- Jak utworzyć Favicon
- Jak dodać Favicon
W jaki sposób Twoja strona internetowa WordPress może na pierwszy rzut oka stworzyć silną identyfikację wizualną? Jak sprawić, by Twoje strony i posty wyróżniały się w morzu kart? Jak egzekwować spójność marki na wszystkich urządzeniach?
Wszystkie te pytania są szeroko zakrojone, ale poprawne skonfigurowanie faviconów to doskonały krok we właściwym kierunku dla wszystkich trzech.
Favicony to prosty sposób na stworzenie spójnej identyfikacji wizualnej Twojej witryny, poprawę user experience i wzmocnienie Twojej marki.
W tym artykule omówimy wszystko, co musisz wiedzieć o faviconach – czym są, gdzie je umieszczasz i jak mogą pomóc Twojej witrynie.
Zapoznamy się z najlepszymi praktykami tworzenia tych kluczowych obrazów, omówimy zalecane formaty i zakończymy mini-tutorialem dotyczącym wdrażania faviconów w WordPress 4.3 i poprzednich wersjach.
Zacznijmy od podstaw; możesz pominąć, jeśli już znasz favicony.
Favicons-co, gdzie i dlaczego?
Favicony – skrót od ulubionej ikony – to małe obrazy zwykle wyświetlane w karcie przeglądarki obok tytułu strony witryny. Znajdują się one również na listach zakładek, ulubionych i historii w obu przeglądarkach i urządzeniach z Ekranem dotykowym i zwykle mają rozmiar 16×16 lub 32×32 pikseli.
Favicony odgrywają kluczową rolę w brandingu Twojej witryny. Gdy odwiedzający ma wiele kart otwartych w przeglądarce, te małe ikony pomagają wyróżnić witrynę i dają użytkownikom szybki sposób na natychmiastowy powrót do treści.
Włączenie faviconu jest zarówno uprzejmością dla użytkownika, jak i małym kawałkiem nieruchomości ekranowej, który ma duży cios.
Najlepsze praktyki i Formaty obrazów
Favicony istnieją od pierwszych dni Internetu i zadebiutowały oficjalnie wraz z wydaniem Internet Explorer 5 firmy Microsoft w 1999 roku.
World Wide Web Consortium (WC3) ustandaryzowało je w ciągu kilku miesięcy, a twórcy stron internetowych od tego czasu umieszczają obrazy favicon w katalogu głównym swoich domen internetowych.
Oprócz tradycyjnych plików ICO, większość głównych przeglądarek obsługuje obecnie również Formaty obrazów PNG i GIF dla faviconów, a także bardzo delikatną obsługę plików SVG.
Szybko omówmy dwa najczęściej obsługiwane formaty.
Plik obrazu ICO
Format pliku ICO pozostaje najczęściej obsługiwanym typem obrazu favicon i najlepszą praktyką jest dołączenie wersji ICO, nawet jeśli używasz PNGs.
Powody tego są proste. Po pierwsze, favicony GIF i PNG nie są obsługiwane przez niektóre starsze przeglądarki. Po drugie, lokalizacja, w której przeglądarki domyślnie szukają ikony favicon, jest bardzo zróżnicowana i istnieje ryzyko bezużyteczności 404 Nie Znaleziono błędy dziennika są zwracane, jeśli domyślny favicon.ico nie ma go.
Format pliku obrazu ICO pozwala na wiele obrazów i rozdzielczości w jednym pliku. Możesz myśleć o tym jak o pojemniku na serię obrazów.
Oznacza to, że możesz zapisać favicon w różnych rozmiarach, np. 16×16, 32×32 i 48×48 (zgodnie z zaleceniami firmy Microsoft), a przeglądarka określi odpowiedni rozmiar do wyświetlenia.
Na przykład obraz 16×16 będzie dobrze działał na karcie, ale nie tak dobrze, gdy zostanie dodany do paska zadań lub pulpitu.
Plik obrazu PNG
Favicony można również zapisać w formacie PNG, a obsługa przeglądarki dla tego formatu jest dość obszerna w dzisiejszych czasach, a PNGs jest wspierany przez W3C.
Jedną z głównych zalet korzystania z plików PNG jest to, że są one zasadniczo łatwiejsze do tworzenia przy użyciu standardowych narzędzi do projektowania graficznego, takich jak Photoshop, a także oferują wyrafinowane opcje przezroczystości.
Format pliku obrazu ICO obsługuje również 8-bitową przezroczystość kanału alfa, ale znalezienie dobrych narzędzi do tworzenia może być obowiązkiem.
Którego Z Nich Powinieneś Użyć?
Krótka odpowiedź brzmi: obie. Możesz zadeklarować swoje preferencje favicon za pomocą tagu < link>, co oznacza, że możesz określić ikonę PNG favicon (lub favicony) w tym tagu i nadal mieć swój favicon.ico dostępny jako awaryjny w katalogu głównym witryny.
W ten sposób spełnisz wymagania większości przeglądarek dotyczące zgodności z favicon i nie otrzymasz błędu 404.
A Co Z Platformami Mobilnymi?
Smartfony i tablety są odpowiedzialne za generowanie większości ruchu internetowego w dzisiejszych czasach, więc musisz to uwzględnić.
Niestety platformy mobilne są jeszcze bardziej rozdrobnione niż przeglądarki, jeśli chodzi o rozdzielczości, rozmiary ekranu i systemy operacyjne. Po prostu nie ma jednego rozwiązania, aby rządzić nimi wszystkimi.
Jeśli chodzi o dodawanie pełnej obsługi platform mobilnych, musisz dodać PNG, ikony Apple Touch, grafikę kafelkową Windows 8 i inne, aby pokryć wszystkie bazy favicon.
Istnieje doskonały przegląd opcji favicon dla urządzeń mobilnych na CSS Tricks, Jeśli chcesz zbadać dalej. Ściągawka favicon ma również solidne pokrycie pełnego zakresu dostępnych opcji.
Aby zachować prostotę poniżej, pozostaniemy przy tworzeniu podstawowej ikony favicon.ico w tym artykule.
Zaczynajmy.
Jak utworzyć Favicon
Jeśli potrzebujesz bardzo drobnoziarnistej kontroli, zalecamy utworzenie favicon witryny w profesjonalnym programie do edycji obrazów, takim jak Adobe Photoshop lub Gimp. Kolejne kroki obejmują tworzenie ikony favicon w programie Adobe Photoshop CS6.
- Jeśli jeszcze go nie masz, Pobierz wtyczkę programu Photoshop, która pozwala zapisywać pliki w formacie obrazu ICO, takim jak trafnie nazwany Format ICO.
- W Photoshopie kliknij Plik > Nowy i utwórz nowe płótno 512 x 512 pikseli o rozdzielczości 72 ppi.
- Stwórz swoje arcydzieło na płótnie.
- Gdy twój projekt będzie gotowy, kliknij Obraz > Rozmiar Obrazu.
- Tick the Ogranicz Proporcje pole wyboru i ustaw wymiary obrazu na 16 x 16 pikseli.
- Użyj Maska Unsharp filtruj, aby twój projekt wyglądał mniej rozmazany.
- Kliknij Plik > Zapisz Jako i zapisz swój projekt jako plik ICO.
Jako przykład, oto favicon dla mojej osobistej strony internetowej w całej okazałości:
Ci z was, którzy nie są graficzni (nie martwcie się – jestem jednym z nich), mogą również użyć narzędzia online, które pomoże wam stworzyć obraz favicon. Wszystko, co musisz zrobić, to przesłać wybrany obraz do jednej z następujących stron internetowych:
- Dynamiczny Napęd-Generator Faviconów
- Favicon.cc
- Generator Faviconów
Większość z tych narzędzi online mają dodatkową zaletę, że mogą wyprowadzać pliki ICO zawierające wiele rozmiarów obrazu.
Pamiętaj, że domyślna ikonka favicon pojawiająca się na karcie przeglądarki to 16×16 pikseli. Nie rób zbyt skomplikowanego projektu, bo inaczej szczegóły na faviconie nie będą widoczne wyraźnie. Zauważysz, że favicony używane przez większość witryn – dobrym przykładem jest favicon sinusoidy WPMU DEV – są stosunkowo proste.
Gdy już masz swoją favicon, nadszedł czas, aby dodać go do WordPress.
Jak dodać Favicon
Być może już natknąłeś się na mój poprzedni mini-tutorial Jak Dodać Favicon Do Witryny WordPress tutaj na WPMU DEV. (Opublikowany w 2012 – doesn ’ t time fly!) Poniżej znajduje się nieco zaktualizowana wersja sposobu dodawania faviconów do witryny w kilku prostych krokach.
Technicznie możesz użyć wtyczek, aby to osiągnąć, ale zawsze dobrze jest wiedzieć, jak to zrobić ręcznie. Dodatkowo oszczędza to konieczności załadowania kolejnej niepotrzebnej wtyczki na swojej stronie.
Dodawanie Faviconów w WordPress 4.3
Ci z Was, którzy już zaktualizowali WordPress 4.3, mogą dodać ikonę favicon do swojej witryny, wykonując te siedem prostych kroków:
- Zaloguj się do administratora WordPress.
- Kliknij Wygląd > Dostosuj.
- Kliknij Tożsamość Strony.
- Kliknij Wybierz Plik pod gdzie jest napisane Ikona Strony.
- Po wybraniu pliku favicon kliknij przycisk Wybierz plik i prześlij.
- Twoja favicon pojawi się pod Ikona Strony nagłówek Tożsamość Strony dialog.
- Kliknij na Zapisz i opublikuj guzik.
I gotowe. Bum.
WordPress umożliwia również edycję pracy przed jej opublikowaniem, wybierając część większego obrazu, którą chcesz mieć jako favicon. Jest to przydatne, jeśli przesłany obraz jest prostokątny, a nie kwadratowy.
Jak dodać Favicon w WordPress 4.2 (i poprzednie wersje)
Osoby, które jeszcze nie uaktualniły do WordPress 4.3 (z jakiegokolwiek powodu; nie będę oceniać; -)) mogą wykonać te kroki, aby dodać favicon.
- Prześlij utworzoną ikonę favicon do katalogu głównego witryny za pomocą wybranego klienta FTP.
- Wklej poniższy kod do nagłówek.php plik uruchamianego tematu: https://gist.github.com/midoriberlin/111a3ce34672106eb620. Uwaga: będziesz musiał zmienić adres URL i rozszerzenie pliku (jeśli używasz czegoś innego niż plik PNG).
- Prześlij kopię pliku obrazu favicon do głównego folderu bieżącego motywu.
Ważne jest, aby przesłać plik obrazu favicon zarówno do katalogu głównego witryny, jak i katalogu motywu.
Łatwo zaniedbywać trzeci krok i w końcu zastanawiać się, dlaczego favicon się nie pojawił. Dodając ikonę favicon do katalogu głównego witryny, zapewniasz również, że będzie ona widoczna dla subskrybentów w ich czytnikach kanałów.
Zawijam
Favicony są zabawną funkcją i przynoszą realne korzyści użytkownikom Twojej witryny. Jak mamy nadzieję wykazać powyżej, są one również dość prostym dodatkiem do twojej witryny WordPress – szczególnie w ostatnich wersjach.
Podsumujmy niektóre z obszarów, które omówiliśmy:
- Zapewnij zarówno favicony ICO, jak i PNG, aby pokryć standardowy zakres przeglądarek.
- Zanurz się głębiej z arkuszem favicon, aby dotrzeć do szerszej gamy urządzeń mobilnych i przypadków użycia.
- Skorzystaj z narzędzi online, takich jak Favicon.cc aby efektywnie produkować wiele rozmiarów faviconów.
- Użyj funkcji ikony witryny WordPress w wersji 4.3+, aby wyeliminować problemy z instalowaniem favicon lub powrócić do bardziej tradycyjnych technik.
Masz już swoją favicon? Czy napotkałeś problemy z oglądaniem go w różnych środowiskach? Skontaktuj się z nami w komentarzach i daj nam znać.
Tagi:
