Где прописывается favicon. Если хочется добавить несколько фавиконов. Другие графические форматы фавикон

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

Для начала как найти favicon . Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc . На нём Вы прямо в онлайне создадите себе favicon . Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ - это воспользоваться поиском и запросом: "коллекция favicon ". Думаю, что уже первый сайт покажет Вам тысячи различных favicon , и Вам останется его только выбрать.

Теперь второй шаг - установка favicon на сайт . Для этого добавьте внутри тега следующую строку:

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

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

Быстрая навигация по этой странице:

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

Зачем нужен favicon?

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

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

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

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

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

Каким должен быть файл с иконкой и где он должен находиться?

Исторически сложилось, что для сайтов используется формат.ico. Особенность этого формата состоит в том, что внутри одного.ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

Соответствующий Файл в формате.ico можно создать с помощью графического редактора или множества доступных в сети онлайн-сервисов. Важно, чтобы данный файл имел название favicon.ico.

Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами

Для добавления favicon html код является следующим:

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

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

Фавикон – английское слово favicon, переводится «значок для избранного» (сокращено от FAVorites ICON), логотип сайта и одна из главных частей веб-страницы, графическая картинка с форматами 16х16 или 32х32 пикселей (размер должен быть кратким восьми). Для фавикона используют формат 16х16, другие размеры не будут выдаваться браузерами. Отображается в верхней строчке браузера, вблизи с адресом сайта. Если иконку не установить или сделать его не правильно, то в окне браузера будет виден не логотип сайта, а иконка используемого браузера.

Зачем нужен favicon?

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

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

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

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

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

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

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

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

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

Что такое фавикон и для чего он нужен?

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

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

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

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

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

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

Теперь нам нужно конвертировать картинку в формат ICO. Делать мы это будем с помощью онлайн сервиса favicon.ru. Заходим на него и на главной странице нажимаем на кнопку «Выберите файл».

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

Минус данного сервиса, что он прозрачный фон заливает черным цветом. На всякий случай вот вам еще один сервис http://tools.dynamicdrive.com/favicon/. Тут тоже все просто. Выбираете файл, нажимаете на кнопку «Create Icon» и через пару секунд нажимаете «Download FavIcon». Но тут редактировать нельзя, зато прозрачный фон остается прозрачным.

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

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

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

Теперь нужно вставить вот этот код.

Вставлять его нужно между тегами . Покажу вам на примере всеми излюбленного worpdress. В файле header.php ищем (ctrl+f) тег и сразу после него вставляем код, как показано на картинке ниже.

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

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

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

Почему вам стоит добавить favicon на ваш сайт?

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

Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:

Или вот пример из другого браузера - Vivaldi:

Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… :-)

Как создать favicon

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

Создаём фавикон с помощью онлайн-генератора LOGASTER

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

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

Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»:

Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров.

Рисуем иконку вручную

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

Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:

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

Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.

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

Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! :-)

Способ 1: Используем возможности WordPress

По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» - «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.

Способ 2: Использование настроек вашей темы

Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.

Вот так, например, выглядит эта опция в моей теме:

Раскрываем этот блок и видим следующее:

Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше - у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png .

Это самый быстрый способ подключить favicon к вашему сайту!

Способ 3: Подключение в файл header.php

Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico , либо favicon.png, в зависимости от типа иконки.

Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега вставьте следующий код:

Либо же измените разрешение на.png, если у вас иконка этого типа.

Способ 4: Плагин «Insert Headers and Footers»

Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.

Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers . Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».

После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.

Не забудьте нажать кнопку «Save settings» для сохранения настроек.

Способ 5: Плагин «All In One Favicon»

Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon , устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.

После установки и активации плагина, заходите в раздел меню «Параметры» - «All in one Favicon» и видим следующий экран с настройками:

Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение

Если у вас не сработала установка иконки ни с одним из предложенных мною способов - напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. ;-)

Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)

Или угостить кофе;-)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .