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

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных), стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Содержание:

• Формат ICO
• Файл favicon.ico
• image/vnd.microsoft.icon vs image/x-icon?
• BugFix для Internet Explorer
• Другие графические форматы фавикон
• Фавикон в HTML5
• Favicon.ico для мобильных браузеров
• Фавикон для Apple
• Фавикон для Android
• Адрес файла favicon.ico
• Как установить фавикон иконку на сайт?

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант

установки фавикон на сайт имеет следующий вид:

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

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon.

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon.

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» />
<![endif]—>

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

<link rel=»icon» type=»image/png» href=»http://sitename.ru/favicon.png» />
<link rel=»icon» type=»image/gif» href=»/favicon.gif» />
<link rel=»icon» type=»image/jpeg» href=»/favicon.gif» />
<link rel=»icon» type=»video/png» href=»/animated.png» />

<link rel=»icon» type=»image/svg+xml» href=»/favicon.svg» />

Обращаю внимание на то, что для APNG использует MIME-тип video/png, а для GIF (даже анимированного) – image/gif. Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml.

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5, подробней читайте тут. Интересным здесь является атрибут sizes, который задаёт размер иконок для визуально отображения в формате:

{ширина1}x{высота1} [{ширинаN}x{высотаN}] | any

Другими словами, можно перечислить соответствующие размеры через пробел или указать значение any (для всех). В документации HTML5 приводится такой пример:

<link rel=icon href=favicon.png type=»image/png»>
<link rel=icon href=windows.ico type=»image/vnd.microsoft.icon»>
<link rel=icon href=mac.icns>

<link rel=icon href=iphone.png type=»image/png»>
<link rel=icon href=gnome.svg type=»image/svg+xml»>

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Например, для Safari на iOS рекомендуется следующий набор отношений:

<link rel=»apple-touch-icon» href=»/2014/05/ipad-retina.png» />
<link rel=»apple-touch-icon» href=»/2014/05/iphone-retina.png» />
<link rel=»apple-touch-icon» href=»/2014/05/ipad.png» />
<link rel=»apple-touch-icon» href=»/2014/05/iphone.png» />

Если атрибут sizes не указан, используется значение по умолчанию 57×57.

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

• apple-touch-icon-57×57.png
• apple-touch-icon-72×72.png
• apple-touch-icon-114×114.png
• apple-touch-icon-144×144.png

Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов, используйте ключевое слово precomposed, например:

<link rel=»apple-touch-icon-precomposed» href=»/2014/05/ipad-retina.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/iphone-retina.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/ipad.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/iphone.png» />

Здесь тоже имеется набор автоматически распознаваемых имён:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-72×72-precomposed.png
• apple-touch-icon-114×114-precomposed.png
• apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

<link rel=»apple-touch-icon» href=»/2014/05/icon.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/icon.png»/>

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

<link rel=»icon» type=»image/png» href=»/favicon.png» />

или использовать относительный путь.

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

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» />
<![endif]—>
<link rel=»icon» type=»image/png» href=»/favicon.png» />
<link rel=»icon» type=»image/gif» href=»/favicon.gif» />
<link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57.png» />

<link rel=»apple-touch-icon-precomposed» href=»/apple-touch-icon-57×57-precomposed.png»/>

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut. Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57×57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта (/ – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

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

[В помощь начинающему веб-мастеру]

Зачем устанавливать favicon на сайт?

Многие начинающие веб-мастеры принебрегают установкой иконки на свой сайт. Из-за отсутствия favicon.ico вытекает множество неприятных проблем. Например, сайт хуже индексируется поисковиками — это давно доказано опытом. Яндекс.Вебмастер будет капать вам на мозг пока вы не исправите эту проблему и не просто так. Представьте следующую ситуацию. При поисковом запросе тенты тамбов система выдаёт два первых результата. 

 

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

---

Как должна выглядить иконка?

Иконка должна быть размера 16×16. В противном случае, если будет 32×32 или 64×64, как Яндекс так и Google, не станет отображать ваш фавикон при поисковом запросе. 

Формат иконки должен быть строго .ico

Название вашего файла с иконкой строго — favicon.ico

Как создать favicon?

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

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

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

После этого нужно прописать необходимый html-код между тегами <head></head< вашего сайта.

<link rel=»icon» href=»http://ваш_сайт.рф/favicon.ico» type=»image/x-icon» /> 

<link rel=»shortcut icon» href=»ваш_сайт.рф/favicon.ico» type=»image/x-icon» /> 

Иногда достаточно только загрузить файл на сайт с названием favicon.ico, а иногда в конструкторах сайтов предусмотрена вставка фавиконки. Например, в ukit конструкторе. Для этого необходимо зайти в настройки сайта и просто вставить необходимое изображение размера 16×16 или формата .ico .

Установка Favicon (фавикон) на WordPress сайт

(Последнее обновление: 08.05.2019)

Привет всем! Фавикон (Favicon) WordPress — как установить/добавить/поставить? Очень легко и просто. Как только вы создали блог/сайт на платформе WordPress, произвели базовую настройку вордпресс пора подумать об установке фавикона (favicon) для сайта. Инструкция: как установить favicon на WP с видео уроком.

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

Установка favicon на сайт WordPress

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

Что такое favicon?

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.

Фавиконка для Яндекс

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавиконки в результатах поиска:

Картинка, которая отображается в сниппете в результатах поиска Яндекса

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

Фавиконы открытых сайтов

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

Как установить favicon на WordPress

Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:

Консоль WordPress — настроить свой сайт

Затем, на странице визуальной настройки (Customizer)  сайта откройте пункт Свойства сайта:

Настройка сайта — Свойства сайта WordPress

Да чуть не забыл, картинка у вас должна быть уже подготовлена — любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта — не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы.

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

Если вам нужна картинка WordPress для значка сайта, то официальные находятся здесь — https://wordpress.org/about/logos/.

В свойствах сайта — Иконка сайта — нажмите Выбрать изображение:

Иконка сайта — Выбрать изображение

Выберите файлы

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

Иконка вашего сайта вордпресс

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

Фавиконка установленная на сайт WP

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

Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/тему вордпресс.

Видео — Как установить Favicon WordPress

На этом, дорогие друзья, у меня все. До встречи. Пока, пока!

Поделиться в социальных сетях

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

Доброго времени суток, друзья!

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

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

Расскажу все, что знаю о данной иконке. На что она влияет, как ее лучше создать и так далее.

Прежде, чем начать обсуждать данные вопросы я хотел бы разъяснить вопрос: «Что же вообще такое Favicon и где его можно увидеть?».

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

Вот, как выглядит моя иконка во вкладке браузера.

А вот, как та же иконка отображается в выдаче поисковой системы Яндекс.

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

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

Зачем нужен Favicon

Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.

• Продвижение и узнаваемость бренда.

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

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

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

Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.

• Увеличение количества кликов из выдачи, а соответственно и прирост трафика.

Каким боком связан Favicon с количеством переходов на ваш сайт? Дело в том, что очень важным моментом при предварительной оценке вашего сайта посетителем, является анализ внешнего вида вашего сниппета в выдаче поисковой системы. Только использованием фивикона вы уже увеличиваете один из важнейших поведенческих факторов — CTR (кликабельность) в выдаче.

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

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

• Увеличение конверсии сайта.

Каждый сайт должен иметь свою конверсию вне зависимости от его типа. Блог, интернет-магазин, одностраничный сайт, страница подписки, контентный сайт — не важно. У каждого ресурса есть своя задача, эффективность которой измеряется конверсией.

В конверсии важна каждая мелочь. Даже расположение слов и их длина. Фавикон — не исключение. Чем он качественней и более лучше описывает вид деятельности сайта или компании, тем больший процент он придает общей конверсии.

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

Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.

Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.

к содержанию ↑

Как создать Favicon

Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:

1. Создание самого дизайна и оформления;
2. Создание самой иконки.

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

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

Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:

1. Много париться и сделать самому;
2. Обратиться к профессионалам.

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

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

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

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

Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.

к содержанию ↑

Создаем иконку

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

Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.

Будем считать, что изображение вы создали. Можно двигаться далее. Переходим на сервис (кликните сюда) и оказываемся на странице, где можем выбрать наш файл изображения любого из 2х размеров выше.

Когда выбрали иконку, мы можем нажать на кнопку «Create icon», после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.

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

После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.

Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.

к содержанию ↑

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

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

Процесс установки состоит из 2х этапов:

1. Загрузка иконки на сайт;
2. Подключение вывода иконки на всех страницах.

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

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

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

Покажу так, как сделал я. Для загрузки файлов на сайт и использую ftp клиент FileZilla (тут подробная инструкция). Фавикон в моем случае лежит в папке с моей темой оформления, то есть в папке шаблона, где лежат все его файлы и папки (см. ниже).

Как видим, имеются все файлы и папки шаблона и среди них находится иконка.

После загрузки иконки на хостинг, необходимо сделать ее загрузку на всех страницах сайта. Для этого нужно добавить определенную строчку кода в файл header.php вашей темы в область между открывающим и закрывающим тегами <head></head>.

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

<link rel=»shortcut icon» href=»http://ваш-домен/wp-content/themes/название-темы/favicon.ico» />

<link rel=»shortcut icon» href=»http://ваш-домен/wp-content/themes/название-темы/favicon.ico» />

Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.

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

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

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

После этого все в ваших головах должно стать на свои места.

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

На этом все. До связи

С уважением, Константин Хмелев.

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

Здравствуйте, дорогие друзья! Хотите научиться впечатлять ваших посетителей еще до того, как они посетят ваш сайт? Смелое заявление, не так ли? Только представьте, ваши потенциальные подписчики еще не зашли на ваш блог, никогда о нем не слышали, но они уже заинтересованы и стремятся как можно быстрее на него попасть!

 

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

 

Что такое фавикон

 

Разберемся для начала с терминологией.

 

Зайдите в вашу любимую поисковую систему и наберите любой поисковый запрос, ну, например, «кредит». А теперь внимательно посмотрите на результаты выдачи.

 

 

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

 

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

 

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

 

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

 

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

 

Чтобы что-то куда-то устанавливать, сначала надо его сделать. Существует два разных способа:

 

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

 

 

Если работаете с лого, то пытайтесь, чтобы оно занимало всю площадь, ведь если сделаете рамку, то она съест 64 пикселя из 256!

 

● С помощью онлайн-сервисов — это еще проще: загружаете имеющееся изображение, и оно превращается в фавикон. Честно говоря, я не являюсь сторонником такого подхода, так как мне и самому несложно сделать процедуру resize. Я предпочитаю самостоятельно контролировать этот процесс, потому как при автоматическом походе может упасть качество.

 

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

 

Единая инструкция для всех веб-сайтов

 

Вне зависимости от того, какой движок использует ваш веб-сайт, — Joomla это, Битрикс, Opencart или что-то самописное на html или php, вы все можете сделать самостоятельно и без каких-либо сторонних плагинов или скриптов.

 

Существуют две вариации. Они зависят от того, в каком формате вы сохранили изображение. Например, если это .ICO, методика следующая:

 

● Разместите фавикон в корень сайта. Корень — это то место, где содержатся все файлы. Например, для WordPress — это папка, в которой расположены папки wp-admin, wp-content, wp-themes и много файлов по типу wp.config.php. В данном случае веб-сайт поймет, что это favicon, и будет подсовывать его браузеру, чтобы тот использовал перед заголовками в результатах выдачи.

 

 

Если же вы сохранили изображение в формате .PNG, тогда схема чуть сложнее:

 

● Разместите фавикон в корень сайта.

 

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

 

 

В зависимости от движка, который вы используете, это может быть index.php, index.html, footer, php и другой. Между тегами head вам придется вставить следующую строку:

 

<link rel=»shortcut icon» href=»/favicon.png» type=»image/png»>

 

А если вы, например, сохранили этот файл не в корень сайта, а папку img, то адрес будет другим:

 

<link rel=»shortcut icon» href=»/img/favicon.png» type=»image/png»>

 

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

 

Favicon для сайтов на Ucoz

 

А что с Ucoz? Вот это правильный вопрос, ведь не все используют собственные веб-сайты на Вордпресс. Многим по душе, например, юкоз или wix.

 

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

 

● Зайдите в панель управления сайтом и выберите вкладку «Файловый менеджер».

 

● Перед вами появится список из корневых файлов. Поместите туда изображение в формате .ico (просто загрузите через браузер).

 

Вот и все!

 

Favicon для Wix

 

Есть такая набирающая обороты система управления контентом как Wix. С ней не все так просто. По умолчанию доступа в корень сайта вам никто не дает. Есть два варианта.

 

● Купите premium плагин. Их есть несколько, называются по-разному.

 

● Подключите свой собственный домен к вашему веб-сайту.

 

Все это — услуги платные. А что же вы хотели? Wix — это удобно, понятно, но за это требуется платить, в противном случае на вашем сайте будут демонстрироваться рекламные блоки, а также не будет многих функций. Чтобы не попадать в подобные ситуации, я и использую блог на личном домене и моем личном веб-хостинг аккаунте. Могу любые файлы добавлять в любые папки абсолютно бесплатно. За хостинг, правда, все же плачу!

 

Автоматические решения

 

WordPress — самая популярная система управления контентом в мире, и было бы странно, если бы не существовало какого-то плагина, который бы позволил упростить эту процедуру. Он действительно существует, и не один.

 

Из списка самых популярных могу выделить Favicon by RealFaviconGenerator, All In One Favicon и многие другие.

 

 

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

 

Бывают действительно полезные решения, такие как Yoast или All-In-One-Seo, а уж потратить одну минуту на то, чтобы внести такие несложные изменения, думаю, может любой человек вне зависимости от степени его квалификации.

 

Советы по внешнему виду фавикона

 

А теперь поделюсь с вами своим мнением по поводу того, как должен выглядеть favicon, и чего на нем быть не должно:

 

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

 

● Лучший цвет — это красный. Если он присутствует в вашей цветовой гамме — хорошо, если нет — думаю, специально добавлять не стоит. Хотя помню, когда-то читал, что один вебмастер значительно повысил кликабельность ссылок в результатах выдачи после того, как добавил очень простой фавикон — красный квадратик. Потом пошел дальше: сделал красную стрелочку, которая указывала на title.

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

 

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

 

Инструменты для создания фавикона

 

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

 

● Фотошоп — наверное, самый лучший инструмент. Его мощностей вполне хватит, есть лишь проблема: это — платное решение.

 

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

 

 

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

 

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

 

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

 

Вы готовы зарабатывать в Интернете серьезные деньги? Тогда обратите внимание на Интенсив Александра Борисова. На протяжении 3 дней Александр, известный онлайн-предприниматель, рассказывает о том, как создать свой блог и зарабатывать на нем очень хорошие деньги.

 

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

 

Буду очень рад видеть вас в следующий раз. А на этом прощаюсь!

 

 

Пока!

Похожие статьи:

Favicon WordPress — 4 способа установить фавикон на сайт

Что такое favicon, почему плохо, если он отсутствует?

Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.

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

В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

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

Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.

Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.

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

Виртуальный хостинг сайтов для популярных CMS:

Поставить favicon средствами ВордПресс

Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.

1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.

Вставить фавикон используя возможности WordPress шаблона

В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.

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

Добавить в файл header.php

Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.

1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
3. В списке шаблонов откройте файл заголовка header.php (3).
4. После открывающего тега вставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.

Установка favicon используя плагин Favicon by RealFaviconGenerator

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

В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).

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

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

