Разработчики сайтов знают, как трудно сделать свой ресурс интересным и запоминающимся для посетителя. Не последнюю роль в этом играет внешнее оформление сайта, его непохожесть на другие ресурсы интернета, достигаемая за счет дизайна и иконки сайта – небольшой картинки favicon. О ней и пойдет речь в сегодняшней статье.

{mosloadposition debug}

Что такое favicon? Это значок веб-сайта. Изображение, которое вы видите рядом с его названием в адресной строке браузера, в журнале, в избранном, закладках, на панели закладок и т.п. Это изображение размером 16 на 16 пикселей, оно всегда носит название favicon и имеет расширение файла ico (что означает «иконка»).

Иконка сайта помогает выделить ваш проект из миллиона других ресурсов интернета, поэтому к ее созданию следует отнестись со всей серьезностью.

Как создать favicon? Поскольку favicon - это обычная картинка, ее можно нарисовать в графическом редакторе, поддерживающим данный формат, а затем сохранить с именем «favicon.ico». Для создания значка сайта также предназначено множество специализированных программ, например, IcoFX.

Но сегодня мы не будем использовать привычные программы, а обратимся к замечательному онлайн сервису для создания favicon – «favicon.ico Generator», который можно найти в интернете по адресу http://www.favicon.cc

Если вы хотите стать частью сообщества создателей favicon, участвовать в рейтинге и хранить все иконки сайтов на сервере «favicon.ico Generator», зарегистрируйтесь, нажав ссылку «Register». Но даже незарегистрированным пользователям доступны все необходимые инструменты создания favicon.

Прежде всего, оглядимся.

В правой части окна вы увидите список доступных команд:

• «Create New Favicon» – создать новый favicon;

• «Import Image» – импортировать изображение favicon;

• «Latest Favicons» – последние favicon, созданные пользователями сайта;

• «Top Rated Favicons» – рейтинг favicon.

В центре расположено полотно, на котором вы и будете рисовать favicon. Оно заботливо разделено на 16 клеточек по вертикали и горизонтали, чтобы не ломать голову, отсчитывая 16 пикселей. А ведь именно такой размер должен иметь favicon – 16 на 16 точек.

В левой части окошка находятся инструменты рисования: выбор цвета, ластик, пипетка и инструмент перемещения.

В нижнем блоке «Preview», не отвлекаясь от процесса рисования favicon, можно увидеть, как он будет выглядеть на вашем сайте.

Как вы могли убедиться, всё просто и понятно, хотя и по-английски. Что называется, сделано для людей! Но не будем медлить и приступим к рисованию favicon.

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

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

Если нарисованный объект или его часть вам не понравились, не стоит отчаиваться. Ситуацию исправит ластик. Отметьте его галочкой и стирайте на здоровье!

На сайте «favicon.ico Generator» можно создавать не только статичные, но и анимированные favicon. Для этого необходимо нажать ссылку «Use Animation», которая расположена сразу под полотном.

Суть анимированного favicon состоит в следующем: анимация включает несколько кадров с изображениями, которые сменяют друг друга по истечении указанного вами промежутка времени. Для того чтобы лучше разобраться, взгляните на настройки анимированного favicon.

• «Frame 1 of 1» (Кадр первый из одного) - показывает номер текущего кадра и общее количество кадров.

• «1sec» – время показа текущего кадра, которое выбирается из списка от 0,05 до 20 секунд. Оптимально, если кадры будут сменять другу руга через 0,5 – 2 секунды.

• «Clear Frame» - очистить кадр от изображения.

• «Append New Frame» - добавить следующий кадр.

• «Copy Previous Frame» - копировать изображение из предыдущего кадра в текущий кадр.

• «Delete Frame» - удалить кадр.

• «Loop forever» - один из способов воспроизведения анимации, означающий непрерывное воспроизведение. Также можно выбрать «stop at last frame» - остановиться на последнем кадре, или количество повторов анимации от 2 до 20 раз.

Таким образом, чтобы добавить новый кадр анимированного favicon, достаточно нажать «Append New Frame». Затем при помощи инструментов рисования создать изображение, которое будет показано в данном кадре, и определить продолжительность его показа, например 1 секунду. После чего добавляем новый кадр, а при желании – копируем в него предыдущее изображение и немного изменяем его для достижения эффекта плавного перехода.

Наконец, когда результат предпросмотра нас полностью устраивает, пришло время загрузить свеженький favicon на компьютер и пристроить на свой сайт. Для этого в блоке «Preview» нажмите кнопочку «Download Favicon» и сохраните файл с иконкой на компьютере.

Способ вставки favicon на сайт будет зависеть от того, какую систему управления контентом вы используете. Если это Joomla или другая система, то там, как правило, в коде сайта уже прописана ссылка на favicon. Достаточно заменить стандартную иконку с корневой папке сайта и папке шаблона на вашу.

Если же вы делаете сайт либо шаблон с нуля, то в коде сайта необходимо прописать строчку:

<link href="/www/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Параметр href указывает на путь к изображению favicon относительно корня сайта. В нашем примере это папка www, в которой расположен файл favicon.ico. Вам же следует заменить «/www/favicon.ico» на путь до favicon на вашем хостинге. После этого, перезагрузив страницу сайта, вы уже сможете любоваться красивым favicon.

Специально для Ячайник, Елена Карлтон

{mosloadposition debug}

{mosloadposition cpanel}