16 июля 2009
Запись из категории 'Поисковики (элементы SEO)'

Фавикон для сайта Фавикон – это такая маленькая иконка, которая показывается в некоторых браузерах в адресной строке рядом с урлом сайта и в поисковиках – опять же в некоторых – пользователь тоже видит эту иконку напротив имени сайта.

При прочих равных подсознательно сайт с картиночкой вызывает чуть больше доверия, чем стоящий рядом в выдаче без картинки. А уж если еще и картиночка тематическая…

Например, на сайте женского журнала “Мадам Анин” фавикон – это маленькая симпатичная розочка.

 aninfav

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

Опишу, как я делаю фавиконы.

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

Шаг 1. Выбираем изображение

Можете искать в интернете. В гугле есть для этого удобная опция поиска по картинкам – поиск по типу изображение, нужно выбрать “клип-арт”.

Но я ищу по-другому. Более целенаправленно. Иду на фотосток. Для примера я пойду на западный фотосток Dreamstime (поищите его в гугле по названию). Там в поле поиска набираю слово “icon”. Можно сузить поиск, если вы например, ищете иконку с собакой, напишите “dog icon”. Ну, а я буду искать картинку для иконки этого сайта.

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

Нашли что-то симпатичное? Сохраняем выбранное изображение.

Шаг 2. Вырезаем нужную картинку

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

Делаем фавикон 1 Я открыла картинку в фотошопе, затем выбрала инструмент прямоугольного выделения (сбоку на панели, показан стрелкой). После этого я поставила стиль Fixed Size и задала фиксированные размеры (панель сверху). Почему бы просто не обрезать? Потому что иконка должна быть квадратная, а если она будет прямоугольной, тогда она в дальнейшем автоматически обрежется до квадратных размеров. При этом наверняка обрежется что-то лишнее, а это ни к чему.

У меня фиксированные размеры квадрата получились 54*54, а вам нужно будет подобрать свои, чтобы иконка была вписана в этот квадрат, и оставалось минимум свободного белого места.

Дальше в меню выбираем Image → Crop. Картинка обрезалась, и сохраняем ее.

Шаг 3. Делаем фавикон из картинки

В интернете много онлайновых сервисов, которые умеют преобразовывать картинку формата *.jpg в картинку, пригодную для фавикона в формате *.ico.

Я пользуюсь сервисом http://favicon.ru/ .

Итак, открываем страницу.

favicon2

Нажимаем кнопку “Обзор”, выбираем свою картинку (1). Дальше жмем на “Создать favicon.ico” (2).

favicon3

Сайт создаст иконку из вашей картинки. В принципе она готова, и ее можно скачать (“Скачать favicon.ico!”). Но сейчас она на белом фоне. То есть в тех браузерах, где адресная строка подсвечена серым или другим цветом, напротив адреса сайта будет стоять некрасивый белый прямоугольник, а на нем изображение.

Поэтому сделаем фон нашего фавикона прозрачным.

Для этого жмем “Редактировать иконку”, и нас перенаправляют в окошко онлайнового графического редактора.

favicon4

Мы видим в редакторе изображение на белом фоне. Нам нужно удалить весь этот фон, сделать прозрачным. По умолчанию инструмент в этом редакторе – карандаш, а текущий цвет как раз прозрачный (меню слева). Закрашиваем на картинке все белые клеточки.

favicon5

После этого нажимаем сначала кнопку “Сохранить изменения”, а потом “Create favicon”.

После этого появится экран, на котором большими синими буквами будет написано “Скачать favicon.ico!”. Скачиваем.

Шаг 4. Загружаем фавикон на сайт

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

Если не умеете ковыряться с кодом, то положите favicon.ico в корневую папку сайта, в большинстве случаев он будет появляться автоматически.

Теперь пропишем путь к иконке. Путь к фавикону прописывается в хедере. Для wordpress – файлик в текущей теме, который вам нужен, называется header.php.

Между тегами <head> </head> вам нужно написать следующие две строчки.

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

То, что выделено красным – путь к иконке. Если вы положили ее не в корень сайта, а в какую-то другую папку на сервере, укажите полный путь к ней.

Шаг 5. Ждем-с

Если вы пользуетесь Firefox, то вам нужно закрыть браузер и снова открыть его – новоиспеченная иконка появится рядом с урлом вашего сайта. В некоторых версия Explorer иконка тоже появляется (иногда для этого нужно занести сайт в закладки).

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

Комментируемые статьи