Почему лучше установить без использования плагина?

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

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

Как установить фавикон на сайт? ⋆ Все секреты интернета

  

 

Сделать это очень просто (как установить фавикон на сайт). Заходим на хостинг своего хостера через FTP соединение. Используем для этого любой  FTP клиент (например, FileZilla), с его помощью находим папку public_htm, открываем её. В случае если на этом хосте у вас всего один сайт, то просто скопируйте в папку public_htm файл фавикона, если же сайтов несколько, то ищите необходимую папку (это должна быть корневая папка, тоесть папка, в которой размещён файл главной страницы вашего сайта, index.php)

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

Статью о том Что такое Favicon? (Фавикон) читайте здесь

  

 

Да, кстати, о браузерах

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

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

Чтобы фавикон в Вордпресс отображался правильно необходимо исправить ситуацию прописав в файле шаблона сайта header.php между тегами <head></head> команду <link  rel=”shortcut icon” href=”http://Ваш сайт/favicon.ico” /> Ну вот пожалуй и всё, теперь вы знаете как установить фавикон на сайт.

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

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

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

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

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

Знакомьтесь: favicon.ru фавикон онлайн

С помощью этого замечательного сервиса можно:

• Нарисовать фавикон самостоятельно
• Сделать favicon из рисунка или фотографии
• Заказать разработку и изготовление фавикона специалисту

Сервис очень прост в использовании к тому же русскоязычный.

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

Воспользовавшись сервисом favicon.ru уже через пару минут у вас будет свой оригинальный favicon для сайта.