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

Где отображаются фавиконы? Очень просто:

  1. во вкладках браузера;
  1. в поисковой выдаче;

  1. на панели закладок браузера.

Фавикон выполняет следующие функции:

  • Брендинг.
  • Облегчает идентификацию сайта пользователем (картинку всегда легче запомнить, чем адрес сайта).
  • Придает солидности сайту.

Теперь давайте остановимся на том, что именно даёт использование фавиконок.

Узнаваемость бренда

По предыдущему скриншоту Вы уже и сами догадались, что пользователь с гораздо большей вероятностью выберет сайт с уже знакомой фавиконкой, даже если он находится внизу ТОП-10. Примерно та же история и с историей браузера. Например, пользователь запомнил фавиконку Вашего сайта, но забыл по какому запросу к Вам попал. Что делать? Правильно - идти смотреть историю браузера и листать ее до тех пор, пока на глаза не попадется та самая фавиконка. На данный момент самые узнаваемые в мире фавиконы у Яндекса, Google, Facebook, ВКонтакте, Одноклассники и Telegram. Если же у сайта нет фавикона, то его не будет и в поисковой выдаче, а в истории браузера вместо него будет «пустой лист».

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

Повторные посещения

Как Вы уже знаете, людям гораздо «теплее» относятся к картинкам, нежели к тексту. А теперь представьте, что посетитель куда-то торопится. Что он делает? Правильно - добавляет сайт в закладки, чтобы не потерять. Затем, когда у пользователя появляется свободное время, он принимает решение вернуться на сайт и… В закладках Ваш сайт будет найден не столько по заголовку статьи, сколько по новой/запомнившейся фавиконке. Если фавиконки нет, то пользователь может подумать, что ссылка битая и удалит ее из закладок.

Именно поэтому фавикон должен быть заметным и узнаваемым. Самые яркие примеры:

  • буква G, являющаяся фавиконкой поисковой системы Google;

  • ядовито-красная буква Я, являющаяся фавиконкой поисковой системы Яндекс;

Экономя время пользователя

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

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

