Всем привет!
В этой статье я расскажу вам о том, как установить фавикон на сайт. Сделать это можно с помощью корневого каталога сайта или используя функционал шаблона. Мы разберем все варианты и определим, какой из них будет наилучшим для того или иного случая.
Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.
Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:
Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.
В Яндекс Вебмастере отсутствие фавикона классифицируется как ошибка, которую срочно нужно исправить. Связано это не только с тем, что люди в поисковике могут не доверять сайту без иконки, но и с определенными поисковыми алгоритмами. Роботы видят такие технические недостатки и чаще всего понижают ресурс в выдаче. Печальное явление, которое может сказаться на всем SEO-продвижении.
Подведем небольшие итоги:
- Favicon влияет на поведенческие факторы и кликабельность в выдаче.
- Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
- Такой технический недочет может привести к падению трафика.
Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.
Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.
Где скачать готовый вариант
Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.
Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.
Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.
Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.
Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.
В этой статье разговор пойдет о 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.
Теперь ваш сайт имеет все необходимые фавиконки, благодаря которым ваш ресурс будет выделяться на фоне остальных вне зависимости от того, с какого устройства на него зашел пользователь, и станет хорошо узнаваемым.
Быстрая навигация по этой странице:
Вопрос о том, как установить фавикон на сайт, является достаточно простым, однако почему-то многие вебмастера этим вопросом пренебрегают и не устанавливают иконку для своего сайта. О том, почему все-таки это важно и как это правильно сделать — читайте ниже.
Зачем нужен 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 код является следующим:
После того, как добавите этот код на страницы своей странички, обновите кэш своего браузера (его нужно полностью стереть), и, если все сделано правильно и файл с картинкой загружен на сайт, то картинка начнет отображаться в браузере.
Правда, не ждите ее мгновенного отображения в поисковой выдаче Яндекса. Дело в том, что у этой поисковой системы для фавиконок существует отдельный робот, который может обновлять свою базу иконок на протяжении нескольких месяцев. В этой связи, ваша иконка может появиться в выдаче Яндекса как через две недели, так и через пару месяцев, волноваться по этому поводу не стоит.
В настоящее время без фавикона не обходится ни один сайт. Стандартные иконки заложены при создании площадки. Только они не всегда устраивают пользователя. Проблема в том, что не каждый владелец ресурса знает, как добавить фавикон. Действие это не такое сложное. Зато результат позволит опознать сайт среди нескольких других в выдаче. Ведь ключевые слова могут быть похожими, а фавикон не подведет. Именно его добавление зачастую объясняет решение посетителя зайти на ресурс.
Фавикон для сайта
Перед тем как поместить фавикон на сайт, его нужно создать. Для этого можно выбрать один из предложенных вариантов:
Стандартное изображение сохраняется с расширением ICO. Размер его желательно выбрать 16х16 пикселей. Бывают размеры и больше. Они нужны при сохранении пользователем страницы на рабочем столе.
- site.ru прописываем название собственного ресурса;
- favicon.ico вписываем название файла с фавиконом.
Для правильного отражения в поисковике необходимо вписать изображение в код. Для загрузки стоит воспользоваться тегом
. В него вставляется строка . Есть еще один вариант - .
После этого разработанный логотип будет установлен. Увидеть его можно как на сайте, так и в запросной выдаче. Стоит иконка перед адресом ресурса.
Фавикон и браузеры
Перед тем как добавить фавикон, стоит определиться с его расширением. Оно может быть:
- APNG.
- JPEG.
Но разными браузерами поддерживаются различные расширения. Какой браузер лоялен к какому формату фавикона, покажет таблица ниже.
Тип браузера | GIF анимированный | ||||||
Internet Explorer | |||||||
1 - не поддерживает;
2 - поддерживает не все версии;
3 - поддерживает все версии.
Потому многие все же предпочитают стандартный формат. Добавив такой фавикон, можно будет не волноваться о типе браузера клиента. Если не учесть возрастные, профессиональные и другие предпочтения аудитории перед тем, как добавить фавикон, можно остаться без логотипа.
Если хочется добавить несколько фавиконов
Иногда есть желание или необходимость добавить небольшое изображение для каждой страницы или же сделать различные форматы для просмотра на разных браузерах. В таком случае к вопросу, как добавить фавикон стандартно, нужно добавить еще пару штрихов.
Вписание вставки фавикона в корень сайта очень простое. Но этого недостаточно для создания нескольких расширений. Для этого нужно в HTML-код вставить , предварительно обрамив строку
.Создавая такую конструкцию, следует помнить, что для слова icon недостаточно. Необходимо перед ним вписать shortcut. В таком случае стандартный браузер будет реагировать на словосочетание, а остальные - только на последнее слово.
На форумах существует много вопросов, как добавить фавикон в "Яндекс". Если изображение добавлено в корень сайта, то регистрация не нужна. Роботы найдут его по умолчанию.
Добавил и потерял
Бывает, что все действия сделаны верно, а при проверке в поисковых системах картинки нет. Ведь главное не то, сколько добавить, а как добавить фавикон. В "Яндекс. Директ" при правильном добавлении модерация изображения займет от 2 до 4 недель. В это время сайт будет отображаться без фавикона. Стоит также упомянуть, что при низком положении сайта в выдаче иконка может не отражаться вовсе.
Если время прошло, а значка нет, возможно, расширение не соответствует браузеру. Проверить наличие фавикона можно:
- для "Яндекс" - http://favicon.yandex.net/favicon/адрес_сайта;
- для "Гугл" - http://www.google.com/s2/favicons?domain=адес_сайта.
После опознания системой фавикон станет неотъемлемой частью сайта и имиджа компании. Потому отнестись к его добавлению стоит ответственно. Правильно выбранная и грамотно добавленная иконка станет путеводной звездой для клиентов. А это означает увеличение конверсии и, соответственно, большую прибыль.
>> Как добавить иконку на сайт
Как легко и просто добавить иконку на сайт.
Пришло время показать Вам процесс, как добавить иконку на сайт . После того, как вы создали сайт, Вам хочеться чем-то заманить внимание Ваших посетителей себе на сайт. Данным метотодом и является создание иконки для сайта. Этот метот с иконкой, очень хорош и эффектен. Но, к сожалению не все поисковые системы поддерживают данную возможность. Из русскоязычных поисковых систем, только Яндекс позволяет пользователям видеть иконки сайтов непосредственно в самой поисковой системе.
На вопрос стоит ли ставить иконки на сайт, я думаю стоит. Этот метод приманивает больше посетителей с поисковой системы Яндекс. По иконкам посетитель может определить тематику вашего сайта, или она просто может загипнотизировать интернет-пользователя.
Поскольку иконки (favicon -английская аббревиатура) имеют малые размеры, то соответственно качество картинки должно быть, очень хорошим. Плохое качество иконки, может сделать вашу иконку для сайта малозаметной, разплывчатой и не интересной пользователю.
На оптимизацию и раскрутку сайта иконки на сайте не влияют. Но, иконки влият на большую эффектность того что пользователь поисковой системы выберет именно ваш сайт среди других таких же сайтов, по такой же тематике как ваш.
Процесс создания и добавления иконки на сайт прост и бесплатен. Для этого, вам нужно найти нужный сервис, который делает иконку, скопировать сгенерированный код и вставить его себе на сайт. Давайте подробнее рассмотрим процесс создания и вставки иконки на сайт.
Пример: как добавить иконку "favicon" на сайт.
Создание иконки для сайта я покажу на примере одного простого сервиса. Данный сервис находится по url-адресу http://favicon.ru . После того, как Вы зайдете на данный сервис, то у вас появиться вот такое окно:
Здесь вы можете сделать 4 действия - это заказать favicon у дизайнера (стоимость заказа 500 руб), нарисовать favicon самому внизу страницы с помощью инструментов и клеточного поля, загрузить понравившуюся вам картинку, после чего результат будет отображаться в Предпросмотре внизу страницы (помечено красным квадратом), предложить свои услуги дизайнера для создания иконок заказчикам.
После того как вы нарисуете или загрузите картинку и вас будет все устраивать, то следующим этапом вам нужно будет ее скачать себе на компьютер.Для этого нажмите на кнопку "СКАЧАТЬ FAVICON " и сохраните его на своем компьютере. После этого вам нужно данную иконку загрузить на свой сайт в корень сайта (там, где находится ваша главная страница) и после чего у вас в браузере в окне, как показано на скриншоте выше, должна, загрузится ваша иконка сайта.
Если ваша иконка не появиться на сайте в верху url-адреса сайта, то скопируйте и вставте себе на сайт на каждую страницу сайта внутри парного html тега
такой код:Если у Вас не появиться ваша иконка на сайте, то сделайте еще пару действий;
1. Перезагрузите вашу страницу сайта.
2. Потяните мышкой зажав левую кнопку за угол где должна появиться иконка и потяние ее вниз.
Все после этого, радуемся появлением иконки на своем сайте.
В Яндексе ваша созданная иконка появится не сразу, а после того как Яндекс переиндексирует ваш сайт.
На этом у меня все.
Надеюсь моя статья оказалась вам полезной и интересной и вы теперь знаете как добавить иконку на сайт.