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

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

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

Это изображение называется Фавикон (читаем Favicon).

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

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

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

Фавикон (favicon) что за атрибут?

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

Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).

Отображение фавикона на закладках браузера

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

Чем полезен Favicon для сайта?

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

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

Отображение фавикона в поисковой выдаче

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

Способы создания Фавикон для сайта

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

Готовые коллекции Фавикон

Если Вы не хотите заморачиваться с изготовлением изображения для иконки favicon, в помощь Вам готовые коллекции изображений.

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

Если же нет идей по поводу картинки, то можно попросту сделать рисунок с изображением одной или нескольких букв, по которым можно было бы узнать название или тематическое содержание сайта. Например, на сайте Одноклассники.ру на фавиконе размещены буквы «OK», по которым можно сразу узнать, что это за социальная сеть.

Ресурсы с иконками:

1. http://www.thefavicongallery.com/ - небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
2. - содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в .
3. - огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
4. - не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
5. — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

Самый простой, но довольно эффективный способ для поиска будущего фавикона соответствующего тематике Вашего веб-сайта.

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

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

Иконки в Яндекс.Картинках

Онлайн сервисы создания Favicon

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

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

Вот список наиболее популярных сервисов для онлайн создания фавикон:

1. — англоязычный сервис создания Favicon
2. — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
3. — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

Устанавливаем Favicon на сайт

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

Разберем наиболее популярные варианты установки favicon.

Плагин — простейшее решение

Если у Вас сайт на наиболее популярной для блоггеров , все очень просто, для этого можно воспользоваться одноименным плагином. Данный способ наиболее простой, не требуется знаний кода html.

1. Использовать свой граватар (gravatar), для этого у Вас должен быть настроен глобально распознаваемый аватар . Как правило это фото владельца блога. Не рекомендую использовать данную опцию, после установки Вы сами поймете почему.
2. Заранее подготовленный файл с изображением. Для этого необходимо указать внешний URL картинки.
3. Готовые фавиконы зашитые в плагин по умолчанию, коих ровно 100.

Установка фавикона с помощью плагина

Встроенные возможности WordPress

Почти у всех платных (и некоторых бесплатных) тем для WordPress есть встроенная возможность добавить Фавикон на свой блог. Например данная опция для темы моего блога выглядит так.

Сейчас персональный значок сайта — Favicon — это некая визитная карточка любого веб-ресурса. Такая иконка выделяет нужный портал не только в списке вкладок браузера, но и, к примеру, в поисковой выдаче Яндекса. Никаких же других функций, помимо повышения узнаваемости сайта, Фавикон, как правило, не выполняет.

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

Веб-редакторы иконок в большинстве своем предлагают все необходимые инструменты для создания значков Favicon. При этом необязательно рисовать картинку с нуля — можно воспользоваться уже готовым изображением.

Способ 1: Favicon.by

Русскоязычный онлайн-генератор фавиконок: простой и наглядный. Позволяет нарисовать значок самостоятельно, пользуясь встроенным холстом 16×16 и минимальным перечнем инструментов, таких как карандаш, ластик, пипетка и заливка. Имеется палитра со всеми RGB-цветами и поддержкой прозрачности.

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

На выходе вы получаете графический ICO-файл с названием favicon и разрешением 16×16 пикселей. Этот значок уже готов для использования в качестве иконки вашего сайта.

Способ 2: X-Icon Editor

Браузерное HTML5-приложение, позволяющее создавать детализированные значки размером вплоть до 64×64 пикселей. В отличие от предыдущего сервиса, X-Icon Editor имеет больше инструментов для рисования и каждый из них может быть гибко настроен.

Как и в Favicon.by, здесь вы можете загрузить готовую картинку на сайт и конвертировать ее в фавиконку, при необходимости должным образом отредактировав.

Если вы хотите сохранить детали изображения, которое намерены превратить в фавиконку, X-Icon Editor отлично для этого подойдет. Именно возможность генерации значков с разрешением 64×64 пикселей и является главным преимуществом этого сервиса.

Очень важным элементом дизайна блога является фавикон – небольшое изображение (16х16 пикселей). Маленькие размеры – но огромный эффект! Эта статья посвящена тому, как создать фавикон (favicon.ico) для сайта онлайн, с помощью специальных сервисов. Вы подробнее ознакомитесь с тем, что это за иконка фавикон, для чего она используется, какие у нее функции, как ее добавить на блог и создать в режиме online. Также вы узнаете, где скачать коллекцию готовых favicon ico для сайта .

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

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

Favicon – сокращение из двух слов (англ. FAVorites ICON), что переводится, как иконка (очень маленькое изображение) для «Избранного». Избранное – так называются закладки в браузере Internet Explorer. Внешний вид favicon примерно такой:

Сделать фавикон для сайта стало очень просто, поэтому этот мини- приобрел широкую популярность. Кроме того, можно скачать для сайта готовую иконку favicon ico, которую останется только добавить. Выбрав из галереи подходящую, вы сможете украсить ею свой сайт и любоваться ей в браузере (вот как выглядит эта мини-картинка в Хроме):

Итак, favicon – это маленькое изображение размером 16×16 px, с расширением.ico (расширение иконок). Т.к. иконка приобрела широкую популярность, она имеется практически у каждого сайта, а это еще один повод, чтобы создать фавикон для сайта онлайн. При этом не важно, что за хостинг вы используете, на каком движке работает ваш блог – в любом случае вы сможете создать в режиме online, а затем установить favicon или же скачать готовый фавикон для сайта. Благодаря современным генераторам иконок, их создание не занимает много времени – одна-две минуты, и все готов.

У вас все еще нет фавиконки? Исправляйтесь скорее!

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

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

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

• Наберите ваш сайт в окне поиска Яндекс, и вы увидите, есть ли рядом с ним favicon.
• Наберите в браузере ссылку http://favicon.yandex.net/favicon/site.ru , где замените site.ru на адрес вашего сайта. Если фава проиндексирована, вы сможете ее увидеть.
• Зайдите в панель Яндекс.Вебмастер, там тоже отражается фавикона.

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

2. Online генераторы и коллекции favicon

Теперь мы знаем, что такое фавикон, и зачем она нужна сайту. Запомнили, что ее размер в пикселях должен быть строго равным 16 на 16, а расширение – только.ico. Теперь узнаем, как сделать такое мини-лого:

1. Скачать уже готовую фаву из галереи.
2. Создать самому с помощью генератора фавикон.
3. Сделать из готового изображения (опять же с помощью favicon generator’а)

2.1 Коллекции и галереи фавикон

1. http://www.thefavicongallery.com/ — хоть и небольшая коллекция, но полезная. Здесь вы найдете иконки на самые разные тематики. Всего их около 300 штук. Для того, чтобы скачать понравившуюся favicon ico для сайта, нажмите на нее правой кнопкой мыши и сохраните на свой компьютер.
2. http://www.iconj.com/favicon-gallery-page1.html — еще одна коллекция favicon для сайта, которая содержит более 3 тысяч мини-картинок. Сохранить понравившуюся можно в двух форматах (ico или gif). Но есть и недостаток: вы можете просматривать за раз только 30 иконок, чтобы увидеть следующие, нужно перейти на новую страницу.
3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – благодаря этой галереи, вам не придется самому онлайн создавать фавикон. Просто выберите и скачайте понравишуюся картинку. Опять же, за раз можно просматривать 20 фавикон, что замедляет процесс выбора.
4. http://www.favicon.co.uk/gallery.php — этот сайт позволяет не только делать фавикон для сайта, но и скачивать готовые варианты. За раз вы можете проглядывать по 144 иконки, что намного удобнее, чем в двух предыдущих вариантов. Фавы на самые разные темы.
5. http://favicon-generator.org/gallery/ — хоть и маленькая, но полезная коллекция из 84 штук фавиконок. Выбирайте любую!

