Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon (фавикон). Мы разберемся что это такое, почему в обязательном порядке нужно использовать на своем сайте Favicon (фавикон), как создать эту иконку с использованием предназначенных для этого сервисов, где можно скачать готовые наборы с иконками Favicon, а так же о том, как настроить отображение Favicon на своем сайте.

Что такое Favicon (фавикон) и для чего это нужно

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

Название иконки Favicon произошло от английского словосочетания FAVorites ICON, означающего - иконка для "Избранного" (так называются закладки в браузере Internet Explorer). Иконку Favicon вы можете видеть в адресной строке браузеров, перед URL адресом открытой страницы и в закладках браузеров, перед названием закладки.

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

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

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Вам нужно будет в конце ссылки вместо адреса моего блога написать URL вашего сайта.

Так же очень важно, чтобы используемая вами иконка Favicon (фавикон) привлекала внимание, что может привести к существенному увеличению количества посетителей, пришедших на ваш сайт с Яндекса. Да и пользователям будет удобнее находить ваш сайт среди множества открытых в браузере вкладок или среди сотен закладок. В общем, выгода очевидна. Осталось только понять, как создать и добавить иконку Favicon (фавикон) на свой сайт.

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

Для начала нужно понять, что из себя должна представлять иконка Favicon (фавикон). По определению это должен быть графический файл формата ICO и размером 16 на 16 пикселей. В принципе, для создания такого файла favicon.ico вовсе не обязательно использовать какие-либо специальные сервисы. Можно использовать для этой цели Фотошоп, но он, по умолчанию, не умеет сохранять изображения в формате ICO. Для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин, который вы можете скачать, например, отсюда.

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

Создание иконки Favicon (фавикон) для своего сайта с помощью сервиса Favicon.cc

Первый сервис, который я хочу предложить вашему вниманию - это Favicon.cc. Используя данный сервис вы можете создать свою иконку Favicon (фавикон) с нуля, нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку "Create New Favicon".

Как видите, в центре страницы сервиса расположена область, каждый квадратик которой является пикселем вашей будущей иконки Favicon (фавикон). Ваша задача при создании собственной иконки Favicon состоит в закрашивания разными цветами этих квадратиков. Для закрашивания одного квадратика цветом, вам нужно поставить галочку в правой части окна сервиса в поле "pick existing color", выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски, поставьте галочку в поле "transparent" и щелкните по нужному квадратику, в результате чего он станет бесцветным (прозрачным).

Для перемещения нарисованной таким образом иконки по холсту вам нужно будет поставить галочку в поле "move". Результат своих трудов по создания иконки Favicon (фавикон) в реальном масштабе, вы сможете наблюдать в области "Preview" под холстом. Если созданная вами иконка вам подходит, то нажмите на кнопку "Download Favicon" для ее сохранения к себе на компьютер. В результате, вы получите графический файл favicon.ico, который сможете затем использовать на своем сайте.

Если вы не считаете себя способным нарисовать описанным выше способом достойную иконку Favicon (фавикон), то можете загрузить на сервис уже имеющееся у вас изображение, из которого вы хотели бы создать иконку Favicon. Изображение может быть любого размера и формата. Для загрузки своей картинки на сервис вам нужно будет нажать в левой части окна сервиса на кнопку "Import Image".

В открывшемся окне вы сможете, нажав на кнопку "Обзор", найти на своем компьютере подходящее изображение, которое станет вашей иконкой Favicon. Затем, вам нужно будет выбрать, что делать с соотношением сторон вашего изображения, при преобразовании его в формат иконки Favicon. Это актуально, если загружаемое вами изображение не квадратное, как иконка Favicon (16x16). В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions) либо преобразовать изображение к квадратному виду (Shrink to square icon). Во втором случае, изображение будет искажено по одной из осей.

Для загрузки и преобразования в формат Favicon выбранного вами изображения нужно нажать на кнопку "Upload". Полученная из загруженного изображения иконка Favicon будет доступна к редактированию точно так же, как и вновь создаваемая иконка. Если созданная вами иконка вам подходит, то нажмите на кнопку "Download Favicon" для ее сохранения к себе на компьютер.

На сервисе Favicon.cc так же имеется возможность использовать уже готовые иконки Favicon (фавикон), созданные другими пользователями этого сервиса и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся на сервисе иконки Favicon, вам нужно будет нажать в левой части окна сервиса либо на кнопку "Latest Favicons" для просмотра иконок отсортированных по дате создания, либо на кнопку "Top Rated Favicons" для просмотра иконок Favicon отсортированных по рейтингу.

