Всем привет!
Я, Капа (kapa), заметила, что на сайтах наших девушек частенько отсутствует фавиконка, и решила написать эту статью. Ведь фавиконка — это почти «лицо» сайта, по ней можно быстро найти сайтик в выдаче, да и вообще она способствует узнаваемости сайта… Поэтому я сильно удивилась, увидев сайты с посещаемостью за 1000 человек в день и без фавиконки.
Что же такое фавиконка и как её сделать для своего сайта?
Фавикон (favicon — от англ. favorite icon) — это тот значок, который вы видите на вкладке открытого сайта рядом с его названием, он же высвечивается в избранном и результатах поиска.
На картинке он обведен красным кружочком.
Кстати, фавиконку для нашего сообщества делала я. *Сам себя не похвалишь… ;)*
Для фавиконок лучше всего брать векторные картинки. Если вы будете рисовать фавиконку вручную, то старайтесь сразу делать небольшие картинки — 100×100 или 150х150 пикселей, тогда при изменении размера картинка будет меньше деформироваться.
Еще один совет: берите самые простые картинки и цвета, фотографии зачастую превращаются в нечто совершенно непонятное — фавиконка совсем маленькая, и на ней мелкие детали сливаются.
Для правильного отображения фавиконки она должна иметь название файла favicon.ico и, соответственно, быть в формате .ico.
Добиться конвертации можно несколькими способами:
- Используя специальный плагин для Photoshop’a.
Этим способом я не пользуюсь, предпочитаю №2. - Используя онлайн-сервис favicon.ru.
Это мой любимый способ делать фавиконки. На сегодняшний день у меня уже 7 своих сайтов и 4 совместных проекта. Для всех я делала фавиконки, используя favicon.ru
Пошаговая инструкция по использованию ресурса favicon.ru
Шаг 1.
Загружаем страничку фавикон.ру. Вы можете залить собственную картинку, нажав на кнопку «Обзор» или использовать картинку из интернета.
Шаг 2.
Я делала сама логотип в фотошопе и пересохранила его в формате .jpg.
Выбираем наш файлик с картинкой, нажимаем «Открыть».
Шаг 3.
Когда картинка зальется на фавикон.ру, вы сразу же сможете увидеть, как она будет смотреть (за что я и люблю этот сервис). Если увиденное вас устроило — нажимаем на ссылку «Скачать favicon.ico» и получаем наш файлик с готовой фавиконочкой. Если не понравилось (а со мной такое бывало неоднократно) — заливаем другую картинку, на Главную страницу можно вернуться, нажав на «Создать еще одну иконку».
Теперь, когда фавиконка готова, заливаем её в корень нашего сайта (там находится index.php или index.html) и прописываем внутрь секции < head > (ПЕРЕД закрывающим тегом </head>):
< link rel=»icon» href=»/favicon.ico» type=»image/x-icon» >
< link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» >
*пробелы до и после < >, конечно же, уберите*
Если сайт сделан на WordPress’e, то секция head находится в файле header.php активной темы.
Вот и все, фавиконка для сайта создана.
И кстати, не переживайте, если фавиконка не появится тут же: через полчасика уже все будет! 😉
Всегда ваша, Капа.
