[Jak] Stwórz favicon i Apple Ikona dla Twojej witryny

Apple iPhone / iPad

Od kilku lat przywrócono favicony, które straciły na aktualności, ponieważ coraz więcej przeglądarek je obsługuje i w rzeczywistości czyni z nich bardzo wizualną część doświadczenia użytkownika. Z tych ikon korzystają również przeglądarki tabletów i smartfonów. Doprowadziło to do wzrostu znaczenia posiadania dobrej favikony. Jednak sposoby prezentowania tych ikon różnią się w zależności od klienta przeglądającego witrynę. Pulpity wymagają określonej ikony, Apple urządzenia wymagają czegoś innego, różne rozmiary również komplikują sprawę. 

 

Contents [show] [Pokazać]

Proste rozwiązanie - darmowy generator ikon online dla Apple i ikony favicon

 Iconifier.pl to proste rozwiązanie, które podając kwadratowy JPG, GIF lub PNG wygeneruje zestaw ikon o różnych rozmiarach, abyś mógł używać i wybierać te, które chcesz obsługiwać na swojej stronie. Wystarczy pobrać wygenerowane ikony i osadzić je w kodzie witryny. Możesz zintegrować te kroki z procesem projektowania stron internetowych.

Umieść ikonę(e) favicons w swojej witrynie

Po utworzeniu ikony favicon.ico za pomocą Iconifier.net powyżej i umieszczeniu jej w katalogu głównym witryny dodaj następujący kod między i Twojej witryny

Pandemia Apple Ikony

Po utworzeniu różnych ikon za pomocą powyższej strony internetowej, będziesz musiał również dołączyć nieco inny kod dla Apple Urządzenia iPhone/iPad (i ewentualnie Android). Ponownie prześlij wygenerowane pliki ikon do katalogu głównego witryny i umieść następujący kod między tagami HEAD.

<link rel=”apple-touch-icon” rozmiary=”114×114″ href=”/touch-icon-114×114.png” />

<link rel=”apple-touch-icon” rozmiary=”72×72″ href=”/touch-icon-72×72.png” />

<link rel=”apple-ikona-dotyk” href="/pl/touch-icon-iphone.png” />

Urządzenia z systemem iOS automatycznie obsłużą to w swojej przeglądarce i odpowiednio zmienią rozmiar i dodadzą pewne efekty, aby pasowały do ​​stylu urządzenia, na którym są wyświetlane.

Nawiasem mówiąc, świetnych programistów iOS i Androida nie jest łatwo zatrudnić - jeśli chcesz zatrudnić dobrego programistę aplikacji i wiesz, jak znaleźć dobrego kandydata mamy cię zakryte CollectiveRay. - pokażemy Ci wszystkie świetne miejsca do znalezienia dobrych kandydatów.

Ikony dla urządzeń z Androidem

Android zbudował na Apple dotykaj ikon, ale spodziewaj się, że ikony będą już w swojej ostatecznej wersji. Ta ostateczna wersja jest „PRECOMPOSED” i urządzenia z Androidem oczekują, że ten tag będzie na swoim miejscu. Prześlij więc nowe wersje z nieco innymi nazwami (na przykład dodając wstępnie ułożoną w nazwie), a następnie dodaj następujące znaczniki. Najważniejszą częścią jest rel=apple-dotyk-ikona-prekomponowana. Umieść pliki w katalogu głównym swojej witryny i dodaj ten kod między oraz tagi twojego html

<link rel=”apple-touch-icon-precomposed” size=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>

<link rel=”apple-touch-icon-precomposed” size=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>

<link rel=”apple-touch-icon-precomposed” href="/pl/touch-icon-iphone-precomposed.png">

Więcej szczegółów na temat faviconów można znaleźć na Wikipedii: https://en.wikipedia.org/wiki/Favicon

O autorze
David Attard
Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/
David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.
 

 

Najlepiej oceniana wtyczka do buforowania

Przyspiesz swoją witrynę 

Krok po kroku - darmowy kurs e-mailowy, jak załadować stronę internetową less niż 1 sekunda  

 

kim jesteśmy?

CollectiveRay jest prowadzony przez Davida Attarda - pracującego w niszy projektowania stron internetowych i wokół niej od ponad 12 lat, dostarczamy praktycznych wskazówek dla osób, które pracują zi na stronach internetowych. Prowadzimy również DronesBuy.net - stronę internetową dla hobbystów dronów.

David Attard

 

 

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...