htmlacademy Aug 30 2017 at 17:10

Какие нужны фавиконки

5 min

27K

HTML Academy corporate blogWebsite development*HTML*

+51

Comments 20

Dreyk Aug 30 2017 at 21:11

веб-манифест придет — порядок наведет!

вообще оно ж уже не руками генерируется все давно, так что не так страшно, что там куча строк

Dreyk Aug 30 2017 at 21:12

в смысле, что не надо в каждом файле руками добавлять, закинул в template или partial и все

Shugich Aug 30 2017 at 22:23

Этот сервис делает не обязательно мыльно. Я туда обычно закидываю SVG и он из этого SVG делает хорошие иконки.

keydon2 Aug 31 2017 at 00:34

А когда-то html использовали, чтобы оформить полезную информацию, а не цвет иконки для тач-бара маководов.

UFO just landed and posted this here

x67 Aug 31 2017 at 18:19

Не всем приятно смотреть на голые таблицы. К тому же, например в хроме, можно на панель закладок поместить очень много таких иконок без текста и сразу понимать что за сайт по иконке, не пытаясь вчитаться

VitChe Sep 1 2017 at 17:29

Браузер уже несколько лет успешно определяет какие данные ему нужно загружать, а какие нет)

igurylev Aug 31 2017 at 08:30

> Для начала, забудьте про ICO, если только вам не нужен IE10
И если вам не нужна фавиконка в выдаче Яндекса…
yandex.ru/support/webmaster/search-results/favicon.xml
По крайней мере с год-два назад при попытке подсунуть Яндексу что-то, отличное от формата ico, иконка из выдачи пропадала.

denis_skripnik Aug 31 2017 at 11:46

Если сейчас прописать favicon.png и подключить его в head секции, Яндекс будет отображать. Проверенно на многих сайтах.
Пример линка подключения:

denis_skripnik Aug 31 2017 at 12:36

Почему-то не удалось добавить пример, хотя я выбрал code. Напишу без тегов:
link rel=«shortcut icon» href=«favicon1.png» type=«image/x-icon»

sasha1024 Aug 31 2017 at 17:49

Эмм, image/x-icon для PNG? Вы серьёзно?

denis_skripnik Aug 31 2017 at 18:05

Да. Серьёзнее некуда. Данный type прописан стандартно в движке Maxsite CMS к favicon. И поскольку Favicon отображается в выдаче Яндекса, значит он воспринимает это изображение как надо.
Вполне возможно, что это неправильно, но ведь работает.
Кстати, Сама иконка имеет размер 45 на 45 PX.

UFO just landed and posted this here

sasha1024 Sep 1 2017 at 12:38

И не факт, что этот костыль вообще кому-то нужен. Вполне возможно, что один раз кто-то по ошибке указал «image/x-icon» всесто «image/png» — и пошло-поехало. Культ карго.

tenorok? (я тегнул последнего из блога Яндекс, кто писал статью с тегом HTML).

thelongrunsmoke Aug 31 2017 at 11:25

Я уже переводил эту статью https://habrahabr.ru/post/260777/

Kublyakov Sep 1 2017 at 17:29

И там же в комментариях pepelsbey заметил, что статья чуть устаревшая. Вы попросили уточнить что устарело, вот вам и ответ)

Vitalley Aug 31 2017 at 11:46

Потом на плохом канале страницы по три часа открываются.

isnofreedom Aug 31 2017 at 11:46

В итоге, если иконка монохромная то svg, size any и точно расходимся?

pepelsbey Aug 31 2017 at 12:14

SVG-иконки пока плохо поддерживаются. Без парочки PNG и тач-иконки не обойтись.

Rampages Aug 31 2017 at 14:53

Вполне сносные генераторы иконок:
realfavicongenerator.net – с кучей опций и крутилочек.
favicon-generator.org – меньше опций, но на выходе почти тоже самое.
Мыло выходит на сложных изображениях, но как говорится в статье, можете сгенерировать код, а косячные иконки делать вручную.

Не освятили в статье и информацию о поддержке анимированных иконок, например можно ли пихать APNG вместо PNG? Как силами сервера обновить закэшированную иконку и вместо неё подсунуть новую или как информировать пользователя сменой иконки на другую (новые письма/уведомления и др. события на странице).