Обратите внимание, что мир смартфонов не стоит на месте - когда-то смартфон с экраном 640х360 пикселей считался роскошью, а сегодня и экраном в 1920х1080 пикселей (при той же диагонали) уже никого не удивишь. Из этого можно сделать только один вывод - под разное разрешение экрана необходимо делать разные фавиконы (а если точнее - разного размера.

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

Преимущества для SEO

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

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

Более того, у Яндекса есть даже свой собственный робот, который не занимается ничем, кроме индексирования фавиконок (к слову - сроки индексирования - от 1 недели до 1 месяца).

Как проверить, проиндексировалась ли Ваша фавиконка, или нет:

  1. заходим в Яндекс, вводим адрес сайта, а затем смотрим поисковую выдачу. Если фавиконка проиндексировалась - она будет и в выдаче;
  2. проверить наличие файла favicon.ico через Яндекс.Вебмастер.

Оба способа являются элементарными и не отнимают более 15 секунд.

Ну и, раз уж сказали про Яндекс, скажем и про Google. Здесь Вы уже и сами догадались, что в поисковой выдаче Google фавиконы не отображаются. А вот теперь самое интересное. В сторону Google по этому поводу уже давно летят тапки, причем от простых пользователей. Да-да, не от нас - SEO-шников, а именно от Вас - от простых людей, которые к поисковой оптимизации сайтов не имеют ни малейшего отношения, которые совершают покупки, гуляют по различным сайтам и т.д.

И не надо сейчас говорить, что «может они вообще не в курсе проблемы?» - еще как в курсе! Во-первых, они открыто признали эту ошибку. Во-вторых, они прямым текстом сказали, что «нет, мы не будем это исправлять». В-третьих, именно с их подачи для Mozilla FireFox был выпущен плагин, который автоматически подгружал фавиконки сайтов в поисковую выдачу. Плагин так и называется - Google Favicon. В-четвертых, это было еще в далёком 2012 году. И с тех пор Google так и не добавил фавиконы в поисковую выдачу.

Ну и еще пару слов про плагин Google Favicon. Даже не пытайтесь его искать и устанавливать в Ваш FireFox, т.к. он слишком давно не обновлялся, а потому не совместим с последними версиями браузера FireFox. Однако, можно найти аналогичные ему плагины.

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

Фавиконы в браузерах ПК и на смартфонах

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

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

И несмотря на то что Google Chrome, Mozilla ForeFox, Opera (начиная с 7 версии) и Apple Safari (начиная с 4 версии) уже давно имеют поддержку фавиконок в.png-формате, предпочтение всё равно отдается именно.ico-формату. Отдается настолько, что если на один и тот же сайт загрузить две фавиконки в обоих форматах, то предпочтение будет отдано именно.ico-формату.

Как сделать фавикон для сайта

Способ 1: воспользоваться одним из специальных онлайн-сервисов, благо их, мягко говоря, много:

  • FaviconGenerator — позволяет преобразовать картинки из png, jpeg, jpg, gif в фавиконку в нужном Вам формате.
  • AntiFavicon — интересен тем, что позволяет создать фавикон с надписью. Т.е. в поля «Top text» и «Bottom tex» вводится текст, а в области «Colors» задаётся нужная цветовая гамма.
  • FavIcon from Pics — предельно прост - загружаете в него желаемую картинку, а на выходе получаете фавиконку.
  • Iconj — основная фишка в том, что Ваша фавиконка будет храниться на данном сервисе пожизненно. Т.е. Вы загружаете на сервис картинку, конвертируете ее в фавиконку, а затем получаете, во-первых, возможность ее скачать, а во-вторых, ссылку на скачивание (если на данный момент не можете или не хотите ничего скачивать).
  • DeGraeve — один из самых мощных фавикон-генераторов. Можно сделать фавиконку «с нуля», либо загрузить уже готовое изображение, внести поправки, а затем скачать в.ico-формате.
  • Generator — почти полный аналог предыдущему.

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

Но что делать, когда фавиконку все-таки хочется, а разрабатывать что-то своё нет времени/желания/возможности? Очень просто - существуют огромные библиотеки готовых решений. Скачиваете любую, в Фотошопе (в крайнем случае - в Paint’е) меняете размер до 16х16, сохраняете с.ico или.png, даёте файлу имя favicon и готово! Если ни одна из них не устроит - ничего страшного. Главное - помните, что для придумывания фавиконки много ума не требуется. И сразу же несколько конкретных примеров.

Очевидно, что на создание такой фавиконки ушло секунд 5-10, не больше.

Пример 2 - блог Comp Security. Здесь всё еще проще, т.к. на фавиконке нарисована просто красная стрелочка.

Пример 3 - блог СтоКрат. Как видите у нас с MegaIndex’ом только одно принципиальное отличие - у них фавиконка квадратная, а у нас - овальная.

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

Способ 2 - нарисовать самостоятельно по принципу «инициалов сайта».

Шаг 1. Открываем Paint, нажимаем на «Изменить размер». В открывшемся окне снимаем галочку «Сохранять пропорции» и выставляем размер. Неважно какой, главное - чтобы в итоге получился квадрат.

Шаг 2. Выбираете инструмент «Заливка», выбираете нужный цвет из палитры, а затем заливаете получившийся квадрат.

Шаг 3. Выбираете инструмент «Надпись» и пишете на фавиконке «инициалы» сайта. При необходимости можно изменить как сам шрифт, так и его размеры, а также сделать «инициалы» подчеркнутыми, наклонными и/или жирными.

В нашем случае в качестве «инициалов» будет выступать два знака доллара.

В данном случае совсем необязательно сохранять в.png, т.к. файл все равно надо будет конвертировать в.ico.

Шаг 5. Для конвертирования воспользуемся сервисом http://pr-cy.ru/favicon/ - загружаем картинку, обрабатываем, скачиваем готовую иконку.

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

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

Способ 3 - воспользоваться сервисами, имеющие встроенные инструменты рисования, с возможностью загружать изображения с ПК, редактирования и уменьшения до нужных размеров.

Трёх примеров будет более, чем достаточно (ибо их тоже овер как много):

  1. Favicon.ru - если коротко, то с помощью данного сервиса можно проделать всё то, о чем было рассказано в способе 2.
  2. Favicon-generator.org - позволяет редактировать уже ранее созданные кем-то иконки.
  3. Logaster.ru — вообще-то он предназначен для того, чтоб генерировать логотипы, но зато в пару к логотипу генерирует и фавиконки. Имейте в виду, сервис платный.

Способ 4 - фавикон-гаререи.

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

Thefavicongallery- более 300 фавиконок, которые можно сразу же скачивать;

Audit4web - огромное количество фавиконок на различные тематики;

Iconj- более 3000 фавиконок.

Способ 5 - заказать у дизайнера. Дорого, но зато престижно и красиво.

Способ 6 - аналогичен способу 2, но с использованием гораздо более крутых и продвинутых графических редакторов (например, Photoshop). Такой способ потребует достаточно много времени, но и результат будет не таким простым, как во втором способе.

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

Как установить фавикон на сайт

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

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

Во-первых, имя файла должно быть favicon.ico или favicon.png. Этот файл нужно загрузить в корневой каталог Вашего сайта (как правило, это папка htdocs или public_htm). Затем заходите на Ваш сайт и смотрите, загрузилась фавиконка или нет. Если нет - попробуйте очистить кэш браузера. Если даже после очистки нет результата - ничего страшного.

Во-вторых, на некоторых сайтах место для фавиконки по умолчанию задано в другом месте. В этом случае заходим на сайт, правый клик - выбор пункта «Просмотр html-кода», либо «Просмотр кода страницы» (ну или что-то подобное, в разных браузерах по-разному).

Не исключен и такой вариант задания служебной гиперссылки link:

Итак, путь, куда нужно загружать фавиконку, мы вычислили - туда и загружаем. Теперь это должно сработать на все 100%. Загружать можно по-разному:

В случае с CMS Joomla фавиконка, как правило, живёт в папке с активированным на данный момент шаблоном оформления. Исключение - Joomla 1.5 - там путь прописывался в файле index.php, находящийся в папке с тем же шаблоном. Т.е. в случае с Джумлой потребуется пройти по адресу /templates/папка_с_используемым_шаблоном_оформления/favicon.ico и заменить имеющуюся там фавиконку.

Аналогичная ситуация бывает и с WordPress-сайтами, но это редкость:

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

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

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

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

Например, в WordPress это файл header.php, располагающийся в папке с активной темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Файл header.php можно отредактировать как через FTP, так и через штатный редактор WordPress, так и через админку хостинг-провайдера.

Установка анимированной фавиконки

Принципиальных отличий между установкой статичной и анимированной фавиконки нет, за исключением двух моментов:

  • фавиконка должна быть в gif-формате (это специальный формат для анимации изображений);
  • между и прописывается другой код:

Однако, стоит отметить, что анимированная фавиконка - это не так козырно, как кажется на первый взгляд:

  • во-первых, никаких анимаций в поисковой выдаче не будет - Яндекс преобразует gif-анимацию в статичный png, и Вам останется только молиться, чтоб Яндекс для этих целей взял правильный кадр;
  • во-вторых, анимированная фавиконка будет работать только в FireFox’е.

Именно по этим двум причинам с анимированными фавиконками пока что нет смысла заморачиваться. Если только «на будущее».

Выводы

Итак, что же мы выяснили?

  1. фавиконка может сыграть большую роль в идентификации сайта;
  2. именно фавиконка зачастую позволяет запомнить сайт;
  3. фавиконка значительно упрощает поиск конкретного сайта в закладках, истории браузера и в поисковой выдаче Яндекса;
  4. фавиконку можно без проблем создать «дома на коленке»;
  5. существует крайне много сервисов по созданию, редактированию и выбору уже готовых фавиконок.

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

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

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

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google Chrome Internet Explorer Firefox Opera Safari
href="httр://mysite.ru/myicon.ico"> Да Да Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 9) Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 9) Да Да Да

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

>> Как добавить иконку на сайт

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

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

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

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

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

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

Пример: как добавить иконку "favicon" на сайт.

Создание иконки для сайта я покажу на примере одного простого сервиса. Данный сервис находится по url-адресу http://favicon.ru . После того, как Вы зайдете на данный сервис, то у вас появиться вот такое окно:

Здесь вы можете сделать 4 действия - это заказать favicon у дизайнера (стоимость заказа 500 руб), нарисовать favicon самому внизу страницы с помощью инструментов и клеточного поля, загрузить понравившуюся вам картинку, после чего результат будет отображаться в Предпросмотре внизу страницы (помечено красным квадратом), предложить свои услуги дизайнера для создания иконок заказчикам.

После того как вы нарисуете или загрузите картинку и вас будет все устраивать, то следующим этапом вам нужно будет ее скачать себе на компьютер.Для этого нажмите на кнопку "СКАЧАТЬ FAVICON " и сохраните его на своем компьютере. После этого вам нужно данную иконку загрузить на свой сайт в корень сайта (там, где находится ваша главная страница) и после чего у вас в браузере в окне, как показано на скриншоте выше, должна, загрузится ваша иконка сайта.

Если ваша иконка не появиться на сайте в верху url-адреса сайта, то скопируйте и вставте себе на сайт на каждую страницу сайта внутри парного html тега такой код:

Если у Вас не появиться ваша иконка на сайте, то сделайте еще пару действий;

1. Перезагрузите вашу страницу сайта.

2. Потяните мышкой зажав левую кнопку за угол где должна появиться иконка и потяние ее вниз.

Все после этого, радуемся появлением иконки на своем сайте.

В Яндексе ваша созданная иконка появится не сразу, а после того как Яндекс переиндексирует ваш сайт.

На этом у меня все.

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

Фавикон - это сокращение от «избранный значок» (в переводе с английского языка). Название происходит от списка закладок в Internet Explorer, который называется «Избранное»/«Список избранного». При добавлении сайта в закладки Explorer (версии 5 и выше) обращается к серверу с запросом, имеет ли ресурс файл favicon.ico. Если такой файл существует, он будет использоваться для предоставления значка, который отображается рядом с закладкой с текстом.

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

Значки на вкладках браузера

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

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

Как создать фавикон?

Чтобы создать favicon.ico, вам необходимо просто сохранить PNG-файл размером 16х16 и преобразовать его в значок ресурса с png2ico. По собственному усмотрению, вы можете добавлять различные изображения в один и тот же значок, чтобы обеспечить альтернативные решения. Большинство браузеров используют только формат 16x16 для такого изображения, но в другом контексте (например, при перетаскивании URL из адресной строки на рабочий стол) большая иконка может быть отображена на рисунке. Если значок ресурса содержит только изображения 16х16, он будет масштабироваться до нужного размера, поэтому технически совершенно не нужно добавлять альтернативные решения. Однако это может повысить качество изображения. Перед тем, как установить фавикон на сайт, обязательно просмотрите, как выглядит картинка в разных размерах.

Имейте в виду, что для пользователя с медленным интернет-соединением фавикон может увеличить время загрузки страницы на несколько секунд. Это возможно, если файл изображения слишком большой, поэтому не переусердствуйте. Добавление альтернативы формата 32х32 должно быть достаточно, чтобы картинка начала хорошо смотреться даже в ситуациях с крупными значками. Использование большего количества вариантов - это бонусы, выполняемые только по желанию разработчика сайта. Старайтесь поддерживать количество цветов до 16 и создавайте 16-цветную иконку с помощью png2ico (или даже черно-белый значок). Это позволит сохранить меньший файл, который загружается быстрее.

При создании изображения для добавления в favicon.ico не стоит забывать и о том, что иконки могут быть отображены на различном фоновом цвете. По этой причине лучше использовать прозрачность, а не сплошной фон. Хорошо подумайте над тем, как установить фавикон наиболее грамотно, чтобы он гармонировал с любым задним планом. Стоит отметить, что можно устанавливать промежуточные значения, которые измеряются в процентах. Специалисты говорят о том, что идеальной является настройка, включающая в себя примерно 30-40% прозрачности фона.

Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона - не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).

Создание иконки с помощью «Фотошопа»

Специалисты рекомендуют использовать например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в JPEG или GIF. После этого нужно определить, как установить фавикон на сайт.

Зачем нужно добавлять на сайт?

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

Как установить фавикон на сайт html

Чтобы добавить ваш новый фавикон на веб-страницу, следует установить его на сервер в ту же папку, где расположена веб-страница (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html). Это те данные, которые в первую очередь любой браузер будет искать для загрузки. Если он не найдет иконку, то проверит каталог верхнего уровня сервера (www.example.com/favicon.ico для www.example.com на сервере). По этой причине, если вы установите его там, сможете иметь значок по умолчанию для всех страниц вашего домена. В зависимости от браузера и конфигурации, фавикон не всегда отображается, даже если он находится в одном из вышеуказанных мест и веб-страница видит его.

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

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

Как добавить фавикон на блог WordPress

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

Как добавить фавикон в WordPress

Начиная с версии WordPress 4.3 можно добавить favicon на сайт из области администратора. Просто перейдите в «Вид»/«Настройки» и выберите вкладку «Сайт».

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

Добавление фавикона на блог

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

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

Как установить фавикон на WordPress старой версии (4.2 или ниже)

Загрузите свой фавикон в корневой каталог сайта по После этого можете просто вставить этот код в файл header.php нужной темы.

< link rel="icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

< link rel="shortcut icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

Замените wpbeginner.com на URL вашего сайта, и все будет сделано. Если блог не имеет файла header.php или вы не можете найти его, то используйте специальный плагин. Установите и активируйте его в настройках сайта. После активации плагина зайдите в «Настройки», найдите пункт «Вставка колонтитулов», перейдите к вкладке «Вставка кода», приведенного выше в разделе заголовка, и сохраните настройки.

Если не хотите разбираться с тонкостями работы с FTP, но при этом все же интересуетесь, как установить фавикон, также можете использовать специальный плагин, который регулирует загрузку иконки на всех этапах. Такие дополнения к движку доступны не только для WordPress, но и для других популярных систем, в том числе для Joomla.

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

Что такое favicon

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

Как создать favicon

Если говорить о технических характеристиках, то стандартный размер для фавиконки - 16 х 16 пикселей; также возможно использование изображения размером 32 x 32 пикселя и совсем редко 48 х 48. Изначальный формат этого знака - ico, однако сейчас последние версии браузеров поддерживают также вывод фавиконок в форматах png, gif и jpeg. Набирает популярность и еще один вид фавиконки - анимированная (или динамическая). В этом случае это будет не статическая картинка, а меняющийся файл в формате gif. При выборе подобного формата имейте в виду, что на данный момент его вывод поддерживается только двумя браузерами: Firefox и Opera, а остальные браузеры будут показывать лишь первый кадр.

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

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

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

Ресурсы для создания фавиконок:

  • http://www.xiconeditor.com/ - вы можете загрузить изображение и затем отредактировать его или нарисовать favicon с нуля, множество настроек позволят вам воплотить в жизнь любые творческие желания;
  • http://www.favicon.cc/ - более простой редактор для создания фавиконок, на этом ресурсе вы также найдете коллекцию различных значков, которые можно отсортировать по тегам или названию;
  • http://antifavicon.com/ - редактор для тех, кто хочет вместо картинки использовать favicon в виде отдельных букв или слов.

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

Как загрузить favicon на сайт

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

Если вы хотите разместить favicon.ico в какой-либо другой папке, вам следует прописать путь к этому файлу внутри контейнера :

Тип (type) прописывать необязательно, но в дальнейшем эта информация понадобится для настройки кэширования.

Если вы используете CMS Wordpress:
вы можете сделать так, как написано выше, либо использовать специальный плагин Favicon by RealFaviconGenerator. Еще обратите внимание на официальную документацию Wordpress, касающуюся favicon: https://codex.wordpress.org/Creating_a_Favicon

Если вы используете CMS Joomla:
вам нужно загрузить файл в директорию /joomla/templates/<ваш шаблон>. Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

Как оптимизировать favicon

Используйте кэширование - пропишите в файле.htaccess соответствующую строку:

ExpiresByType image/x-icon "access 1 year"

Не забудьте про Nginx: проверьте, что тип файла ico включен в перечисление в файле конфигурации веб-сервера:

Location ~* \.(jpg|jpeg|gif|ico|png)$ { expires 365d; }

Как добавить favicon для портативных устройств

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

Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch - пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

Что касается формата, то изображения должны быть в формате png.

В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/ .

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

Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

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

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

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