Работа наша удаленная

Что такое фриланс, копирайтинг, рерайтинг, блоггинг, манимейкинг.

Строим сайт

Копирайтер осваивает сайтостроительство. Советы начинающим вебмастерам.

Фрилансер крупным планом

Невыдуманные истории, интервью, обзоры.

Главная » Строим сайт

Фавикон (favicon) — что это такое?

20.05.2009 – 04:464 коммент.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 коммент. »

  • Елена:

    Классная бабочка! Чувствуется Леди с хорошим вкусом :) !
    Спасибо за полезную информацию – думаю любому новичку при создании сайта очень пригодятся все эти тонкости.
    А еще таким способом можно разрисовать иконки в Excel для стандартных панелей быстрого доступа.

  • Admin:

    В Excel я уже давно не практиковалась и многое подзабыла :)
    Но идея, наверняка, полезная :)

  • У меня тоже была проблема с показыванием фавикона, которого уже нет. Я просто почистила кеш и всё заработало нормально =)

  • Admin:

    Вот этого-то я и не знала!

Оставьте комментарий!

Спам здесь убивается моментально. Спамеры, не тратьте своё время.

Можно использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Зарегистрируйте свой аватар на глобальном сервисе Gravatar, и он появится около вашего комментария.