Создание иконки Favicon (фавикон) из любой имеющейся у вас картинки с помощью сервиса Favicon.ru

Сервис Favicon.ru значительно проще описанного выше сервиса Favicon.cc. Он позволяет только преобразовывать любое имеющееся у вас изображение, которое вы хотите использовать в качестве Favicon в иконку формата ICO размером 16x16 пикселей. Никаких настроек и доработок иконки сделать нельзя. Просто вы указали нужное изображение на своем компьютере или в интернете и получили на выходе готовую к использованию favicon.ico.

Сервис примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с сервисом вам нужно на главной странице вверху нажать на кнопку "Обзор" и указать путь до нужного изображения на вашем компьютере. Можно также ввести адрес изображения в поле расположенное ниже, в случае, если нужное вам изображение находится не у вас на компьютере, а в интернете.

После этого вам только остается нажать на кнопку "Создать favicon.ico". На открывшейся странице вы увидите ссылку для скачивания получившейся иконки "Скачать favicon.ico". Вот и все, ваша иконка готова и остается ее только прикрутить к вашему сайту. Но об этом читайте ниже, а пока рассмотрим несколько мест, где можно скачать наборы уже готовых иконок подходящего формата для того, чтобы их можно было использовать в качестве Favicon для своего сайта.

Другие сервисы по созданию иконки Favicon (фавикон) для своего сайта

Если вам по каким-либо причинам не понравились описанные выше сервисы, то могу вам предложить попробовать создать иконку Favicon на одном из следующих сервисов:

• FaviconGenerator - очень простой генератор иконок Favicon из загруженных вами файлов. Практически аналог сервиса Favicon ru, но только зарубежный.
• AntiFavicon - достаточно интересный ресурс. На нем вы можете создать иконку Favicon с надписью. Текст надписи вам нужно будет ввести в поля "Top text" и "Bottom tex", а цветовую гамму будущей иконки можно настроить в области "Colors". Готовую иконку можно скачать по ссылке "Your generated favicon", расположенной вверху страницы генератора. Там же вы можете наблюдать превьюшку получающейся иконки Favicon
• FavIcon from Pics 2.0 - еще один простой сайт, заточенный под создание иконок Favicon из любых графических файлов. Указываете путь до картинки на своем компьютере, генерируете Favicon и загружаете архив с созданной иконкой в формате ICO и GIF.
• Простой генератор Favicon на GraphicsGuru - указали путь к картинке на своем компьютере, нажали на кнопку "Generate" и получили вашу иконку Favicon, для скачивания которой нужно нажать на ссылку "Download"
• Iconj - еще один простой генератор фавиконов. Примечательно то, то созданную иконку Favicon вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
• DeGraeve - достаточно мощный ресурс по работе с Favicon. По функционалу похож на рассмотренные ранее сервис Favicon.cc. Здесь тоже можно создавать свою иконку Favicon (фавикон) либо с нуля, либо загрузить изображение, которое в последствии можно будет подкорректировать
• On-line редактор иконок favicon - русскоязычный сервис по созданию иконок Favicon с нуля. Весь интерфейс и инструкция по работе с сервисом полностью на русском, поэтому пояснения по работе с данным сервисом будут лишними.
• Favicon-Generator - позволяет как генерировать фавикон иконку из загруженного изображения, так и создать ее с нуля в специальном редакторе.
• WebScriptLab - ну и на закуску еще один простенький генератор Favicon (фавикон) из любых изображений.

Где можно скачать уже готовые иконки Favicon (фавикон)

В принципе, для использования в качестве Favicon (фавикон) подойдет любая иконка формата 16x16 пикселей, которую вы можете поискать в своих папках иконок. Но все же фавикон существенно отличается от иконок, содержащихся в таких паках. Он призван привлекать внимание пользователей. В идеале, пользователь должен будет узнавать ваш сайт по одному лишь фавикону, поэтому лучше, если ваша иконка Favicon (фавикон) будет уникальная и оригинальная. Но для этого нужно создавать ее самому так, как было описано выше.

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего тогда будет попробовать поискать нужный вам фавикон в специально собранных галереях Favicon (фавикон):

• audit4web - галерея с более, чем 15000 Favicon (фавикон) иконок
• Iconj - достаточно большая коллекция иконок Favicon на том же ресурсе, где находится и генератор иконок, описанный выше.
• Favicon.cc - около 55 тысяч различных фавиконов на все случаи жизни. Имеются так же анимированные иконки Favicon, которые, правда, будут видны только в браузере FireFox
• Gallery - еще немного фавиконов

