Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Фавиконка

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

Фавиконка
Содержание статьи

Прежде всего хотелось бы отметить, что само по себе слово "фавикон" происходит от английского словосочетания favourite icon, что сокращенно обозначается как favicon. Отсюда и русская транслитерация этого слова, но все-таки правильно было бы называть ее именно фавиконкой, а не фавиконом, т.к. она, очевидно, женского рода. Вот и сам Яндекс тоже так считает в официальной статье раздела помощи на данную тему.

Что такое фавиконка (favicon)

Фавиконка — это небольшое квадратное изображение, ассоциирующееся с веб-сайтом, предназначенное для выделения его из общей массы других сайтов и быстрой визуальной идентификации. Обычно для фавиконки стандартным размером является 16 на 16 пикселей, а формат, принятый стандартом — ico. Вообще, формат ico считается форматом Windows и изначально предназначался для хранения курсоров. Чаще всего, иконки представляют собой квадратное изображение со сторонами, равными 16х16, 32х32, 48х48 и так далее. Но в нашем случае с фавиконкой принято использовать размер именно 16х16.

Фавиконка может быть и другого формата, отличного от ico — GIF, JPEG, PNG и BMP. Вот вам и ответ на вопрос, как сделать анимированный или прозрачный favicon — нужно просто сделать иконку в соответствующем формате и передать соответствующие заголовки в коде страницы (об этом чуть позже).

Зачем нужна фавиконка

Прежде всего, фавиконка призвана идентифицировать тот или иной веб-сайт и выделять его в серой массе остальных сайтов, которые не удосужились ее сделать. Фавиконка показывается в закладках, в табах (вкладках) браузера, в адресной строке рядом с названием сайта и помимо всего прочего играет некую эстетическую роль, что тоже приятно. Более того, Яндекс (и другие поисковые системы, разумеется тоже) показывают ее рядом с названием сайта в результатах поиска. Данный факт является огромным плюсом и довольно веским аргументом в пользу того, чтобы все-таки создать фавиконку и установить ее себе на сайт, если вы еще этого не сделали.

Как сделать фавиконку

Для того, чтобы сделать фавиконку, не нужно обладать какими то сверхспособностями. Нужно просто потратить несколько минут своего драгоценного времени и, для начала, придумать то, как она должна выглядеть. Задайтесь вопросом — какая основная идея вашего сайта? Если это сайт, продающий цветы, то ни для никого не секрет, что изображение цветка рядом с названием вашего сайта будет более чем логичным. Вот, к примеру тот же Яндекс использует фавиконку в форме поисковой формы с их фирменной стрелочкой и буквой "Я" посередине, что прекрасно идентифицирует поисковик буквально с первого взгляда на иконку.

После того, как вы представите себе будущую картину, останется только дело техники — либо нарисовать фавиконку самостоятельно, либо вырезать из какого-нибудь подходящего изображения, найденного на бескрайних просторах сети, и уменьшить ее до необходимых размеров — 16 на 16 пикселей.

Также вы можете воспользоваться удобным, простым, но в то же время функциональным, на наш взгляд, сервисом для создания фавиконок онлайн, он так и называется — favicon.ru. Все что вам нужно будет сделать — это выбрать изображение на компьютере, загрузить его и наблюдать за процессом автоматического создания иконки для сайта с наглядным примером и встроенным редактором.

Как установить фавиконку на сайт

Итак, когда дело сделано и фавиконка готова, дело осталось за малым — просто установить ее на сайт, затем обновить кеш браузера и ждать, когда она появится в Яндексе в результатах поиска (обычно это 2-3 недели, так что придется набраться терпением, а лучше в это время заняться чем-нибудь более важным, например писать статьи для сайта). Кстати, у Яндекса есть даже особый поисковый бот, которые специализируется на фавиконках сайтов.

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

http://makeasite.ru/favicon.ico

Только разумеется с вашим адресом и с вашим расширением файла, т.е. если вы умудрились создать прозрачную фавиконку в формате PNG (это просто прекрасно), но не забудьте это поправить. Итак, после того, как вы убедились, что с файлом изображения все в порядке и он расположен там, где надо, приступим к завершиющей стадии. Разместите этот код в теле head вашего сайта:

<link rel="shortcut icon" href="http://makeasite.ru/favicon.ico" type="image/x-icon">

Данный пример подойдет для фавиконок в формате ico, но, как мы уже упомянули ранее, можно использовать и другие форматы — GIF, JPEG, PNG и BMP. Тогда пример будет выглядеть так (в порядке соответствия). В общем то говоря, это и так интуитивно понятно:

<link rel="shortcut icon" href="http://makeasite.ru/favicon.ico" type="image/x-icon"> /* favicon.ico */
<link rel="shortcut icon" href="http://makeasite.ru/favicon.gif" type="image/gif"> /* favicon.gif */
<link rel="shortcut icon" href="http://makeasite.ru/favicon.jpeg" type="image/jpeg"> /* favicon.jpeg */
<link rel="shortcut icon" href="http://makeasite.ru/favicon.png" type="image/png"> /* favicon.png */
<link rel="shortcut icon" href="http://makeasite.ru/favicon.bmp" type="image/bmp"> /* favicon.bmp */

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



Предыдущая статья:
Заголовки Last-Modified и If-Modified-Since — 304 Not Modified

Читайте также:
Фиксированная, резиновая и адаптивная верстка сайта

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»