Favicon - лицо вашего сайта. Сделайте его привлекательным прямо сейчас!

Favicon - лицо вашего сайта. Сделайте его привлекательным прямо сейчас!

Практически у любого авторитетного блога есть Favicon, так называемая «эмблема» сайта, которая отличает его от любого другого. Яндекс размещает его рядом с адресом сайта, пользователи данной поисковой системы чаще делают выбор в пользу сайтов, где установлен фавикон. Собственно, что мешает вам выделить свой проект таким способом?

Этим сегодня и займемся.

Favicon

FAVorites ICON – иконка для «Избранного». Если помните, так называются закладки в Explorer. Каждый раз, когда открывается страница сайта в браузере, фавикон предшествует вашему URL. Сейчас вы читаете Родину Линков, посмотрите фавикон в самом верху, перед текстом самой закладки. В Яндексе тоже красиво отображается фавикон.

фавикон яндекс

Кстати, имеется специальный бот для индексации фавиконов, который заходит на сайт раз в несколько дней или реже, до одного месяца. Робот находит фавикон на сервере, и для индексации преобразует из формата ICO в PNG. Доступен он будет по адресу:

http://favicon.yandex.net/favicon/имя сайта

Создать сам фавикон вы можете несколькими путями. Это может быть любой графический файл, сохраненный в ICO формате, размером 16 на 16 пикселей. Если стандартная иконка, скачанная из сети, это не ваш вариант, предлагаем воспользоваться специальными генераторами.

Онлайн генераторы и галереи

На самом деле, таких сервисов существует множество. Перечислим некоторые интересные: Faviconcc, FaviconGenerator и его русский аналог Favicon.ru, AntiFavicon – для создания иконки с надписью, Generator, DeGraeve. Рассмотрим работу одного из сервисов подробнее.

Faviconcc

Онлайн генератор, достаточно простой и наглядный в использовании, иконку здесь можно создать с нуля. Начните работу с кнопки «CreateNewFavcon», появится карандаш, при помощи которого можно самостоятельно по пикселям нарисовать фавикон.

фавикон

В процессе вы можете следить, как будет выглядеть готовый фавикон в полном размере внизу страницы под надписью «Favicon in original size»:

фавикон маленький

Если необходимо стереть закрашенный квадратик, поставьте галочку в поле «transparent» и щелкните по квадратику. Если хотите увидеть список готовых фавиконов нажмите кнопку «Latest».

Можно загрузить собственное изображение в онлайн генератор, воспользовавшись соответствующей кнопкой «Обзор», а затем уже работать с ним. Имейте ввиду, что если картинка, которую вы загружаете не квадратная, для того, чтобы оставить соотношение нажмите «Keep dimensions». Если картинка вам нравится, нажимайте «Download», чтобы сохранить ее на компьютер.

К онлайн генераторам прилагаются и галереи фавиконов, об одной мы уже сказали выше, ее вы найдете на Faviconcc, аналогом можно назвать галереи iconj и gallery, где достаточно большой выбор иконок.

Устанавливаем Favicon на сайт

Подключитесь по FTP и загрузите в корневую директорию (htdocs или другую вашу) сам фавикон favicon.ico. Очистите, на всякий случай, кеш, посмотрите в браузере изменилась ли иконка в адресной строке.

Возможно, что изменений не произойдет, это означает, что для фавикона у вашего ресурса задана не корневая папка. Узнать место для фавикона можно в исходном коде любой страницы сайта. Для Фаерфокса щелкните правой клавишей мыши, выберите «Исходный код страницы» и поищите вверху путь до favicon.ico. Сделайте все указанные выше действия для вашего пути, почистите кеш, посмотрите результат.

Если ваш сайт на Джумла, посмотрите папку с шаблонами, если на Ворд Пресс, посмотрите путь в используемых темах. Для Яндекса пропишите путь до фавиконки между тегами HEAD следующим образом:

href="http://путь/favicon.ico" type="image/x-icon"

Прописать строки следует в определенном файле. Для Джумла путь до фавикона прописывается в /templates/Папка шаблонов/index.php. Для Ворд Пресс это будет файл header.php из папки с темами.

Напоследок хочется заметить, что фавикон может быть и в расширении GIF, когда вы хотите сделать его анимированным. Здесь код придется слегка изменить, да и такая иконка в некоторых браузерах будет все равно выглядеть статично. Так что сами решите, нужно ли вам в качестве фавикона анимированное изображение.

Автор , на 8 апреля 2014 г. в Технические вопросы.

Расскажите друзьям:


Комментарии

Комментирование отключено.

Услуги
Спецпредложения

Подписка на блог

без спама, не чаще одного раза в неделю

Кто победит?

РСЯ

adSense