Фавикон (Favicon) — это маленький (всего лишь 16х16 пикселей) значок, который мы видим в браузере рядом с именем сайта. Например, для этого сайта я подобрала фавикон в виде бабочки. Неплохо получилось, правда?

Изначально значки-фавиконы были придуманы для удобства управления закладками. Само название «Favicon» сложилось из двух слов — «Favorite Icon» (иконка для «избранного»). Позже фавиконы начали отображаться поисковиками, то есть, стали своего рода визитными карточками сайтов.

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

Фавикон можно изготовить тремя способами:
1) Заказать у профессионального(или не очень) дизайнера за определенную плату.
2) Нарисовать самостоятельно в Photoshop.
3) Воспользоваться сервисом для самостоятельного создания фавиконов, благо в Интернете таких сайтов предостаточно.

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

Кстати, сервис favicon.cc позволяет изготовить фавиконы из любого отсканированного изображения и даже анимированные фавиконы (с расширением .GIF).

Примечание: Фавиконы стандартно создаются с расширением .ICO, но сейчас некоторые новые браузеры поддерживают форматы .GIF и .PNG.

Воспользовавшись цветовой схемой, я поначалу изобразила буквы FBL (Free Lady’s Blog) (см.первое фото), однако с подбором цветовой гаммы явно допустила промах. Ядовито-зеленый фон и розово-синие буквы на нём — это был уже перебор.

Недовольная результатом я обратила внимание на раздел готовых фавиконов. Для удобства можно было воспользоваться облаком меток или поиском по меткам. Что я и сделала. Поиск по словам «Free Lady» выдал добрую сотню фавиконов, обычных и анимированных.

Связываться с анимированными фавиконами я не стала, а вот среди обычных привлекло внимание весьма корявое отсканированное изображение зеленой бабочки. При помощи всё той же цветовой схемы отредактировать фавикон-бабочку было делом пяти минут.

Итак, у меня было аж два фавикона. Интересно, как они будут смотреться в строке браузера? Теоретически я знала, как поставить фавикон на сайт — в блогосфере этот вопрос освещается во всех подробностях. Но вот на практике всё оказалось не так просто.

Решив начать эксперимент с первого фавикона (ядовито-зеленого квадрата с буквами FBL), я загрузила его в корневой каталог сайта и вставила в шаблон заголовка между тэгами <Неаd> рекомендуемую спецами-сайтостроителями командную строчку. По моим расчетам, фавикон должен был немедленно появиться в окошке браузера, но этого не произошло. Ничего не получилось и после нажатия клавиш [Ctrl+F5]. Подставила в шаблон заголовка другой вариант кода, активирующего фавикон (нашла их несколько). Опять ничего. Вернее, в Internet Explorer фавикон появился-таки, а в Firefox — ни в какую!

Среди нескольких вариантов кода неожиданно сработала строчка:

<link rel="shortcut icon" href="http://www.имя_сайта/favicon.ico" />

Ядовито-зеленый фавикон наконец-то появился в строчке браузера! Смотрелся он действительно ужасно, необходимо было срочно его сменить. Теперь это казалось элементарной задачей.

Однако после замены фавикона в корневом каталоге ничего не произошло. Зеленый квадрат «FBL» упорно оставался на месте. Если я убирала кодовую строчку из шаблона заголовка, горе-фавикон исчезал, но с её повторной установкой возвращался обратно. Мистика! В корневом каталоге этого фавикона давно уже не было, но браузер упорно не хотел видеть новый фавикон.

И только после закрытия браузера и повторного его открытия фавикон-бабочка занял свое место. Иными словами, для загрузки нового фавикона потребовалось обновление кэша браузера.