Фавикон это значок вашего сайта или страницы в интернете. Используется браузерами, приложениями и поисковыми системами для презентабельного отображения вашего сайта или страниц сайта во вкладках, закладках, истории, короче везде где есть ссылка на ваш сайт. Очевидно что использование Фавикона на вашем сайте просто необходимо. Красивый, узнаваемый Фавикон поможет посетителям вашего сайта увидеть ссылку на ваш сайт. Этот элемент привлечет внимание пользователя к ссылке на ваш сайт.
Изначально Фавикон использовался достаточно просто. Достаточно было добавить в корень файл favicon.ico. Это картинка в формате ico размером 16 на 16 пикселей. Браузер по умолчанию искал это файл в корне вашего сайта и отображал во вкладках и закладках.
Интернет а вместе с ним и устройства используемые пользователями для выхода в глобальную сеть развиваются огромными темпами. Старый формат Фавикон в современных браузерах и мониторах выглядит мягко говоря не актуально.
Визуальное отличие старого и нового формата favicon. Как было и как стало.
Сегодня многообразие устройств и браузеров используют разные форматы и разрешения файлов favicon. Попробуем разобраться в всем этом многообразии.
Браузеры настольных компьютеров и ноутбуков используют иконки разрешением 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).
Мобильные устройства Android в зависимости от плотности PPI и разрешения экрана используют иконки с разрешениями: 36×36, 48×48, 72×72, 96×96, 144×144, 192×192.
Мобильные устройства Apple так же в зависимости от типа экрана используют иконки с разрешениями: 57×57, 60×60, 72×72, 76×76, 114×144, 120×120, 144×144, 152×152, 180×180.
Можно посмотреть как ваш Фавикон видят поисковики Яндекс и Google:
- Яндекс:
http://favicon.yandex.net/favicon/mysite.ru - Google:
http://www.google.com/s2/favicons?domain=mysite.ru
mysite.ru – измените на ваше доменное имя.
Как мы видим форматов множество. Возникает вопрос, как в этом всем разобраться?
На помощь приходит автоматизация процесса создания набора всех необходимых форматов фавиконов. Можно найти сайты на которых необходимые форматы генерируются автоматически вместе с кодом для вставки на сайт.
Изучив несколько сайтов предлагающих генерацию фавиконов (Favicon Generator) я остановился на сайте Favicon & App Icon Generator
Рассмотрим подробно как создать и закачать к себе на сайт весь набор форматов favicon и разместить необходимый код на главной странице своего сайта.
Для начала нужно создать заготовку для генерации остальных форматов. Это должна быть квадратная картинка в формате PNG, JPG или GIF и размером желательно 512×512 px. Это заведомо больше выходных форматов генератора, что позволит создать качественные иконки.
Переходим на сайт Favicon & App Icon Generator. Ссылка есть в тексте, чуть выше.
Выбираем созданный нами ранее файл заготовку и жмем кнопку Create Favicon. Процесс генерации занимает некоторое время. По окончании процесса сайт переадресует нас на страницу с результатами:
Скачиваем архив со всеми необходимыми файлами нажав на ссылку Download the generated favicon. Все содержимое архива закачиваем в корневую директорию вашего сайта.
Копируем весь предоставленный генератором код и вставляем его внутрь контейнера head вашего сайта, между тегами <head> и </head>.
Теперь фавикон - иконка вашего сайта адаптирована под различные устройства и выглядит презентабельно даже на последнем iPhone))
Для сайтов на WordPress добавить favicon на сайт можно из панели администратора WordPress. Для этого нужно перейти в левом меню по пути - Внешний вид - Настроить - Свойства сайта - Иконка сайта.
Выбираем заранее подготовленный файл - картинку. Если файл не квадратный или большего размера WordPrress предложит обрезать его до нужного размера. Не забудьте сохранить изменения нажав на кнопку - Опубликовать.
В этой статье мы рассказали как можно добавить на сайт современный favicon - значок вашего сайта/