2.2 Как сделать Фавикон для сайта с нуля

Конечно, вы можете скачать для своего сайта и готовую фаву, но намного лучше – сделать собственную своими руками. В этом деле нам помогут так называемые Favicon Generators (генераторы фав), которые позволяют в режиме онлайн создавать красивые мини-картинки.

2.2.1 Logaster.ru

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

Скачать файлы фавикона можно в форматах ICO или PNG.
Более подробно, как создать фавикон с помощью Логастер можно прочитать

Помимо фавикона, сервис также создает логотипы, визитки, конверты и бланки.

2.2.2 Favicon.cc – генератор фавиконок

Этот незамысловатый генератор – один из самых простых и популярных, используемых для online создания favicon для сайта. Вы сможете нарисовать каждый пиксель будущей фавы (всего их 256). Перейдя на сайт, вам станет доступно рабочее окно, в котором вы можете экспериментировать.

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

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

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

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

Чтобы скачать получившийся фавикон, который вы делали для сайта, нажмите на ссылку Download Favicon (выделена красным).

2.2.3. Генератор Amichurin.Appspot.com

Еще один Generator красивых favicon, в котором в режиме online можно создать красивую картинку. Весь генератор на русском, но его функционал будет попроще, чем в предыдущем случае. Кстати, подписи, сделанные бардовым цветом, – не мои.

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

2.2.4 Генератор Favicon-Generator.org

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

2.3 Favicon из готового изображения

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

Заранее подготовьте картинку, которую вы хотите взять как основу.

2.3.1 Сервис Favicon.ru

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

Добавить картинку или фотку (основу) вы можете так:

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

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

2.3.2 Сервис Favicon.cc

Похожий генератор, но с более мощным функционалом. Чтобы создать фаву из готовой картинки, сначала перейдите во вкладку «Import Image».

Теперь нажмите «Выберите файл» и добавьте загружаемый файл. На его основе и будет создана favicon ico для вашего сайта. Кстати, вам может понадобиться функция растяжения изображения:

• Keep dimensions – при уменьшении соотношения сторон картинки останутся такими же
• Shrink to square icon – стороны изображения будут приведены к квадратному виду (картинка может исказиться).

Загрузив файл, вы сможете отредактировать его в режиме online c помощью данного генератора favicon. Когда получившийся результат вас будет устраивать, скачивайте фаву на свой компьютер.

3. Как добавить favicon на блог WordPress

С тем, откуда скачать готовый favicon для сайта или как сделать свой собственный – мы разобрались. Теперь давайте обсудим, как добавить фаву на блог Вордпресс.

Как правило, фавикона расположена в корне сайта (в корневой папке) – на это мы и будем ориентироваться. Если ваша фава лежит не в корне, просто перенесите ее туда.

Добавляется favicon.ico в два шага.

ШАГ ПЕРВЫЙ

Первым делом вам нужно найти в вашей теме ту строчку кода, которая отвечает за вывод фавикона. Откройте для редактирования файл Заголовок (header.php) и найдите такую (или похожую) строчку:

Если вообще нет ничего похожего и содержащего слово favicon.ico, тогда просто добавьте эти две строчки куда-нибудь между тегами и .

ШАГ ВТОРОЙ

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

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

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

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

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

#4. Не используйте анимированные значки. Во первых анимация поддерживается не всеми браузерами, во вторых внимание посетителя должно быть сосредоточенно на содержимом, а не на иконке.

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта сайт.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px , для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px , но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка" , выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение.ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате.ico. Поэтому сохраните его в формате.png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат.ICO

После этого мы конвертируем его в формат.ico при помощи сервиса . Зайдите на данный сервис и при помощи кнопки "Обзор" выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом добавьте следующие строки:

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом:

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

В общем, эта маленькая картинка должна быть у каждого сайта.

Как создать favicon.ico для сайта

Итак, сейчас постараюсь рассказать где, чем и как сделать favicon. Но для начала надо знать, какого размера должен быть фавикон для сайта?

Favicon – это картинка в форматах ICO, JPEG, PNG, BMP и GIF, которая может иметь разные размеры, начиная с 16×16 пикселей. Иконку именно такого размера надо обязательно загрузить на сайт для индексации роботом Яндекса.

Другие размеры имеют второстепенную роль и не отображаются в поиске Yandex, а служат для отображения в браузерах, например, на iPhone или IPad. Если хотите, чтобы ваш сайт выделялся в поисковой выдаче, запомните следующее правило.

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

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

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

Сервисы online favicon generator - создание фавикона онлайн

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

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

Простые фавикон генераторы

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

www.favicongenerator.com - пожалуй, самый минималистический сервис. Ничего лишнего - выбрали изображение, нажали кнопку “Generate Favicon! ” и скачали созданную иконку.

tools.dynamicdrive.com/favicon - простой и понятный сервис, где можно сделать favicon в трех размерах. Чтобы скачать полученные файлы, надо нажать на кнопку “Download FavIcon ” под ними.

www.cy-pr.com/tools/favicon и www.favicon.co.uk - сервисы, аналогичные предыдущему. В первом можно сделать размер фавикона 16×16 и 32×32, а во втором дополнительно 48×48 и 64×64.

www.genfavicon.com - весь процесс создания иконки включает в себя три шага:

1. Выбираем файл (JPEG, GIF, PNG) на компьютере или просто прописываем URL картинки и жмем “Загрузить изображение “;
2. Выбираем размер (16×16, 32×32, 48×48, 64×64 или 128×128) и необходимую область рисунка, если хотим сгенерировать только часть изображения, нажав “Захват и Изображение “;
3. Смотрим результат и, если все устраивает, скачиваем файл.

Создание анимированного favicon для сайта в онлайн генераторах

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

www.favicon.by - сервис на русском языке. Все, что требуется, выбрать файл, вписать текст на латинице (если надо) и нажать кнопку “Создать Favicon “. Ниже можно увидеть результат и скачать архив с файлами.

www.favicon.com.mx - сервис, полностью идентичный предыдущему, только на английском языке.

Где сделать фавикон с нуля - online редакторы favicon

antifavicon.com - этот сервис, почему-то с приставкой анти, интересен тем, что позволяет самому создать файл favicon.ico , но не в виде картинки, а как текст на цветном фоне. Все что требуется, это ввести подходящие буквы и выбрать цвета. Кстати, свой фавикон я сделал именно здесь. Думал потом переделаю, а теперь привык уже.

favicon-generator.org - здесь, кроме конвертера, есть еще и редактор иконок. Кроме того, можно загрузить созданный фавикон в публичную галерею, где его смогут свободно скачивать другие пользователи сайта.

favicon.ru - популярный российский онлайн-генератор, где можно, как создавать фавиконы из картинок, так и рисовать их. Так же тут можно заказать создание favicon специалистам за 20$. Интересно, кто-то там делает заказы?

www.favicon.cc - другой популярный генератор, похожий на предыдущий. Интересной особенностью этого сервиса является то, что здесь можно делать покадровую анимацию длительностью до 20 секунд.

Увидеть анимированный favicon и скачать его можно в окне предварительного просмотра.

www.degraeve.com/favicon - еще один online favicon generator. Этот редактор, как и предыдущие, позволяет сделать прозрачный фон иконки.

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

И все же, еще один онлайн-генератор иконок для сайта я приберег на потом. Этот сервис заслуживает отдельного поста, где я расскажу, как сделать favicon для iPhone, IPod Touch и IPad браузеров и подробнее остановлюсь на установке анимированных иконок на сайт. Кроме того, познакомлю Вас с сервисом Favicon Validator, где можно проверить и увидеть все значки favicon.ico , если этот файл содержит более одного изображения.. Всем пока!