Jak uzyskać logo witryny w wysokiej rozdzielczości (favicon) dla danego adresu URL

Question

Jak uzyskać logo witryny w wysokiej rozdzielczości (favicon) dla danego adresu URL

Rozwijam przeglądarkę internetową na Androida i chcę pokazać logo URL dla najczęściej odwiedzanych stron, takich jak w Chrome (4 X 2). Ale problem w tym, że większość favicons (np: http://www.bbc.co.uk/favicon.ico ) mają rozmiar 16x16 lub 32X32 i nie wyglądają dobrze po przeskalowaniu.

Czy istnieje sposób na pobranie ikony/bitmapy o wysokiej rozdzielczości dla adresu URL w standardowy sposób? Co powiesz na otwarcie strony głównej, a następnie wyodrębnienie wszystkich linków do obrazów, a następnie wybranie obrazu z logo? Czy ta metoda będzie działać dla wszystkich adresów URL? Chcę wiedzieć, czy istnieje standardowy sposób uzyskania ikony o wysokiej rozdzielczości dla danego adresu URL lub favicon jest jedynym standardowym sposobem uzyskania logo witryny?

20

url image browser favicon graphical-logo

Author: Malachi, 2014-02-24

Source

4 answers

Kod Go w https://github.com/mat/besticon próbuje rozwiązać ten problem.

Na przykład

$ besticon http://github.com 
http://github.com:  https://github.com/apple-touch-icon-144.png

Istnieje również towarzysząca hostowana wersja kodu, patrz na przykład http://icons.better-idea.org/icons?url=github.com .

(Zastrzeżenie: napisałem go, ponieważ musiałem rozwiązać ten sam problem jakiś czas temu.)

11

Author: mat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-18 15:57:42

Loga nie będą konsekwentnie nazwane i bardzo trudne do konsekwentnej identyfikacji. Rozważ umieszczenie faviconu na kolorowym kafelku o odpowiednich wymiarach. Ludzie szybko kojarzą kolor ze stroną internetową. Możesz wyodrębnić dominujący kolor z witryny lub favicon za pomocą czegoś takiego jak colorthief lub sprawić, że każdy z nich będzie wyjątkowy, używając formuły złotego kąta, aby wybrać odcień.

0

Author: adrianwadey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-24 21:17:41

Zazwyczaj favicon jest mały (jak 16x16 lub 32x32). Jeśli potrzebujesz większych wymiarów, wyodrębnij nie favicon, ale logo ze strony głównej / nagłówka.

-2

Author: Justinas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-24 14:51:57

score 41 · Accepted Answer

Możesz go zakodować samodzielnie lub użyć istniejącego rozwiązania.

Algorytm Do-it-yourself

poszukaj w kodzie deklaracji Apple touch icon, takich jak <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Te zdjęcia wahają się od 57x57 do 152x152. Zobacz specyfikacje Apple dla pełnego odniesienia.
nawet jeśli nie znajdziesz deklaracji Apple touch icon, spróbuj je załadować i tak, zgodnie z konwencją nazewnictwa Apple. Na przykład, możesz znaleźć coś w /apple-touch-icon.png. Jeszcze raz zobacz specyfikacje Apple dla Referencja.
poszukaj w kodzie faviconu PNG w wysokiej rozdzielczości, na przykład <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. W tym przykładzie masz zdjęcie 196x196.
poszukaj obrazów kafelków Windows 8 / IE10 i Windows 8.1 / IE11, takich jak <meta name="msapplication-TileImage" content="/mstile-144x144.png">. Te zdjęcia wahają się od 70x70 do 310x310, a nawet więcej. Zobacz te Windows 8 I Windows 8.1 odniesienia.
poszukaj /browserconfig.xml, dedykowanego dla Windows 8.1 / IE11. To jest inne miejsce, gdzie można znaleźć zdjęcia płytek. Zobacz Microsoft specs .
poszukaj og:image deklaracji, takiej jak <meta property="og:image" content="http://somesite.com/somepic.png"/>. W ten sposób witryna internetowa wskazuje FB/Pinterest/dowolne preferowane zdjęcie, które ją reprezentuje. Zobacz Open Graph Protocol w celach informacyjnych.
w tym momencie nie znalazłeś odpowiedniego logo... cholera! Nadal możesz załadować wszystkie zdjęcia na stronie i zgadnąć, aby wybrać najlepszy.

Uwaga: kroki 1, 2 i 3 są w zasadzie tym, co robi Chrome, aby uzyskać odpowiednie ikony dla linków do zakładek i ekranu głównego. Coast By Opera nawet użyć MS płytki zdjęcia, aby wykonać zadanie. Przeczytaj tę listę, aby dowiedzieć się która przeglądarka używa które Zdjęcie (pełne ujawnienie: jestem autorem tej strony).

API i projekty open source

RealFaviconGenerator : możesz uzyskać dowolną ikonę favicon lub powiązaną z nią ikonę (taką jak ikona dotykowa) za pomocą tego API pobierania favicon. Pełna wersja: jestem autorem tego serwisu.

BestIcon : Chociaż mniej obszerny, Besticon oferuje dobrą alternatywę, szczególnie jeśli chcesz samodzielnie hostować kod. Istnieje również wersja hostowana , której możesz użyć od razu.