Skocz do zawartości

Favicona - zrób ikonkę swojej strony (lista generatorów i gotowe kody)

Harry

Przez Harry,
w Webdesign

Rekomendowane odpowiedzi

Harry

Harry

Opublikowano
Opublikowano (edytowane)

Jestem początkujący jeśli chodzi o SEO i bardzo mnie zdziwiło, że pozornie taka mała rzecz jak favicona może mieć wpływ na ten czynnik. 
W takim razie przedstawiam wam 6 stron, dzięki którym można samemu zrobić sobie unikalną ikonkę też animowaną ;)
 
Co to favicon? Ikona twojej strony, np. make-cash.pl ma taką -> http://make-cash.pl/favicon.ico (lub zobacz na górze)
 
Gotową faviconę wrzuć do folderu strony swojego hostingu. Kod odpowiedzialny za wyświetlanie favicony aplikujesz między znacznik <head> </head>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="icon" href="/favicon.ico" type="image/x-icon">

 
 
Jeżeli favicona ma być ruchoma to należy wprowadzić taki kod:

<link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="TWOJA-ANIMOWANA-FAVICONA.gif" type="image/gif"> 

 
Pierwsza linijka to favikona statyczna (nieruchoma). Aktywuje się wtedy gdyby jakaś przeglądarka nie obsługuje animowanych ikonek.
Druga odpowiada już za konkretny gif, który ma być odtwarzany jako favikona.
 
Oraz cała lista (nie)potrzebnych kodów favicon wraz z opisem
 

favicon.ico - używane przez starsze wersje Internet Explorer i inne przeglądarki

 

favicon-16×16.png - wyświetlane w zakładkach / kartach

favicon-32×32.png - wyświetlane w Safari

favicon-96×96.png - wyświetlane przez Google TV

favicon-196×196.png - wyświetlane przez Android Chrome M31+

 

mstile-70×70.png  - wyświetlane przez  W8 i IE 11

mstile-144×144.png  - wyświetlane przez  W8 i IE 10

mstile-150×150.png  - wyświetlane przez  W8 i IE 11

mstile-310×310.png  - wyświetlane przez  W8 i IE 11

mstile-310×150.png  - wyświetlane przez  W8 i IE 11

 

apple-touch-icon-57×57.png - wyświetlane jako ikona na ekranie iPhone iOS6 bez ekranu Retina

apple-touch-icon-60×60.png - wyświetlane jako ikona na ekranie iPhone iOS7 bez ekranu Retina

apple-touch-icon-72×72.png - wyświetlane jako ikona na ekranie iPhone iOS6 bez ekranu Retina

apple-touch-icon-76×76.png  - wyświetlane jako ikona na ekranie iPhone iOS7 bez ekranu Retina

apple-touch-icon-114×114.png - wyświetlane jako ikona na ekranie iPhone iOS6 z ekranem Retina

apple-touch-icon-120×120.png - wyświetlane jako ikona na ekranie iPhone iOS7 z ekranem Retina

apple-touch-icon-144×144.png - wyświetlane jako ikona na ekranie iPhone iOS z ekranem Retina

apple-touch-icon-152×152.png  - wyświetlane jako ikona na ekranie iPad iOS7 z ekranem Retina

apple-touch-icon.png - wyświetlane jako domyślna ikona urządzeń Apple

apple-touch-icon-precomposed.png - wyświetlane jako domyślna ikona urządzeń Apple z zaokrąglonymi rogami 

 

 
WINDOWS 8 i INTERNET EXPLORER 11

<meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/mstile-144x144.png">

 
ANDROID

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" /><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /><link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" /><link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />

 

APPLE

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" /><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

 
 

Strony generujące favicony

To by chyba było na tyle z ciekawostek ;a

 

EDYCJA:

Dorzucam metodę użytkownika enkaps [post #3]

  • W Wordpressie można to załatwić inaczej, wrzuca się ikonkę do folderu motywu (ja dla wygody tworzę jeszcze w nim folder images). Kod w <head> wygląda wtedy tak:
<link rel="icon" type="image/png" href="<? bloginfo('template_url'); ?>/images/favicon.ico" />
  • Nie we wszystkich theme'ach to działa, wtedy zazwyczaj sprawdza się
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />
Edytowane przez Harry
  • Super 5
Kompleksowy mentoring bezpieczeństwa i anonimowości w internecie   

⭐Kompleksowy mentoring - BEZPIECZEŃSTWO I ANONIMOWOŚĆ⭐

ATTHOST.pl - Prawdopodobnie najszybszy i najlepszy hosting dla WordPress

Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut i wiele więcej!

 

 

enkaps

enkaps

Opublikowano
Opublikowano (edytowane)

Dzięki za ciekawe linki :) Jeśli chodzi o konwertowanie na ikonę, osobiście korzystam z http://convertico.com/. Dodam jeszcze, że w Wordpressie można to załatwić inaczej, wrzuca się ikonkę do folderu motywu (ja dla wygody tworzę jeszcze w nim folder images). Kod w <head> wygląda wtedy tak:

<link rel="icon" type="image/png" href="<? bloginfo('template_url'); ?>/images/favicon.ico" />

Nie we wszystkich theme'ach to działa, wtedy zazwyczaj sprawdza się

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />
Edytowane przez enkaps
Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
Tematy
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .

  I accept