czy twój blog ma niestandardową favicon? Jeśli nie, to naprawdę powinno. Dzisiaj dowiemy się, czym jest favicon, dlaczego go potrzebujesz, i wreszcie, jak utworzyć favicon na swoim blogu lub stronie internetowej.
nadal widzę mnóstwo blogów bez jednego, więc jeśli twój blog jest jednym z nich, zrób sobie przysługę i utwórz go teraz, korzystając z poniższego samouczka. Obiecuję, że to nie potrwa długo i jest to również rodzaj zabawy!
aktualizacja: 11/4/2020
ujawnienie:ten post może zawierać linki partnerskie (oznaczone*), co oznacza, że mogę otrzymać niewielką prowizję, jeśli zdecydujesz się dokonać zakupu za pomocą mojego linku. Doceniam Twoje wsparcie i nigdy nie polecę produktów, których nie stoję sam.
po pierwsze, co to jest Favicon?
Favicon, wymawiane fave-icon, jest skrótem od ikony ulubionych, która została nazwana, ponieważ pojawia się na liście zakładek witryny, innymi słowy, ulubionych witryn. Favicony to mała wersja znaku logowania, która pojawia się jako ikona karty przeglądarki, ikona zakładki lub ikona skrótu.
Favicony to szybki sposób na rozpoznanie Twojej witryny na pierwszy rzut oka. Spójrz na moje karty przeglądarki poniżej. Czy rozpoznajesz większość stron internetowych, które mam otwarte tutaj?
Dlaczego musisz utworzyć Favicon?
gdy nie przypisujesz niestandardowej ikony favicon do swojego bloga lub witryny, albo ogólna ikona, albo żadna ikona nie zostanie do niej przypisana. W najgorszym przypadku twój blog korzysta z favicon firmy hostingowej. W najlepszym przypadku każda przeglądarka przypisuje ci swoją własną rzecz: Chrome dodaje mały Globus (patrz obrazek powyżej), Safari dodaje pierwszy początkowy adres URL Twojej witryny w szarym polu (patrz obrazek poniżej), a Firefox nic nie dodaje. Tak czy inaczej, mów o nudzie!
spójrz ponownie na karty przeglądarki powyżej. Posiadanie rozpoznawalnych ikon ułatwia szybkie klikanie między stronami internetowymi, prawda? Jeśli zapiszesz witrynę w zakładkach, zobaczysz również ikonę favicon na liście zakładek. Ułatwia to szybkie znalezienie tego, czego szukasz. Pomóż czytelnikom szybko znaleźć swój blog w zakładkach lub zakładkach, włączając ikonę favicon.
założę się, że nie pomyślałeś o tym, gdzie pojawiają się favicony: jeśli masz strony internetowe, które często odwiedzasz w telefonie, zawsze możesz dodać je do ekranu głównego telefonu jako skrót. Jeśli czytelnicy uwielbiają często odwiedzać Twoją witrynę, mogą chcieć dodać do niej skrót z ekranu głównego, więc na pewno chcesz, aby mieli ładnie wyglądającą ikonę, która wyróżnia się na tle innych ikon aplikacji, które już dodali.
a tu nowa strona z Safari. Wyobraź sobie Skrót Twojej strony tutaj. Nie chcesz, aby twój blog był reprezentowany przez nudną szarą ikonę, taką jak ikona” C ” poniżej, prawda?
jak zaprojektować Favicon na swoim blogu
kilka zasad projektowania tworzenia Favicon
najpierw porozmawiajmy o najlepszych praktykach projektowania favicon.
- twoja favicon powinna być zauważalna i natychmiast rozpoznawalna
najlepszym sposobem, aby Twoja favicon była rozpoznawalna, jest użycie logo jako punktu wyjścia. Nawet jeśli twój blog nie jest jeszcze super sławny, to w porządku. Używanie spójnych elementów projektowych i motywów w całym brandingu pomoże wyróżnić się na tle innych i pomoże ludziom w ostatecznym rozpoznaniu Twojej marki.Oto kilka opcji do rozważenia podczas projektowania favicon:- twoje logo lub logomark
- prostsza odmiana Twojego logo
- symbol lub ikona reprezentująca Twoją markę
- inicjały (lub tylko pierwszy inicjał) Twojej marki – upewnij się, że styl inicjałów pasuje do projektu i stylu Twojego początkowego logo
- proste zdjęcie-ostatnio widziałem blogerów, którzy używają swoich zdjęć profilowych do tworzenia zdjęć favicon
- twoja favicon powinna używać bardzo prostego projektu
przyjrzyj się teraz zakładkom favicons Twojej przeglądarki. Co zauważyłeś? Są malutkie! Typowa favicon jest wyświetlana w rozdzielczości 16 x 16 pikseli. Z tego powodu ważne jest, aby upewnić się, że używasz bardzo uproszczonej wersji swojego logo lub elementu brandingowego. Szczegółowa i rozbudowana grafika nie skaluje się dobrze przy tak małym rozmiarze. Najprawdopodobniej będą wyglądać jak zamazany bałagan. - upewnij się, że favicon dobrze kontrastuje z jasnym i ciemnym tłem
w zależności od preferencji czytelników, ich karty przeglądarki mogą być białe, czarne, jasne lub ciemnoszare. Z tego powodu warto utworzyć ikonę favicon z kolorami, które dobrze kontrastują zarówno na jasnym, jak i ciemnym tle.Niektóre favicony mają przezroczyste tło i działają, ponieważ ich kolory dobrze kontrastują na każdym tle. Jeśli grafika jest zbyt jasna lub zbyt ciemna, może pomóc dodanie jednolitego kolorowego koła lub kwadratu za grafiką lub logo, aby wyróżnić się i być czytelnym na dowolnej kolorowej karcie. - spójrz na karty przeglądarki, aby uzyskać inspirację
kliknij w Internecie i spójrz na favicony używane na Twoich ulubionych stronach internetowych. Zwróć uwagę, czy będą działać na jasnym lub ciemnym tle. Czy grafika ma przezroczyste tło, czy jest na kolorowym kwadracie lub okręgu?
Inspiracja Faviconem
Favicony wykorzystujące przezroczystość
zauważ, jak te ikony mogą się wyróżniać na ciemnym lub jasnym tle, z wyjątkiem ostatniego, ” Powiedz TAK. Ten powinien być prawdopodobnie umieszczony na białym kwadracie. Trudno powiedzieć, ale czwarta ikona, kwiat lotosu, ma bardzo cienki czarny zarys. W ten sposób możesz łatwo go zobaczyć,nawet jeśli jest wyświetlany na jasnych kartach.
Favicony używające kolorowego tła
te favicony zostały zaprojektowane z kwadratowym lub zaokrąglonym kwadratowym tłem, aby zapewnić, że są wyraźnie widoczne zarówno na ciemnych, jak i jasnych kartach.
Favicony używające inicjałów
niektóre z tych ikon inicjałów używają kolorowego tła, niektóre używają przezroczystego. Tak czy inaczej, upewnij się, że jest czytelny.
Favicons używanie zdjęcia profilowego
używanie zdjęcia profilowego wydaje się być nowym trendem, który się chwyta. Jeśli przejdziesz tę trasę, upewnij się, że używasz tego samego zdjęcia profilowego we wszystkich profilach online, aby było natychmiast rozpoznawalne.
Jak utworzyć Favicon na swoim blogu
Utwórz plik Favicon krok po kroku
- Utwórz grafikę w edytorze obrazów
za pomocą edytora obrazów, takiego jak Photoshop (Zarejestruj się za darmo)*, Pixlr, BeFunky lub Canva,* Utwórz plik favicon o rozdzielczości 512 x 512 pikseli. Mimo, że jest wyświetlany tylko 16×16 w zakładkach przeglądarki, będzie również wyświetlany w większych rozmiarach w niektórych innych aplikacjach, o których wspomniałem powyżej. - Wyświetl podgląd ikony ulubionych w małym rozmiarze
jeśli skończyłeś tworzyć graficzną ikonę ulubionych, pomniejsz obraz, aż grafika stanie się malutka, mniej więcej w rozmiarze faviconów widocznych w przeglądarce. Czy jest jeszcze czytelny? Czy to ma sens? Jeśli tak, świetnie, przejdź do następnego kroku. - Zapisz plik
najpierw zapisz grafikę jako edytowalny plik w programie, aby móc wrócić i dostosować ją w razie potrzeby.Następnie zapisz go jako plik PNG. - Generuj ikonę Favicon.plik ICO
użyj generatora favicon, aby przekonwertować plik PNG na plik ICO. Ten krok jest konieczny, ponieważ niektóre przeglądarki będą odczytywać tylko pliki ICO.
alternatywy do projektowania własnego od podstaw
jeśli chcesz szybko i łatwo utworzyć tekst lub inicjały favicon, użyj generatora favicon tekst > ICO. Szybko stworzyłem ten dla DYOBA:
możesz również użyć generatora Emoji > ICO favicon, jeśli naprawdę chcesz sobie ułatwić. 
na koniec dodaj nową ikonę Favicon na swoim blogu lub stronie internetowej
WordPress
najprostszym sposobem na dodanie ikony favicon na własnym blogu WordPress jest zalogowanie się do Pulpitu nawigacyjnego. Następnie przejdź do Wygląd > Dostosuj, a następnie kliknij kartę tożsamość witryny. W sekcji Ikona witryny wybierz nową ikonę favicon.plik ico do przesłania.
i gotowe, sprawdź to w swojej przeglądarce! Pamiętaj, że może być konieczne odświeżenie kilka razy i / lub wyczyszczenie pamięci podręcznej w przeglądarce, zanim się pojawi.
jak dodać favicon do WordPress.com blog.
Squarespace
bardzo łatwo jest dodać favicon do Squarespace.
Blogger
Zaloguj się do swojego bloga i kliknij Ustawienia w lewej kolumnie. Następnie kliknij ikonę Favicon w sekcji Basic. Następnie prześlij swoją favicon.plik ico, Zapisz i bum!
Przetestuj swoją nową ikonę Favicon
jeśli chcesz sprawdzić, jak wygląda twoja favicon na różnych platformach i Ustawieniach, użyj tego kontrolera Favicon. Jeśli chcesz edytować sposób, w jaki ikony wyglądają na dowolnej platformie, na przykład na iOS (iPhone), możesz użyć generatora, aby zoptymalizować je dla każdego ustawienia. Następnie postępuj zgodnie z instrukcjami, aby dodać je wszystkie do swojego bloga.
właśnie nauczyłeś się tworzyć Favicon
Gratulacje! Projektując własnego bloga, chcesz mieć pewność, że nie pominiesz żadnych szczegółów, nawet tych najmniejszych. Dodanie niestandardowej ikony favicon nie tylko pomaga czytelnikom szybko zlokalizować twój blog na swoich kartach lub zakładkach, ale pokazuje, że zależy ci na zachowaniu spójności marki.
teraz twoja kolej
Daj mi znać w komentarzach, jeśli masz jakiekolwiek pytania dotyczące tworzenia favicon lub jeśli potrzebujesz pomocy w identyfikacji typu favicon do utworzenia dla Twojej marki. W przeciwnym razie podziel się z nami swoją favicon w komentarzach!
a jeśli podobał Ci się ten tutorial, podziel się nim, klikając jedną z ikon pod moim podpisem!
ten post został pierwotnie opublikowany 14.08.2013 i zaktualizowany 2.11.2015, następnie ponownie 11.4.2020.
Hej przyjacielu, chcesz darmowe rzeczy DIY design?
mam dla Ciebie całą bibliotekę darmowych towarów! Dołącz do ponad 10 000 innych i uzyskaj natychmiastowy dostęp!