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.
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.
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.
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.
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.
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.
Odpowiedzi:
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.
źródło
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:
Oto niektóre z wygenerowanych ikon ulubionych:
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=" "/> <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.
źródło
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.źródło
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/
źródło
<link rel="shortcut icon" href="link/to/fav.ico" />do<head>bloku swoich stron.Jednym z najlepszych internetowych narzędzi favicon jest FaviconGenerator.com . Szybki, nowoczesny design, bez puchu.
źródło
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.źródło
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.
źródło
Tworząc favicon, warto wziąć pod uwagę następujące czynniki:
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”.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.
źródło
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/
źródło
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.
źródło