Комментарии:
23 комментария к записи "Как сделать фавикон – иконку для сайта"
Вадим оставил(а) комментарий 27 июля 2009 в 18:51 #

Даша, большое спасибо за грамотную, последовательную и понятную статью о создании иконок *.iso
С уважением, Вадим Кутовой


Аня оставил(а) комментарий 5 октября 2009 в 16:17 #

Спасибо, Даша. А я-то все голову ломала, как люди фавиконы на прозрачном фоне делают! Непременно применю на практике.


Lena оставил(а) комментарий 26 марта 2010 в 10:12 #

Спасибо огромное, не думала, что все так просто!


Tata_N оставил(а) комментарий 26 марта 2010 в 22:28 #

Спасибо! Вот прямо по статье пошла и сделала фавикон :)


anemona оставил(а) комментарий 13 апреля 2010 в 23:11 #

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


Assassin оставил(а) комментарий 19 апреля 2010 в 11:49 #

Не подскажете где находится это текстовый документ, а именно «header.php». найти не где не могу!!!


Dashline оставил(а) комментарий 19 апреля 2010 в 12:20 #

Если у вас WordPress – то header.php – это один из составляющих файлов темы. А темы в WP лежат по адресу вашсайт/wp-content/themes .


Assassin оставил(а) комментарий 19 апреля 2010 в 15:52 #

Спасибо конечно, но у меня DLE


Dashline оставил(а) комментарий 19 апреля 2010 в 16:24 #

На здоровье, но в тексте статьи написано, что файл header.php – это для WP. ДЛЕ не пользуюсь.


Lusya256 оставил(а) комментарий 8 мая 2010 в 20:22 #

Здорово. Очень подробно и ясно описано. Спасибочки *REV*


anemona оставил(а) комментарий 5 июня 2010 в 12:37 #

Все-таки я ее сделала, моих знаний фотошопа и твоих, Даша, подробных инструкций оказалось достаточно. Но у меня фавиконка отображается только в Опере, а в Мозилле – нет *UNKNOWN*


Dashline оставил(а) комментарий 5 июня 2010 в 15:29 #

В ФФ тоже будет отображаться – после перезагрузки браузера. ;)


anemona оставил(а) комментарий 5 июня 2010 в 18:54 #

Появилась в ФФ только после того, как почистила кэш =)


Kate оставил(а) комментарий 7 августа 2010 в 11:15 #

Я точно таким же способом делаю, только вот перед тем как в ico превратить я еще долго попиксельно редактирую картинку чтобы можно было вообще распознать что на ней изображено.


Павел оставил(а) комментарий 3 декабря 2010 в 9:54 #

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


Dashline оставил(а) комментарий 3 декабря 2010 в 9:58 #

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


mr_exclusive оставил(а) комментарий 30 марта 2011 в 18:32 #

Большое, просто огромное спасибо за подсказку… Всю голову сломал как сделать такую мелочь, все коды перебрал не мог понять, а тут вон оно как все просто…


marissabel оставил(а) комментарий 16 мая 2011 в 15:11 #

Вот спасибо за подробную инструкцию:) А то к новому шаблону такая фавиконка прилагалась жуткая :-) . Я правда слегка лишнего прозрачного сделала, так что получилось кривенько. Может позже переделаю. Но уже сейчас веселенький фавикон:)


Анастасия оставил(а) комментарий 26 января 2012 в 12:39 #

Как понять «Положите иконку в основную (корневую) директорию вашего сайта» ?? Как сделать это – не понимаю!! Объясните глупому человеку!!!


Dashline оставил(а) комментарий 26 января 2012 в 14:38 #

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


Анастасия оставил(а) комментарий 26 января 2012 в 23:13 #

А как можно внести изменения в корневую, так как код страницы можно только прочитать, на изменения стоит блок. Можно ли его убрать?
За ранее спасибо)


Dashline оставил(а) комментарий 27 января 2012 в 8:38 #

Анастасия, не могу ответить на вопрос, потому что не понимаю, о чем идет речь. *PARDON* На каком движке у вас сайт? Он самостоятельный? Вы платите за хостинг? И причем тут код страницы?


Анастасия оставил(а) комментарий 29 января 2012 в 17:28 #

А, все, я разобралась, спасибо большое за помощь и прекрасное объяснение по добавлению фавикона.*KISS*


Поговорите со мной

Имя: 
E-mail: 
Ваш вебсайт (если есть): 
Правила комментирования
Комментарий: