Есть ли инструкция по созданию иконок для сайта?

Question

[Денис Букреев]

Такие дела.

Когда-то давно видел статью, где описывалось правильное создание набора иконок для сайта.
Там были описаны нужные форматы и названия.
К примеру, помимо favicon описывались иконки для устройств Apple (называется apple-touch-icon) в, по-моему, двух форматах.

Вот подобную инструкцию никак не могу найти, может у кого в закладках есть?
Хочу дизайнеру кинуть

Answer 1

[Pavel Designer]

Инструкция есть, называется ТЗ от клиента.

Все сайты делают по-разному и требования к каждой задаче разные. Единый подход к созданию может быть лишь при работе в конторе/команде, когда вы сами устанавливаете стандарты для продукта. Говорю это как специалист по созданию иконок) У одних клиентов хорошие спецы, которые могут работать с современными технологиями ,а у других дятлы, которые иконки в джипеге до сих пор вставляют. Это первое.

Второе, иконки для сайта и фавикон это несколько разные вещи. Количество размеров фавикона может быть всего два (16рх и 32рх для ретины), а может быть около пятнадцати (для разных случаев отображения на мобильных устройствах). Для одних сайтов и их владельцев это критично, а для других вообще нет т.к. их ЦА не пользуется мобильным интернетом. Получается то же самое — сначала надо обсуждать с клиентом.

Третье, все размеры для Apple устройств (также как и для устройств других производителей) указаны в гайдлайнах и найти их не проблема, было бы желание.

Вот один из примеров какие можно фавиконки готовить. Можно просто так:

• favicon-16x16.png
  
• favicon-32x32.png
  
• apple-icon-180x180.png
  

а можно еще и

• favicon-96x96.png
  
• apple-icon-57x57.png
  
• apple-icon-60x60.png
  
• apple-icon-72x72.png
  
• apple-icon-76x76.png
  
• apple-icon-114x114.png
  
• apple-icon-120x120.png
  
• apple-icon-144x144.png
  
• apple-icon-152x152.png
  
• android-icon-192x192.png
  

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

Comments

[Нерон Лордов]

Кошмар. Нафига эпплу столько иконок? Размеры какие-то странные, 57х57 это нечто

[goandkill]

Nekto_Habr: ну там из-за разной плотности пикселей на разных устройствах вся эта бюрократия

[Pavel Designer]

Nekto_Habr: максимально хорошая картинка при любых условиях требует жертв) Но никто не обязывает делать все возможные размеры, это лишь рекомендации. Некоторым и одного размера 1024 хватает, а потом всякими сервисами обрезают абы как.

Answer 2

[Денис Букреев]

https://w1c.ru/html_css-15.html
вот, что-то подобное видел, но это не совсем то

Answer 3

[Сергей]

Прошу диза нарисовать иконку 260*260 пикселей, загружаю её сюда и получаю набор иконок и коды для вставки на сайт

Comments

[Pavel Designer]

И это www.favicon-generator.org такой же и много их ещё) Только далеко не всегда результат работы сервисов оказывается приемлемым.