Анимированный favicon

отображение favicon в результатах поискаFavicon также называют пиктограммой сайта. Это миниатюрный логотип, который отображается на вкладке сайта в окне браузера и в результатах поиска. Можно сказать, что благодаря favicon сайт приобретает свою индивидуальность и узнаваемость. Основные сведения об использовании favicon можно почерпнуть из справочных материалов компании Яндекс. Здесь же мы поговорим о том, как оживить отображение favicon во вкладке браузера. Большинство сайтостроителей решает этот вопрос сохранением файла с анимацией в формате ico. Такое решение несёт в себе два отрицательных момента:
  • постоянное движение анимации может раздражать посетителей сайта;
  • в сниппете результатов поиска отображается только один из кадров анимации, который не всегда является самым красивым.
В продолжении данного материала мы узнаем как создать анимированный favicon и избежать вышеперечисленных проблем.  Созданный нами анимированный favicon после первичной загрузки страницы будет прорабатывать несколько циклов анимации, а затем её останавливать. Важно понимать, что анимированные фавиконы пока что поддерживают далеко не все браузеры. Корректно анимация favicon отображается только в браузере Mozilla. Посетители, использующие другие браузеры, будут видеть только статический favicon.
Итак, рассмотрим создание анимированного favicon поэтапно:
  1. Переходим на страницу бесплатного специального сервиса HTMLKit - это простой и удобный сервис для создания favicon;
  2. Через специальную форму загружаем логотип, который планируем использовать в favicon
  3. загрузка faviconНажимаем кнопочку «Generate Favicon» и дожидаемся пока сервис обработает нашу иконку
  4. сервис создания faviconПосле этого мы уже можем скачать архив с получившимися иконками, кликнув по тексту «Download FavIcon Package» или внести дополнительные изменения, кликнув по тексту «Customize», и выполнив ряд настроек. Например, можно создать apple-touch-icon - специальную иконку для устройств фирмы Apple
    создать apple-touch-iconТакже можно добавить бегущую строку в анимированную версию favicon
    добавление бегущей строки в favicon
  5. Скачиваем архив с получившимися иконками, кликнув по тексту «Download FavIcon Package», и распаковываем его в корневую папку сайта. А в head страниц сайта добавляем код:
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="icon" type="image/gif" href="/animated_favicon1.gif">
    а если создавали иконку для устройств Apple, то еще и <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  6. Наслаждаемся результатом.