Tworzenie favicon [zamknięte]

94

Jak mogę stworzyć ulubioną ikonę dla mojej strony internetowej?

html favicon

— Ry-
źródło

1

Możliwy duplikat Jak dodać ikonę zakładki przeglądarki (favicon) do strony internetowej?

— Michał Perłakowski

@Gothdo To nie jest duplikat! Ten, na który wskażesz, JEST! Ten wyprzedził go o półtora roku!

— Dov Miller,

5

Głosuję za zamknięciem tego pytania jako niezwiązanego z tematem, ponieważ nie dotyczy to programowania, ale projektowania stron internetowych.

— Kyll

@DovMiller Lepsze pytanie z lepszymi odpowiedziami to to, które powinno pozostać otwarte.

— mbomb007

101

Szukając faviconów, odkryłem, że potrzebuję więcej niż 10 rodzajów plików do pracy we wszystkich przeglądarkach i na wszystkich urządzeniach :(

Wkurzyłem się i stworzyłem własny generator favicon, który tworzy wszystkie te pliki i poprawny nagłówek HTML dla każdego z nich: faviconit.com

Mam nadzieję, że ci się spodoba.

— Eduardo Russo
źródło

14

Doskonała aplikacja. To jedna z najlepszych stron generujących favicon, jakie widziałem.

— Chris Livdahl

1

Dzięki, Chris! Cieszę się że mogę pomóc!

— Eduardo Russo

3

@EduardoRusso, to jest po prostu niesamowite - dzięki!

— davnicwil

4

Dobra robota. Działa zgodnie z oczekiwaniami.

— Dilshan

1

Działa lepiej niż oczekiwano! Drobny błąd (?): Podczas korzystania z opcji zaawansowanej ścieżka i wersja nie są zawarte w pliku browsererconfig.xml. Jednak nadal to kocham. : D

— mrjink

42

Jeśli masz już obraz logo, który chcesz przekształcić w ulubioną ikonę, możesz go przekonwertować za pomocą http://www.favicomatic.com/ . Tworzy wyraźne favicony i nie musiałem ich edytować po ich utworzeniu. Wygeneruje favicony o wymiarach 16x16 i 32x32 i cytując je: „Każdy cholerny rozmiar, sir!”. Witryna obsługuje / zachowuje również przezroczystość obecną w niektórych plikach PNG. Ponadto ich strona wygląda fajnie i jest łatwa w użyciu.

Na przykład tutaj jest logo stackoverflow: wprowadź opis obrazu tutaj

Oto niektóre z wygenerowanych ikon ulubionych:

wprowadź opis obrazu tutaj

Generują również potrzebny html:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Spojrzałem na pierwsze około 20 wyników Google i był to zdecydowanie najlepszy.

— Jared Menard
źródło

1

Jak mogę ulepszyć tę odpowiedź, aby uniknąć dalszych głosów przeciw?

— Jared Menard

3

Nie wiem Twoja odpowiedź sprawiła, że zajęło mi to pięć minut. Dzięki.

— andyb

1

niektórzy po prostu lubią głosować przeciw bez powodu. SO musi mieć przeciwko temu politykę. Przy okazji, czy naprawdę potrzebujemy wielu różnych rozmiarów, czy też 16x16 i 32x32 wystarczą, gdy strona generuje się

— Emil

Osobiście nie wiem, jaka jest najlepsza praktyka. Myślę, że na mojej stronie używamy tylko jednego. Mogą być przydatne w przypadku progresywnych aplikacji internetowych Chrome w połączeniu z plikiem manifest.json.

— Jared Menard

Znalazłem ten zasób na favicomatic.com , nazywa się „Favicon Cheat Sheet” github.com/audreyr/favicon-cheat-sheet

— Jared Menard

20

GIMP to dobry program do tego. Po prostu zapisz obraz jako PNG, a następnie dodaj

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

w <HEAD>sekcji Twojej strony.

— Stefano Borini
źródło

7

Gimp oferuje również opcję zapisania go jako favicon.ico, co oszczędziłoby kłopotów z dodaniem linku.

4

Szkoda, że stare MSIE (które nadal są dość popularne) nie akceptują PNG zamiast „właściwego” pliku w formacie ICO.

— Már Örlygsson

Aby przypiąć witryny internetowe do paska zadań, system Windows również wymaga ikony ico.

— Necriis

8

Tworzysz plik ikony 16x16, 32x32 lub 64x64. Nadaj mu nazwę favicon.ico i umieść go w katalogu głównym folderu publicznego swojej witryny.

Istnieją strony internetowe, które konwertują dla Ciebie inne formaty graficzne na .ico. to znaczy. http://tools.dynamicdrive.com/favicon/

— Jim
źródło

4

Ponadto: możesz zapisać swój plik favicon w dowolnym miejscu, jeśli dodasz <link rel="shortcut icon" href="link/to/fav.ico" />do <head>bloku swoich stron.

— Már Örlygsson

1

tools.dynamicdrive.com/favicon pozwoli również na scalenie wielu rozmiarów w jednym favico, co jest świetne

— hdorio

5

Jednym z najlepszych internetowych narzędzi favicon jest FaviconGenerator.com . Szybki, nowoczesny design, bez puchu.

— Puka X
źródło

1

FaviconGenerator.com zapewnia również dostęp do ich API z node / grunt / gulp.

— Matt

3

Jeśli chcesz tworzyć pliki .ico, możesz również użyć GIMP do tworzenia ulubionych ikon. Nowoczesne przeglądarki mogą używać zwykłych plików graficznych, ale pierwotnie myślę, że były to tylko pliki .ico. Jest to edytor obrazów typu open source, podobny do Photoshopa. Utwórz i edytuj obraz o odpowiednim rozmiarze (powiedzmy 32 x 32), spłaszcz do jednej warstwy (chyba że chcesz mieć wiele ikon w tym samym pliku) i zapisz jako .ico. Sformatuje go poprawnie, a następnie użyj Stefano, <link rel="SHORTCUT ICON" HREF="/favicon.ico">aby użyć go na swojej stronie internetowej.

— Rocketmonkeys
źródło

3

Używam programu Paint.net open source wraz z wtyczką Icon .

Następnie możesz utworzyć i zapisać obraz w formacie .ico ze wszystkimi różnymi rozmiarami osadzonymi w pliku .ico.

— Matthew Lock
źródło

Hmm, paint.net.amihotornot.com.au jako gospodarz wtyczki Icon? Czy to jest zgodne z prawem?

— RonaldB

@RonaldB tak, to dom tej wtyczki. Dziwna domena to nie jest

— Matthew Lock

3

Tworząc favicon, warto wziąć pod uwagę następujące czynniki:

Obsługiwane platformy Dziesięć lat temu chciałeś obsługiwać tylko przeglądarki komputerowe, a rozwiązaniem było wygenerowanie klasycznego favicon.icoobrazu. W dzisiejszych czasach chcesz obsługiwać iOS (i iOS Safari) i Androida (i Androida Chrome). Może Windows 10 (i Edge) i nowy pasek dotykowy Mac Book Pro (macOS Safari). Nie możesz już używać tylko jednego obrazu „jeden rozmiar dla wszystkich”.
Projektowanie Gdy tylko obsługujesz wiele platform, napotykasz wiele wytycznych projektowych. Na przykład Google używa przezroczystych ikon dla własnych natywnych aplikacji na Androida, podczas gdy ikony iOS nie mogą być w ogóle przezroczyste. Nie można po prostu zastosować podejścia „jeden projekt dla wszystkich”.
Generowane ikony i kod HTML Przez dwa lub trzy lata chodziło o generowanie jak największej liczby ikon, aby objąć wszystkie przypadki. Obawiam się, że sam stworzyłem ten trend: - / Problem w tym, że kończysz z 20-kilkoma wierszami lub HTML, a to o wiele za dużo. Aby mieć satysfakcjonujące rozwiązanie techniczne, musisz zrównoważyć ilość generowanych ikon / HTML i obsługiwanych platform.

Jak zwykle wszystkie te zasoby można tworzyć ręcznie. O ile nie masz bardzo, bardzo konkretnych potrzeb i budżetu, zdecydowanie nie jest to właściwa droga.

Dla większości ludzi właściwym sposobem jest użycie generatora favicon, który pozwala decydować o wyglądzie wszystkich ikon i dba o wszystkie szczegóły. Jedynym, który to robi, jest Real Favicon Generator . Pełne ujawnienie: jestem autorem tej strony.

— philippe_b
źródło

1

A jeśli używasz asp.net, spróbuj zastosować favicon do swojej strony w ten sposób:

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

ale możesz znaleźć więcej informacji tutaj: http://doctype.com/

— Tarik
źródło

1

Uwaga: witryna doctype.com została zamknięta 15 lutego 2013 r. Przeczytaj więcej na ten temat .

— Krease

1

Moje ulubione ikony tworzę w formacie 16 x 16 lub 32 x 32 za pomocą programu Photoshop. Zapisuję go wtedy jako gif i używam IrfanView do konwersji gifa na ico.

— Maks
źródło