Favicon to fajny mały obrazek obok paska adresu w przeglądarce. To ona wyróżnia Twoją witrynę na karcie zakładek i może służyć do zwiększania świadomości marki. Jeśli masz witrynę, ale nigdy nie rozważałeś utworzenia favikony, powinieneś przemyśleć swoją decyzję. Coraz częściej twórcy oprogramowania wykorzystują favikony do różnych aspektów swoich aplikacji, takich jak ikony na ekranie głównym na tabletach. Na szczęście projektowanie, tworzenie i wdrażanie favicon to coś, co może zrobić prawie każdy, jeśli wykona odpowiednie kroki.
Kroki
Metoda 1 z 3: Projektowanie faviconu
Krok 1. Utwórz favicon, który reprezentuje Twoją witrynę
Rodzaj strony internetowej, którą posiadasz, powinien determinować wygląd Twojej favikony. Postaraj się zaprojektować coś, co będzie pasować do wizerunku Twojej marki i będzie rozpoznawalne i zapadające w pamięć. Twoja favicon będzie pierwszą rzeczą, którą zobaczą ludzie, gdy spojrzą na karty w swojej przeglądarce, a także pojawi się w zakładkach innych osób.
- Na przykład, jeśli masz witrynę kulinarną, wybranie favikony, która ma owoce lub warzywa jako projekt, może sprawić, że będzie bardziej zapadająca w pamięć.
- Jeśli Twoja strona internetowa jest przeznaczona dla kancelarii prawnej lub firmy inwestycyjnej, najlepsza jest tradycyjna i elegancka favicon.
- Jeśli Twoja witryna jest skierowana do młodszych osób, spróbuj stworzyć zabawną i kolorową favikonę.
Krok 2. Zdecyduj, czy chcesz mieć przezroczyste tło
Jeśli nie wskażesz tła, to wypełni się ono kolorem białym, co może nie pasować do Twojej marki. Przezroczyste tło przyjmie kolor przeglądarki danej osoby i w niektórych przypadkach będzie wyglądało bardziej opływowo. W innych przypadkach posiadanie koloru tła spowoduje, że litery lub grafika na pierwszym planie wyskoczą. Zdecyduj, co będzie najlepsze dla twojego projektu i pamiętaj o tym podczas jego tworzenia.
Najbardziej podstawowa favikona to kwadrat 16x16 i ma kolor tła
Krok 3. Utwórz favicon, który jest łatwy do odczytania
Ponieważ obraz favicon, którego będziesz używać, jest niewielki, ważne jest, aby Twoja marka była widoczna bez dezorientowania odwiedzających. Trudna do odczytania favikona pozostawia negatywne wrażenie i może wywołać w umyśle odwiedzających pytania o jakość pracy, którą możesz wykonać. Nadmiernie złożone obrazy i logo nie wyglądają dobrze po zmniejszeniu do 16x16 lub 32x32 pikseli.
- Jeśli Twoje istniejące logo jest zbyt skomplikowane, możesz użyć taktyk, aby je uprościć, aby było rozpoznawalne w rozmiarze favicon. Używaj inicjałów zamiast całej nazwy firmy lub zaprojektuj prostą ikonę zamiast obrazka.
- Jeśli masz już proste logo, możesz zmniejszyć obraz i ustawić go jako favicon. Może być konieczna zmiana go przed konwersją do pliku ikony.
- Możesz także użyć obrazu obiektu, który opisuje ogólny motyw witryny.
Krok 4. Stwórz estetyczną favicon
Struktura twojej favikony nazywa się jej formą. Favicony zazwyczaj przybierają kształty, jak koło lub kwadrat. Kiedy projektujesz favicon, generalnie lepiej jest, jeśli jest w stanie zmieścić się w jednym z tych podstawowych formularzy, ponieważ kształty swobodne często mogą się mylić lub mylić przy 16x16 pikselach. Innym ważnym aspektem twojego projektu jest estetyczna jedność. Estetyczna jedność obejmuje szczegóły i rozmiary różnych elementów w Twojej faviconie oraz sposób, w jaki Twój favicon jest zrównoważony. Im bardziej jednolite detale, tym bardziej spójnie będzie wyglądać favicon. Na przykład używanie różnych typów lub rozmiarów czcionek w faviconie nie jest przyjemne dla oka i może sprawić, że favicon będzie wyglądać na zdezorientowany lub niechlujny.
- Innym przykładem jedności estetycznej jest zachowanie zaokrąglonych narożników w całym faviconie.
- Dobrym przykładem ikony, która zmieniła formę, jest favicon Google. Zmienił się z kwadratu w koło.
Krok 5. Używaj kolorów spójnych z Twoją marką
Tworząc favicon, powinieneś utworzyć ją w 8-bitowej (256 kolorach) lub 24-bitowej (16,7 miliona kolorów) głębi kolorów, ponieważ będzie to działać w nowoczesnych przeglądarkach. Upewnij się, że wybrane przez Ciebie kolory można znaleźć w innym miejscu w Twojej witrynie lub są w jakiś sposób powiązane z Twoją marką. Favikona z kolorami, których nie ma na Twojej stronie internetowej, logo lub aplikacjach, nie będzie zapadać w pamięć, a ludzie nie będą mogli skojarzyć ikony z Twoją marką.
- Niektóre kreatywne zastosowania koloru favicon obejmują GitHub, który zmienia kolory w zależności od stanu systemu i Trello, który zmienia się w zależności od koloru tła.
- Najczęstsze kolory używane w favicons to czerwony i niebieski.
Krok 6. Zastanów się nad odbiorcami podczas projektowania favikony
Poza identyfikacją Twojej marki, Twoja favicon musi wyglądać atrakcyjnie dla odwiedzających. Ludzie o różnych gustach, zainteresowaniach i normach społecznych będą patrzeć na inną ikonologię z różnych perspektyw. Różnice kulturowe istnieją w naszym społeczeństwie i mogą dezorientować lub odpychać publiczność, którą próbujesz przyciągnąć.
Na przykład Mac Os X używa pieczątki, która jest uniwersalnym symbolem poczty. Korzystanie ze skrzynki pocztowej nie byłoby tak efektywne, ponieważ skrzynki pocztowe różnią się w różnych częściach świata
Krok 7. Uzyskaj opinię przyjaciół i współpracowników
Chociaż nie jest to niezwykle intensywne graficznie, favicon jest ważną częścią Twojej marki. Pomyśl na przykład o swoich ulubionych witrynach, takich jak Twitter, Gmail, Facebook lub wikiHow, io tym, jak bardzo kojarzysz favicon z marką. Jeśli nie masz dobrego oka do projektowania lub nie wiesz, jaki projekt powinieneś mieć dla swojej witryny, skonsultuj się ze znajomymi, którzy mają oko do projektowania lub pracują w projektowaniu graficznym.
- Zapytaj w swojej sieci znajomych, czy ktoś może udzielić bezpłatnych porad projektowych.
- Większe firmy mają wewnętrznych grafików, którzy mogą stworzyć wizerunek favicon.
Metoda 2 z 3: Tworzenie faviconu
Krok 1. Użyj oprogramowania do edycji zdjęć, aby utworzyć favicon
Możesz użyć oprogramowania do edycji zdjęć, takiego jak Adobe Photoshop lub Illustrator, aby utworzyć obraz dla swojej favicon. Te aplikacje umożliwiają również zmianę rozmiaru i eksport obrazu w odpowiednim formacie. Niektóre programy umożliwiają ręczne tworzenie favicon.
- Istnieją również programy do edycji dla favicon, które można znaleźć w Internecie.
- Użyj wyszukiwarki i wpisz „edytory favicon”.
- Ustaw rozmiar płótna na 512 x 512 pikseli, ponieważ liczba ta rozkłada się na najbardziej odpowiednie rozmiary favicon i jest nadal wystarczająco duża, aby można było efektywnie edytować.
- Inne popularne oprogramowanie do edycji zdjęć obejmuje GIMP, PhotoScape i Paint. NET.
- Podczas korzystania z tego oprogramowania nie będzie można bezpośrednio edytować plików.ico, ale możesz użyć plików.png,-j.webp" />
Krok 2. Zmień rozmiar i zapisz favicon
32x32 px to rozmiar elementów pulpitu Windows, podczas gdy 16x16 px to rozmiar favicon w zakładce przeglądarki. Po utworzeniu favikony w większym formacie ważne jest, aby zmniejszyć jej rozmiar, aby zobaczyć, jak będzie wyglądać w przeglądarkach użytkowników. Jeśli jest nieczytelny lub nie jest estetyczny, zacznij od początku swój oryginalny projekt. Pomyśl o platformach, na których najprawdopodobniej będzie używana Twoja witryna lub aplikacja, a następnie utwórz favikonę, która obejmie wszystkie Twoje bazy.
- Należy zauważyć, że różne urządzenia i oprogramowanie wykorzystują różne rozmiary favicon.
- Niektóre inne rozmiary favicon to 57x57px dla standardowego ekranu głównego iOS, 72x72px dla iPada, 96x96px dla Google TV, 128x128px dla Chrome Web Store i 195x195px dla Opera Speed Dial.
- Jeśli chcesz objąć wszystkie swoje bazy, możesz stworzyć wersje swojej favicon w każdym z tych rozmiarów.
- Zapisz osobne wersje swojej favikony, aby nie stracić wykonanej pracy.
Krok 3. Połącz swoje pliki za pomocą konwertera
Wspaniałą rzeczą w plikach.ico jest to, że możesz połączyć więcej niż jeden plik, aby go utworzyć. Jest to przydatne, ponieważ różne przeglądarki i oprogramowanie będą chciały mieć inną faviconę. Aby upewnić się, że favicon wygląda dobrze na wszystkich platformach, przekonwertuj pliki za pomocą konwertera online. Wpisz „konwerter ikon” w swojej ulubionej wyszukiwarce, aby znaleźć bezpłatne aplikacje online do tego celu. Zapisz scalony plik jako „favicon.ico”.
- Możesz także użyć programu takiego jak GIMP, który ma wbudowaną funkcję, lub pobrać wtyczkę o nazwie ICO FORMAT do Adobe Photoshop.
- Utwórz nowy folder, aby móc przechowywać nowe favicony lub prace w toku.
- Wpisz „.ico konwerter” lub „generator favicon” w wyszukiwarce, aby znaleźć różne narzędzia, których możesz użyć.
Metoda 3 z 3: Implementacja Favicon
Krok 1. Prześlij favicon, jeśli używasz edytora stron internetowych
Wiele edytorów witryn ma wbudowany formularz, który umożliwia automatyczne przesyłanie favicon do witryny. Jeśli używasz edytora witryny, który ma to wbudowane, poszukaj opcji „Prześlij favicon” lub „Dodaj favicon” w menu ustawień witryny. Wybierz plik favicon.ico i prześlij go do swojej witryny.
Jeśli nie możesz znaleźć miejsca, w którym możesz przesłać favicon w edytorze swojej witryny, musisz to zrobić ręcznie
Krok 2. Prześlij plik do katalogu głównego witryny
Jeśli Twoja witryna obsługuje protokół przesyłania plików lub FTP, możesz użyć swojego klienta FTP, aby przesłać nowy plik favicon.icon do katalogu głównego (indeks). Jeśli nie, musisz przejść do strony hostów internetowych i ręcznie przesłać obraz. Pamiętaj, aby zastąpić istniejący plik favicon.ico nowym plikiem.
Krok 3. Dodaj plik do nagłówka
Znajdź miejsce, w którym możesz uzyskać dostęp do plików PHP i CSS swojej witryny. Przejdź do pliku header.php witryny i edytuj go. Pod typem tagu „
-
”. Powinno to połączyć Twoją witrynę z favicon.
Ponieważ używasz PHP, oznacza to, że wszystkie witryny używające twojego pliku nagłówkowego będą teraz miały tę samą faviconę
Stwórz własną ikonę favicon Krok 14 Krok 4. Odśwież przeglądarkę
Po zakończeniu przesyłania favicon możesz odświeżyć przeglądarkę, aby zobaczyć nowy obraz obok paska adresu. Aby przejść bezpośrednio do obrazu zaktualizowanej favicon, wpisz „https://www.twojadomena.com/favicon.ico”.
- Jeśli favikona nie pojawia się początkowo, konieczne może być zresetowanie pamięci podręcznej przeglądarki.
- Aby wyczyścić pamięć podręczną, przejdź do ustawień przeglądarki i usuń tymczasowe pliki internetowe, pliki cookie i historię.