Если вы знаете еще галереи иконок Favicon, то напишите, пожалуйста, в комментариях, я добавлю вашу ссылку в этот список.

Как добавить иконку Favicon (фавикон) на свой сайт

Файл иконки Favicon (фавикон) браузер и поисковый робот Яндекса будут искать прежде всего в корневой папке вашего сайта. Поэтому, можно подключиться по FTP к вашему сайту и загрузить в корневую папку (обычно это public_htm или htdocs) вашу иконку favicon.ico. Откройте теперь ваш сайт в каком-нибудь браузере и посмотрите, не поменялась ли иконка в адресной строке. Если нет, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая иконка Favicon. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые на сайте изменения без очистки кэша.

Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для иконки favicon.ico, отличное от корневой папки. Как это проверить? Откройте исходный код любой страницы вашего сайта в том браузере, который вы используете. Посмотреть исходный код можно, щелкнув правой кнопкой мыши по странице в вашем браузере и выбрав пункт контекстного меню «Исходный код» (Opera), либо «Исходный код страницы» (Firefox), либо «Просмотр кода страницы» (Google Chrome), либо «Просмотр HTML-кода» (IE). Теперь поищите в верхней части исходного кода страницы вашего сайта строку, задающую путь до иконки Favicon. Строка будет выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" />

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

Для сайта на Joomla в используемом вами шаблоне обычно уже по умолчанию прописан путь до иконки Favicon. Согласно этому пути иконка favicon.ico должна лежать в папке с используемым вами шаблоном. Т.е. здесь:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Для блога на WordPress, обычно в используемой вами теме оформления, тоже задается по умолчанию путь до файла favicon.ico. Согласно этому пути иконка favicon.ico должна лежать в папке с используемой вами темой оформления. Т.е. здесь:

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

Как прописать в шаблоне вашего сайта путь до иконки Favicon

В общем случае, если хотите задать путь до вашей иконки Favicon, который бы поняли и браузеры и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона вашего сайта, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

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

В случае сайта на Joomla вам нужно будет открыть на редактирование файл index.php из папки используемой вами темы оформления: /templates/Папка_с_вашей_темой_оформления. В начале данного файла вы найдете открывающий и закрывающий теги HEAD, между которыми вами и надо будет вставить строки с кодом:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

В случае блога на Wordpress вам нужно будет открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете файл header.php в редакторе (например, Notpad++) и в самом его начале находите открывающий тег HEAD, который в моем случае выглядит так:

<head profile="http://gmpg.org/xfn/11">

В любом месте за ним, но до закрывающего тега HEAD:

</head>

прописываете те две строчки кода с указание пути до вашего файла favicon.ico.

В случае форума на SMF вам нужно будет открыть на редактирование файл index.template.php из папки используемой вами темы оформления. Если у вас на форуме используется тема по умолчанию (дефолтная), то путь к папке будет следующий: Themes/default. С помощью встроенного поиска редактора Notepad++ находите, например, это участок кода:

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
	echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';

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

Как добавить анимированную иконку Favicon (фавикон) на свой сайт

Да, в принципе, точно так же, как и обычную иконку Favicon. Будет отличаться только код вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до вашей иконки Favicon. Дело в том, что анимированные иконки Favicon будут иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать, примерно, так:

   <link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >

    <link rel="icon" href="/img/favicon.gif" type="image/gif" >

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

Вы так же можете ознакомиться с другими статьями на тему продвижения сайта:

• Продвижение сайта в поисковых системах (SEO)
  • Панели вебмастеров Яндекса, Google, Yahoo, Bing
  • Счетчики посещаемости LiveInternet, Mail.ru, Google Analytics, HotLog, SpyLog, Rambler, Я.Метрика
  • Twitter и FriendFeed
  • E-mail рассылки Subscribe, Content.Mail и MailList
  • Постинг в сервисы социальных закладок для продвижения своего сайта, привлечения дополнительных посетителей и ускорения индексации сайта поисковиками
  • Показатели продвижения вашего сайта — Google PageRank (PR), тематический индекс цитирования Яндекса (ТИЦ) и Alexa Rank
• Все про RSS (фид, feed)
  • Feedburner и все, что с ним связано
• Улучшаем индексацию сайта поисковиками с помощью настройки файла robots.txt и мета-тега Robots
• GoGetLinks — самая выгодная биржа рекламных обзоров
• Получение множества бесплатных обратных ссылок (бэклинков) с трастовых сайтов

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru