Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.
Что такое фавикон?
Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.
Преимущества использования фавикона
Использование favicon приносит пользу со временем. Вот например зацените такие варианты:
- Когда пользователь открывает много вкладок в браузере, он может сразу определить, на какой из них находится сайт, даже если текст с названием уже не отображается;
- В выдаче Яндекса фавикон отображается слева от сайта или его страницы, что привлекает внимание посетителей и отличает его от других;
- Картинка хорошо запоминается и остается в памяти – в результате сайт становится более узнаваемым и привлекательным для пользователей.
Таким образом, фавикон – часть образа сайта, которая выполняет не только эстетическую функцию, но и делает более удобным для пользователя поиск портала в закладках, вкладках, выдаче.
Особенности работы Яндекса с фавиконками
Поисковая система Яндекс – одна из немногих, которые выделяют фавиконы сайтов и отображают их при построении списка результатов поиска. Для этого специальный бот периодически индексирует сайты и обновляет информацию о наличии у них фавиконок.
Раньше апдейты фавиконок происходили раз в пару месяцев. Сейчас, в 2018, Яндекс индексирует их гораздо бодрее и на некоторых моих новых сайтах favicon появляется уже через несколько дней.
Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса - http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.
Если фавикон не виден, это может быть связано со следующими причинами:
- Размер изображения не соответствует требуемому: 16х16 пикселей;
- Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
- Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
- У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
- Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.
Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.
Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.
Как создать фавикон
Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats
Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).
Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).
Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/ .
< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > < link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > |
Через некоторое время фавикон появится на сайте.
Некоторые умники делают фавикон в виде стрелки, треугольника, добавляют красные элементы, чтобы «юзер кликал». Так, конечно, можно делать, но за такое сайт могут искусственно занизить.
Яндекс пугает фавиконных очкошников
При разработке иконки следует учитывать, что изображение должно быть четким и хорошо различимым, несмотря на маленький формат. Поэтому лучше использовать как можно меньше отдельных объектов и не слишком много цветов. Можно посмотреть фавиконы конкурентов и подумать, как можно выделиться на их фоне.
Сервисы
Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:
- favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
- favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
- iconj и audit4web – базы, в которых можно найти готовые фавиконы.
Есть и такой сервис:
Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.
Еще такой момент — изображение для иконки не может быть анимированным, оно всегда неподвижно, даже если в основе была использована картинка с любыми не статичными эффектами.
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон ). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон .
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока :
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc . Этот сервис по построению фавиконок выглядит так:
– Да, в этом сервисе тоже есть уже готовые фавиконки.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в
Генератор фавикон - поможет преобразовать и отредактировать любое изображение, превращая его в фавикон для сайта. Сегодня статья про лучшем на сегодняшний день генератор фавикон для сайтов.
Сейчас тяжело представить сайт, у которого нет фавиконки. Фавикон - это иконка, которая располагается в адресной строке браузера или в заголовке окна (в зависимости от браузера), и которая выделяет открытый сайт/вкладку из множества других. Изначально, эти иконки разрабатывались в IE для того, чтобы выделять сайт в списке закладок браузера (в IE эти закладки назывались Favorites (избранные), и отсюда пошло название Favicon - иконка избранного.
Но сделать фавиконку своими руками не так легко. У неё должен быть формат ICO, которые требует специального ПО, для того, чтобы сделать что-то стоящее и немалых умений. Поэтому для упрощения жизни лучше использовать онлайн генератор фавикон.
Существует множество сервисов, которые позволяют генерировать favicon из картинок (это может быть логотип, или специально разработанная иллюстрация). Но у большинства из них проблемы с прозрачностью.
Проблемы с прозрачностью у сервиса генератор фавикон
Для наглядности приводим иллюстрацию «Как обрабатывают прозрачность и уменьшение размера изображения разные генераторы фавикон».
В этом сравнении мы использовали результаты, полученные на сервисах favicon.cc и favicon-generator.org. Честно говоря, до недавного времени, сами пользовались сервисом favicon.cc, но с недавних пор нашелся отличный заменитель - генератор фавикон №1.
Лучший генератор фавикон - www.xiconeditor.com
Как и у favicon.cc у этого генератора фавикон есть свой встроенные онлайн-редактор иконок, но его преимуществом является отличная работа с прозрачностью.
Вполне очевидно, что есть разница в качестве передачи прозрачности (видимо разница в качестве изменения размера загруженной картинки).
Кроме того у xiconeditor.com есть ещё одно преимущество - отличная система превью фавиконки, которая позволяет просмотреть результат в разных ипостасях без загрузки сгенерированного фавикон. У них превью намного более информативное, чем у favicon.cc.
Здравствуйте, уважаемые читатели! Сегодняшняя статья посвящена созданию фавикона (favicon.ico) для вашего сайта. Из поста вы узнаете, что такое фавикон, каких размеров бывает эта иконка и почему ее обязательно нужно сделать и установить на свой блог. Кроме того, в статье будут приведены favicon генераторы, позволяющие за пару минут создать фавикон в режиме онлайн, а также сайты, на которых можно скачать галереи и коллекции готовых фавиконок .
Для начала давайте разберемся, что такое Фавикон, зачем она нужна, может, вообще без нее можно обойтись?
1. Что такое иконка favicon и для чего она нужна
Понятие Favicon происходит из двух английских слов Favorites Icon, что можно перевести как иконка (маленькое изображение) для «избранного» . «Избранное» – это название закладок в базовом браузере Internet Exprorer. Они выглядят, например, так в браузере Хром:
Для каждого ресурса существует маленькое изображение, что-то вроде мини- . Согласитесь, что сохранять в закладки удобнее не url-адреса сайтов, а их небольшие логотипы – фавиконы. Кстати, кроме этого favicon отображается в адресной строке браузера сразу перед URL открытой страницы сайта или в заголовке закладки:
Favicon
– это файл небольшого размера (16×16 пикселов), имеющий расширение.ico (это расширение используется операционными системами для хранения иконок). Favicon.ico есть практически у каждого сайта, причем неважно, на каком он хостинге расположен или какой движок/тему использует. Онлайн генераторы и галереи favicon позволяют сделать иконку за пару минут из любого изображения, нарисовать ее с нуля или же скачать готовую, поэтому если вы еще не используете favicon на вашем блоге, то скорее исправляйте ситуацию.
Для чего нужна эта небольшая картинка? Во-первых, это мини-логотип для вашего сайта, ваши посетители будут лучше его запоминать. Поэтому если вы решите ее создать, то постарайтесь сделать так, чтобы фавикона привлекала внимание посетителей и легко запоминалась. А во-вторых, самая популярная в рунете поисковая система Яндекс в своей выдаче рядом с каждым сайтом размещает его favicon, что позволяет выделить ваш ресурс на фоне других, у которых иконки нету. Пользователи охотнее посещают те сайты, рядом с которыми красуется изображение (даже неважно какое), а это значит, что фавикон позволяет .
Кстати, у яндекса даже есть специальный бот, который занимается индексацией не контента на сайте, а только индексацией фавиконок ресурсов. Создав favicon и установив его на сайт, вам нужно будет немного подождать, пока этот самый бот яндекса его не проиндексирует, а этот процесс длится, как правило, от недели до месяца. Проверить, проиндексировал ли яндекс вашу фавикону, можно тремя способами:
- Набрать адрес вашего сайта в окне поиска от Яндекса (например, http://сайт) и посмотреть, есть ли рядом фавикон.
- Перейти по ссылке http://favicon.yandex.net/favicon/сайт (где вам нужно «сайт» заменить на URL-адрес вашего сайта). Если иконка проиндексирована, то вы ее увидите.
- Зайти в Яндекс.Вебмастер (http://webmaster.yandex.ru) и проверить наличие favicon.ico
2. Онлайн генераторы и галереи Favicon
Итак, мы уже разобрались, что представляет собой фавикона, так необходимая для сайта. Узнали, что она должна быть размером в пикселях – 16 на 16, а ее расширение должно быть.ico. Теперь есть несколько путей создания favicon.ico:
- Скачать готовую иконку из галерей favicon.
- Сделать фавикон с нуля с помощью фотошопа или онлaйн генератора.
- Сделать favicon из готового изображения (размеры изображения неважны).
2.1 Коллекции и галереи Фавикон
- http://www.thefavicongallery.com/ — небольшая галерея, включающая в себя иконки самых разных тематик. Содержит около 300 изображений. Чтобы скачать понравившуюся картинку, нужно нажать на ней правой кнопкой мыши и выбрать «сохранить как», затем сохранить фавикон на компьютер.
- http://www.iconj.com/ — более 3 тысяч иконок на любой вкус и цвет. Есть возможность сохранить изображение в формате.gif или.ico. Можно взять даже html-код иконы. Имеются анимированные фавиконы. Единственный недостаток коллекции – на одной странице расположено лишь 30 иконок, поэтому придется просматривать много страничек, чтобы выбрать подходящее изображение.
- http://www.favicon.cc/ – огромная коллекция favicons, но на одной странице находится лишь 20 штук, листать придется долго.
- http://www.favicon.co.uk/ — тоже неплохая галерея, содержащая множество favicon. На каждой странице по 144 иконки, это делает просмотр очень удобным. Тематики фавиконок самые разные.
- — небольшая коллекция (84 штуки) мини-изображений для вашего сайта.
2.2 Как сделать Фавикон для сайта с нуля
Преимущество создания favicon с нуля заключается в том, что получившаяся иконка будет уникальна, а уникальность очень важна! Поэтому лучше не полениться и потратить 5-10 минут на создание собственной фавиконы.
Проблем с генерированием иконки возникнуть не должно, т.к. тут итак все понятно.
2.2.4 Favicon-Generator.org
Еще один неплохой online generator фавиконок. Попасть на него можно по данной ссылке — http://favicon-generator.org/ .
Проблем с этим генератором возникнуть тоже не должно. На скрине переведены функции онлайн фавикон генератора.
2.3 Как сделать Favicon для сайта из уже имеющегося изображения
Если вы не хотите делать фавикон для вашего сайта с нуля, то можете использовать какое-нибудь изображение, которое и станет основой мини-логотипа. В этом случае вам нужно будет заранее подготовить картинку (желательно квадратную, иначе при создании favicon.ico возможно искажение узора), а затем использовать ее в онлайн сервисе favicon generator. Давайте рассмотрим два самых популярных ресурса.
2.3.1 Favicon.ru
Онлайн генератор очень прост в использовании, он с легкостью преобразует любое изображение любых размеров в небольшую иконку 16×16 пикселей. Сейчас вы сами убедитесь в простоте работы с этим сервисом.
Добавить изображение можно двумя способами:
- С помощью кнопки «Выберите файл» найти на компьютере нужное изображение и загрузить его.
- Ввести в поле адрес картинки в интернете (при этом данный файл может даже не быть на вашем компьютере), и сервис все сделает сам.
После того как файл загрузится, вам останется лишь нажать на кнопку «Создать favicon.ico! » и подождать несколько секунд. Далее вам нужно будет лишь скачать фавикон на компьютер.
2.3.2 Favicon.cc
Этот онлайн generator мощнее предыдущего, но и сложнее его. Для начала перейдите по ссылке – favicon.cc , а затем нажмите «Import Image» (в левом окне).
Далее нажмите на кнопку «Выберите файл» и загрузите нужную картинку. На основе ее и будет создана фавикона для вашего сайта. При этом вам нужно будет выбрать, что делать с изображением при его уменьшении:
- Keep dimensions – оставить соотношения сторон картинки неизменными.
- Shrink to square icon – привести стороны изображения к квадратному виду, при этом картинка может исказиться.
После того как загрузите картинку, вы сможете отредактировать ее в онлайн генераторе или же оставить ее неизменной. Если полученная favicon.ico вас устраивает, то скачивайте ее на компьютер.
3. Как установить favicon на блог WordPress
Чаще всего фавикон находится в корневой папке сайта, кроме того, это и удобнее, поэтому мы будем рассматривать именно этот вариант. Делается это в два шага.
ПЕРВЫЙ ШАГ . Сначала вам нужно будет найти в теме строчку html-кода, указывающую путь к фавиконе. Для блога на Вордпресс вам нужно найти файл header.php (Заголовок) и найти строчку, она должна выглядеть примерно так (она может немного отличаться в зависимости от темы):
Вам нужно заменить эту строчку на следующие две:
| < link rel= "icon" href= "/favicon.ico" type= "image/x-icon" > |
| < link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" > |
ВАЖНО! Эти строчки должны быть размещены внутри тегов
иВТОРОЙ ШАГ. Теперь вам нужно добавить фавикон в корневую папку сайта. Зайдите на ваш хостинг и поместите в папку с вашим сайтом файл с именем favicon.ico (размером 16×16 пикселей).
Если вы все сделали правильно, то теперь ваш сайт обзавелся собственной фавиконкой.
Структура : Фавикон — это маленький значок, который используется для визуальной идентификации вашего сайта в закладках, также его вы видите рядом с вашим сайтом или именем страницы на вкладках браузера. Как правило, фавикон представляет собой квадрат размером 16х16 пикселей в формате favicon.ico. В этой стате мы объясним какая “основа” вам нужна для начала работы, поможем вам создать фавикон с помощью графических редакторов и расскажем о способах добавления фавиконки на сайт. Что нужно для начала работы?
- Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
- .PNG формат изображения;
- Графический редактор Adobe Photoshop или GIMP.
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
1) Откройте логотип в формате PNG на прозрачном фоне в редакторе нажав: “Файл” — “Открыть” и выберите изображение на вашем компьютере. 2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
3) Теперь, измените размер логотипа на 16х16 пикселей нажав: “Изображение” — “Размер изображения”
. 
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть. 
5) Сохраните изображение нажав “Файл” — “Сохранить как”
и выберите тип файла “PNG”
. 
Если ваш логотип выглядит отлично, то переходите к шагу 4. Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом. 2) Удалите текст и оставьте только иконку: воспользуйтесь инструментом “Пипетка” , чтобы выбрать цвет в соответствии с фоном — цвет на палитре автоматически измениться на нужный. Теперь, кликните на инструмент “Кисть” и зарисуйте текст.
3) Измените размер нажав “Изображение” — “Изменить размер”
, и в соответствующем поле введите показатели 16х16 пикселей. Если изображение выглядит пропорционально — сохраните в формате.PNG и переходите к шагу 4. 
Создаем фавикон с помощью GIMP — GNU Image Manipulation Program
GIMP — это графический редактор, который позволяет пользователям работать с векторной графикой. Преимущество данной программы в том, что вы можете создать фавикон в формате.ICO и не придется, как в случае с Adobe Photosop, использовать конвертеры изображений. 1) Откройте файл в программе, нажав “Файл” — “Открыть” и выбрав нужное изображение с компьютера.
2) Теперь нужно удалить текст, чтобы осталась только иконка: кликните по цветовой палитре и укажите цветовой код корпоративного фона. Если он вам не известен, просто кликните на инструмент “Пипетка”
, наведите его на фон логотипа и кликните левой кнопкой мышки — цвет задастся автоматически. Теперь, используя инструмент “Кисть”
, зарисуйте ненужный текст. 
3) Уменьшите размер логотипа до стандартного размера фавиконки — 16х16 пикселей, нажав: “Изображение” — “Изменить размер изображения”
. 
4) Экспортируйте лого нажав “Файл” — “Экспортировать как …”
. 
5) И выберите тип файла для экспорта — Значок Microsoft Windows с расширением ICO. и кликните “Экспортировать”
. 
Готово! Теперь, вы можете использовать фавикон на сайте! Преимущества использования.ICO перед.PNG или.GIF
- Совместимость: все браузеры, включая IE 5.0, поддерживают формат.ico.
- Избежание ошибок сервера 404: все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать файл favicon.ico, поэтому лучше всегда иметь файл favicon.ico.
- Файл.ico может содержать более одного значка, поэтому не нужно создавать несколько файлов для значков размерамы 16×16 и 48×48 пикселей.
Конвертируйте.PNG в.ICO с помощью онлайн-конвертеров
Для того, чтобы конвертировать.PNG файл в.ICO вы можете использовать онлайн-конвертеры. Мы, для примера, выбрали online-convert.com, но вы можете выбрать любой другой из поисковой выдачи, принцип работы у них примерно одинаковый. Итак: 1) Войдите на сайт и в левом сайдбаре выберите: “Конвертер изображений” — “Конвертирование в ІСО”.
2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”
, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”. 
3) Теперь, нажмите “Загрузить”
, чтобы скачать ваш файл в формате.ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP. 
Как установить фавикон на WordPress?
Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php. 1) На WordPress откройте “Административную панель”.
2) Войдите в раздел 
3) Нажмите на 
4) Нажмите на файл, который называется “Header”
или, чтобы редактировать. 
5) Найдите строку кода, которая начинается с и заканчивается на /favicon.ico «/>
. Измените его, если он существует, или добавьте следующий код под HTML-тегом
. В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно. Код: /favicon.ico»/>
; 6) Сохраните изменения. Выводы
: При разработке вашего сайта вы должны быть уверенны, что не упустили важные детали, даже такие мелкие как фавикон. Добавить иконку действительно не сложно. Но эта крошечная вещь показывает, что вы продумали свой дизайн и позаботились о деталях. У вас остались вопросы, или вы хотите поделиться опытом создания фавикона для вашего сайта? Добро пожаловать в комментарии.