Как поймать двух зайцев одной строчкой?

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

Возможно это звучит странно. Ведь как можно получить от вашей страницы две большие выгоды, вставив туда одну единственную строчку? Я думаю, что HTML верстальщики, читающие эту статью весьма заинтригованны «новой технологией», но всё гораздо проще, потому что сегодня мы будем говорить о пиктограммах.

Итак, пиктограмма – «это небольшая картинка (иконка) в специальном формате, которая отображается рядом с адресом вашего сайта в адресной строке браузера и рядом с названием вашего сайта в "Избранном" или в "Закладках" вместо стандартной, общей для всех иконки». (c) favicon.ru

И прежде чем отвечать на вопросы: как создать, откуда взять и как вставить, я хочу рассказать о двух зайцах сегодняшней статьи. Ведь даже те, кто знает, что такое favicon могут и не знать, что именно даёт значок на сайте. Давайте по порядку…

Заяц первый. Ваша страница во вкладке избранное будет всегда в фокусе.

Давайте рассмотрим следующую ситуацию…

Ваш посетитель натыкается на вашу страницу или получает ссылку на очередной выпуск рассылки(изготовленной в HTML формате), но у него на данный момент нет времени эту страницу изучать и он добавляет её в избранное, чтобы ознакомится с ней позже. Наступает то самое «позже».

Ваш посетитель лезет во вкладку избранное и там у него(я думаю как и у всех обычных людей) самый настоящий бардак! Ссылка на ссылку, всё вперемешку и единственный вариант найти нужную страницу – это проверять каждую ссылку вручную.

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

Я думаю, вы поняли, в чём «преимущество этого зайца». Ваш посетитель найдет вас «среди избранных» гораздо быстрее.

Заяц второй. Вы привлечёте дополнительное внимание с поисковика.

Этот заяц появился совсем недавно, благодаря поисковику Яндекс. Дело в том, что теперь на первой странице результатов запроса, рядом с результатом, стоит favicon данной страницы.

Таким образом, ваш значок привлечёт с поисковика наибольшее количество целевого трафика. Эффект данного зайца по-настоящему мощный!

Проверить этот эффект вы можете, сделав какой-либо запрос на сайте www.yandex.ru.

Ну и конечно, если страница содержит качественную пиктограмму, она смотрится гораздо красивее и притягивает к себе дополнительное внимание.

Ну а на этом мы завершим с вами разговор о зайцах. Переходим к пиктограммам…

Какой должна быть пиктограмма?

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

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

А теперь насчёт знака… Например сайт мобильной связи Билайн использует в качестве пиктограммы полосатый круг(шар), их стандартный знак. Поэтому во вкладке избранное или же в Яндексе можно легко догадаться, куда ведёт эта ссылка.

Какой формат имеет пиктограмма?

Пиктограмма имеет формат .ico и является по сути графическим изображением, которое может иметь эффект прозрачности.

Один файл .ico может содержать в себе изображения нескольких размеров. Основной – 16 на 16 пикселей. Именно этот размер используется во вкладке избранное и на первой странице результатов Яндекса.

Также, ico файл может включать в себя размеры большего формата, например 48 на 48 или же 32 на 32 пикселей. Они нужны в том случае, если посетитель перетащит вашу ссылку из вкладки избранное на рабочий стол. В отличии от формата 16x16 они не будут искажены.

Откуда взять пиктограмму?

Есть два варианта: пиктограмму можно найти в интернете или же её можно сделать самому. Я предпочитаю второй вариант, именно о нём пойдет речь.

Для создания иконок вы можете воспользоваться специальными программами, но лично я использую бесплатный онлайновый сервис www.favicon.ru. C его помощью можно превращать файлы обычных графических форматов gif, jpg, png в формат ico.

Для превращения, я рекомендую использовать формат gif. Потому что этот формат имеет функцию прозрачности, да и занимает гораздо меньше чем jpg.

Файл gif изображения советую сразу подгонять под малый размер(например 48x48 пикселей), так оно будет и быстрее загружаться, и меньше исказится.

Как вставить пиктограмму на страницу?

Сделать это довольно легко, надо просто вставить на страницу, между тегами и строку:

В качестве адреса значка вы должны указать путь(URL) к файлу пиктограммы.

Вот собственно и всё! Если на данный момент у вас в сети есть свой сайт без пиктограммы, попрошу это дело немедленно исправить.