Подключение favicon html. Почему не отображается favicon. Картинка в социальных сетях

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

Фавикон для сайта

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

Стандартное изображение сохраняется с расширением 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=адес_сайта.

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

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

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

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

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

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

Теперь, когда мы разобрались и решил, что нам нужен фавикон, нам нужно его создать. Фавикон это картинка в формате 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? Favicon – это небольшая картинка, иконка, значок сайта или блога, или даже отдельной веб-страницы, которая отображается в адресной строке браузера:

в закладках, в журнале, во вкладках браузера:

вместо стандартной, общей для всех иконки.

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

Основной формат картинки для favicon.ico - 16х16 пикселей, именно эта картинка будет отображаться в адресной строке браузера и других вышеуказанных местах. Однако формат ICO разрешает наличие в файле нескольких картинок разных размеров и разного качества. Кроме стандартного размера 16х16, допускаются картинки 24х24, 32х32, 48х48 и 64х64 пикселей и все они включаются в один файл favicon.ico , а значит влияют на его размер и скорость загрузки сайта. Поэтому рекомендую вам не переусердствовать в этом вопросе.

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

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

У Яндекса есть так же специальный робот, который ищет на сайтах иконки favicon. Вы можете посмотреть свой фавикон по адресу: , подставив, конечно, свой адрес.

Создать favicon можно как с помощью настольных программ, так и использовать онлайн сервисы.

Вот лишь два из них:

Favicon.ru

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, так же можно включить два дополнительных размера 32х32 и 48х48 пикселей, а так же обрезать картинку.

После загрузки картинки сервис покажет как будет выглядеть иконка

и предложит её скачать или отредактировать готовую иконку в имеющемся графическом редакторе.

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

Favicon.cc

В отличие от favicon.ru на favicon.cc вам сразу предложат воспользоваться графическим редактором. В центре расположен холст, состоящий из 16х16 квадратиков, символизирующих собой пиксели.

Справа палитра цветов и несколько инструментов. Внизу находится окно предпросмотра, в котором иконка отображается в реальном времени в процессе редактирования:

А слева от холста основное меню, в котором нас прежде всего интересует пункт “Import image” :

После указываем путь к изображению (нажатием кнопки “Обзор” ) и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый для картинки с пропорциональными размерами сторон, второй для картинки с разными размерами. При выборе второго варианта изображение будет деформировано. После загрузки картинки (кнопка “Upload” ) на холсте уже попиксельно красуется загруженная картинка. Если результат вас устраивает, можно скачивать иконку.

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

Итак, иконка favicon создана! Теперь самое время установить ее на ваш сайт.
Для этого загружаем иконку в корневой каталог сайта (именно там ищут ее поисковые роботы). То есть иконка должна находится по адресу http://сайт/favicon.ico . И вторым шагом прописываем специальные теги между тегами :

или

Чтобы favicon начал отображаться не забываем очистить кэш вашего браузера и обновить страницу. Ну вот вроде и все. Готово!

И напоследок еще один совет. Иконка показывается в браузере как изображение размером 16x16 пикселей. Ожидать, что при таком разрешении можно изобразить что-то сколько-нибудь сложное, увы, не приходится. Чтобы изобразить сколько-нибудь узнаваемое человеческое лицо, надо начинать с размера картинки размером хотя бы в 48x48 пикселей. Поэтому при создании иконки favicon для сайта, следует выбирать для него хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Оптимальный выбор для иконки favicon - логотип компании или простое изображение.

Дата: 2011-06-22

Tweet

Нравится

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

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

Зачем нужен 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 можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

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

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

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

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

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

Создание фавикона

Онлайн-сервисы

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

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