Иконки для сайта: favicon.ico & apple-touch-icon.png
2013.01.23Favicon – сокращенно от английского FAVorites ICON — «значок для избранного». Это маленький значок, его еще многие называют иконкой сайта, отображается браузером в адресной строке перед адресом страницы, рядом с закладкой, во вкладках, в результатах поисковых систем, в том числе в контекстной рекламе, и пр.
Для сайтов, нацеленных на определенную аудиторию и успех, иконка должна быть узнаваемой и как-то выделяться из десятков таких же иконок в тех же закладках или результатах поиска. В большинстве случаев, значок favicon делают из существующего логотипа, многократно уменьшенного и упрощенного для лучшего его восприятия.
Традиционно используются значки размером 16х16 в формате ICO. Для автоматического распознавания большинством браузеров такие значки следует помещать в корень сайта под именем
favicon.ico. Сделать подобный значок можно самостоятельно в каком-либо специализированном редакторе, либо в Adobe Photoshop с установленным форматом ICO, либо воспользовавшись одним из многочисленных онлайн-сервисов, например
favicon.ru. Сервис favicon.ru позволяет не только нарисовать значок, но и сделать его из любой картинки. Но на самом деле чтобы сделать хороший значок, надо рисовать и надо очень хорошо постараться, чтобы все уместить в 16х16 точек.
Но не все так просто. Помимо всего прочего еще есть Apple и iOS. Для них придется постараться, потому что у них все особенное, даже значки для сайтов. И даже если на сайте наличие таких значков не объявлено, то iКомпьютеры и прочая iТехника все равно пытается их найти, и при определенных настройках сервера или CMS в логах создается большое количество ненужных записей. К тому же обычно хочется, чтобы сайт выглядел одинаково презентабельно и полноценно везде.
Значки для iOS должны быть выполнены в формате PNG размером 57х57 точек. Варианта два:
- apple-touch-icon-precomposed.png – подготовленный файл, со скруглениями и глянцем;
- apple-touch-icon.png – просто файл, обрабатываемый системой автоматически уже после скачивания с сайта.
Сначала запрашивается файл apple-touch-icon-precomposed.png, поэтому его и стоит готовить в первую очередь. На сайте Apple рекомендуют использовать подобную конструкцию для обозначения наличия подобных значков сайта:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
На самом деле «рекомендовано» – не значит «надо». Вот что нашлось за 15 минут поисков:
Поэтому на данный момент рекомендуется остановиться на двух типах значков, которые можно сохраняться в корень сайта и даже не прописывать их в HTML-коде:
- favicon.ico
- apple-touch-icon-precomposed.png
Следующий пост: Технический сбой (#85, 2013.04.01)Предыдущий пост: Тренинг Философия женственности (#83, 2012.02.26)Пост #84. Постоянная ссылка на пост: https://exogens.ru/blog/post/ikonki-dlya-sajta-favicon-ico-apple-touch-icon-png/
