Современный faviсon для сайта

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

Изначально Фавикон использовался достаточно просто. Достаточно было добавить в корень файл favicon.ico. Это картинка в формате ico размером 16 на 16 пикселей. Браузер по умолчанию искал это файл в корне вашего сайта и отображал во вкладках и закладках.

Интернет а вместе с ним и устройства используемые пользователями для выхода в глобальную сеть развиваются огромными темпами. Старый формат Фавикон в современных браузерах и мониторах выглядит мягко говоря не актуально.

Визуальное отличие старого и нового формата favicon. Как было и как стало.

Визуальное отличие старого и нового формата 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. Ссылка есть в тексте, чуть выше.

Изменить шрифт WordPress

Выбираем созданный нами ранее файл заготовку и жмем кнопку Create Favicon. Процесс генерации занимает некоторое время. По окончании процесса сайт переадресует нас на страницу с результатами:

Generation result

Скачиваем архив со всеми необходимыми файлами нажав на ссылку Download the generated favicon. Все содержимое архива закачиваем в корневую директорию вашего сайта.

Копируем весь предоставленный генератором код и вставляем его внутрь контейнера head вашего сайта, между тегами <head> и </head>.

Теперь фавикон - иконка вашего сайта адаптирована под различные устройства и выглядит презентабельно даже на последнем iPhone))

Для сайтов на WordPress добавить favicon на сайт можно из панели администратора WordPress. Для этого нужно перейти в левом меню по пути - Внешний вид - Настроить - Свойства сайта - Иконка сайта.

Иконка сайта wordPress

Выбираем заранее подготовленный файл - картинку. Если файл не квадратный или большего размера WordPrress предложит обрезать его до нужного размера. Не забудьте сохранить изменения нажав на кнопку - Опубликовать.

В этой статье мы рассказали как можно добавить на сайт современный favicon - значок вашего сайта/

  • WordPress, favicon
  • 29 Пользователи нашли это полезным
Помог ли вам данный ответ?

Связанные статьи

Установка скриптов из коллекции web скриптов ISPmanager

Установить WordPres как и любой другой Web-скрипт из большой коллекции скриптов можно прямо из...

Настройка отправки писем вашими скриптами в ISPmanager

Часто возникающая проблема, когда письма автоматически высылаемые тем или иным скриптом не...

Как закачать файлы на хостинг

В этой статье подробно описано как закачивать файлы на хостинг. Рассмотрим ситуацию, когда...

Изменение версии PHP на сайте

Часто случаются ситуации когда после обновления каких либо плагинов или расширений или самого...

Как войти в панель ISPmanager

Панель ISPmanager находится по адресу https://isp.siteko.ru Свой логин и пароль от панели...