Как создать фавикон (иконку) для сайта

Как создать фавикон (иконку) для сайта

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

Как создать фавикон (иконку) для сайта

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

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

А вот как выглядит фавикон моего блога в выдаче.фавикон cyber-promo.ru

Как же изготовить фавикон?

Выбрать изображение

Первое, что нужно сделать – выбрать изображение. В популярном Google имеется удобная функция поиска картинок, в том числе по типу изображения. В нашем случае выбираем «клипарт». Но можно поступить иначе – более целенаправленно. Идем на фотосток – выбрать можно любой, к примеру Dreamstime.

Там, в поисковом поле набираем слово icon, либо задаем более точный запрос, вроде tires icon (если шинный или дисковый сайт) или тому подобный, соответствующий тематике вашего сайта. При выборе иконке, старайтесь выбрать что-нибудь однотонное, желательно без мелких деталей, имеющее четкие контуры. Ведь размер будущего значка всего 16х16 и тяжело будет разобрать детали при таком уменьшении. Если вы нашли нужную иконку, сохраните это изображение.

Вырезаем иконку

Второе – поскольку на сохраненной с фотостока картинке наверняка несколько иконок, вырезаем нужную. К примеру, выбрав понравившуюся иконку, воспользуемся программой Фотошоп. В Фотошопе выбираем инструмент «Прямоугольное выделение» — стрелочка на боковой панели. После этого, задаем фиксированные размеры, путем выставления фиксированного размера на верхней панели.

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

Преобразуем картинку в фавикон

Третье – из картинки нужно сделать фавикон. Осуществить это можно с помощью одного из многочисленных онлайн-сервисов, способных преобразовывать картинки обычного jpeg-формата в пригодную для фавикона картинку — .ico. К примеру – сервисом Favicon.ru. Я всегда пользуюсь именно им. Он очень удобен.

Открываем страницу, жмем кнопку «Обзор», выбираем свою картинку и нажимаем «Создать favicon.ico». Сервис автоматически преобразует вашу картинку в иконку. Ее уже можно скачать, но она пока на белом фоне, а в случае подцветки адресной строки в браузере белый прямоугольник будет не очень красиво выделяться.

Нужно сделать фон фавикона прозрачным. С этой целью выбираем «Редактировать иконку» для перехода в графический online-редактор. Удаляем здесь весь белый фон с помощью карандаша, заменяя белый цвет прозрачным. Сохраняем изменения, после чего жмем Create favicon. Скачиваем фавикон.

Загрузка фавиконки на сайт

Четвертое – загружаем favicon.ico на сайт. Для корректной работы фавикона в любом браузере и поисковике нужно прописать путь к нему. Положите файл в корневую папку сайта (или в папку темы, как у меня) – он будет появляться автоматически в большинстве случаев. После этого в хедере прописывается полный путь к местоположению иконки.

В моем случае часть кода выглядит вот так:

[php]<link rel="Shortcut Icon" href="http://cyber-promo.ru/wp-content/themes/nextelement/favicon.ico" type="image/x-icon" />[/php]

Подождать обновления в поисковиках

Пятое – нужно будет немного подождать. В случае использования Firefox, надо перезагрузить браузер – закрыть и открыть его снова. Только тогда обновленная иконка покажется возле URL-а вашего сайта. В отдельных версиях IE иконка также появляется сразу, порой для этого необходимо добавить адрес сайта в закладки.

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

К слову, небезызвестный Google фавиконы не отображает вовсе.

Игорь (Luckyboy)

Comments (8)

  • Миша

    Прикольно, обязательно для своего сайта что-то интересненькое подберу.

    17 мая 2011 at 17:02
  • zerohold

    Робот на иконки обходит сайты примерно раз в 3 месяца. Проверял на 100 сайтах экспериментальным путем.

    18 мая 2011 at 0:41
    • webdeveloper

      А что вы еще эксперементально проверяли?

      30 июня 2011 at 0:41
  • webdeveloper

    Не знал что у поисковика есть отдельный робот для фавиконок

    6 июня 2011 at 2:11
  • Рустам

    Ура я тоже создал для своего сайта vostokcafe.com
    Автору большое спасибо.

    27 июня 2011 at 12:59
  • Daniell

    круто. спасибо )

    19 июля 2011 at 14:54
  • vakul64

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

    28 октября 2011 at 17:15
    • Luckyboy

      В яндексе бывают отдельные апдейты фаиконок. Где-то раз в месяц.

      29 октября 2011 at 11:50

Comments are closed.