Способы добавления Favicon на сайт

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

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

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

Что такое фавикон и почему он важен для СЕО

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

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

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

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

Adobe Photoshop

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

Итак, у нас есть два варианта:

  1. Сделать фавикон из картинки (логотипа компании или других).
  2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

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

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

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

Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

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

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега .

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

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

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Читайте также  Узнаём тайного отправителя подарка в ОК

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

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

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

Способы добавления Favicon на сайт

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

Добавление Favicon на сайт

Чтобы добавить рассматриваемый тип иконки на сайт, вам придется для начала создать подходящее изображение квадратной формы. Это можно сделать как с использованием специальных графических программ, например, Photoshop, так и прибегнув к некоторым онлайн-сервисам. Кроме того, подготовленный значок желательно заранее преобразовать в формат ICO и уменьшить до размера 512×512 px.

Примечание: Без добавления пользовательского изображения на вкладке отображается значок документа.

Вариант 1: Добавление вручную

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

Способ 1: Загрузка Favicon

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

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

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

Способ 2: Редактирование кода

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

    Между тегами «HEAD» добавьте следующую строку, где «*/favicon.ico» необходимо заменить на URL-адрес вашего изображения.

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

В некоторых случаях значение «rel» можно изменить на «shortcut icon», увеличив тем самым совместимость с веб-браузерами.

Значение «type» также может быть вами изменено в зависимости от формата используемого изображения:

Примечание: Наиболее универсальным является ICO-формат.

  • ICO – «image/x-icon» либо «image/vnd.microsoft.icon»;

Если ваш ресурс нацелен на преимущественно последние версии браузеров, строку можно сократить.

Для достижения наибольшей совместимости вы можете добавить сразу несколько строк с указанием ссылки на Favicon сайта.

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

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

Вариант 2: Средства WordPress

При работе с WordPress вы можете прибегнуть к ранее описанному варианту, добавив упомянутый код в файл «header.php» или воспользовавшись специальными инструментами. Благодаря этому иконка гарантировано будет представлена на вкладке сайта вне зависимости от браузера.

Способ 1: Панель управления

    Через главное меню разверните список «Внешний вид» и выберите раздел «Настроить».

На открывшейся странице необходимо воспользоваться кнопкой «Свойства сайта».

Пролистайте раздел «Настройка» до низа и в блоке «Иконка сайта» нажмите кнопку «Выбрать изображение». В данном случае картинка должна иметь разрешение 512×512 px.

Через окно «Выбрать изображение» загрузите нужную картинку в галерею либо выберите ранее добавленную.

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

Установив нужное действие через соответствующее меню, нажмите кнопку «Сохранить» или «Опубликовать».

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

Способ 2: All In One Favicon

    В «Панели управления» сайтом выберите пункт «Плагины» и перейдите к странице «Добавить новый».

Заполните поисковое поле в соответствии с наименованием нужного плагина — all in one favicon — и в блоке с подходящим расширением нажмите кнопку «Установить».

Процесс добавления займет некоторое время.

Теперь необходимо кликнуть по кнопке «Активировать».

После автоматического перенаправления вам нужно перейти к разделу с настройками. Сделать это можно через «Настройки», выбрав из списка «All in one Favicon» либо воспользовавшись ссылкой «Settings» на странице «Плагины» в блоке с нужным расширением.

В разделе с параметрами плагина следует добавить иконку в одну из представленных строк. Это нужно повторить как в блоке «Frontend Settings», так и в «Backend Settings».

Нажмите кнопку «Сохранить изменения», когда изображение будет добавлено.

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

Этот вариант является наиболее простым в реализации. Надеемся, у вас получилось установить Favicon на сайт через панель управления WordPress.

Заключение

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

Установка Favicon на сайт

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

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

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

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

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

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

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 25 ):

    Здравствуйте еще раз. У меня не получается установить favicon. объясните пожалуйста синтаксис вот этого тега: (тег)link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon» (тег закрыт) а именно почему тег закрывается вот так»/>»? Что это означает? почему его нельзя закрыть просто «>»? кэш браузера очищал.

    /> означает, что код написан в стандарте XHTML, а если у Вас стандарт HTML, то можно просто писать >. Стандарт задаётся в DOCTYPE. Но в любом случае, должно работать. Попробуйте посмотреть в другом браузере.

    Хочу поделиться плагином для Фотошопа для сохранения изображений в формате ico. http://narod.ru/disk/16359056001/ICOFormat.8bi.html Сохраняете плагин в папку Фотошопа . Plug-Ins/File Formats Теперь при выборе Сохранить как. в списке появится и формат ico. И ещё — Интернет Експлорер будет отображать иконку в адресной строке только после добавления странички в избранное. Такой вот он капризный. (Может, в новых версиях это уже устранено, я точно не знаю)

    Читайте также  Установка картриджа в принтер Canon

    Что то у меня не получается установить favicon.Прописала на всех страницах сайта:
    Сама картинка находится в корне public_html Кэш очистила. Что я опять не то натворила(?

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

    Эту строку (
    ) обязательно нужно ставить на каждую страницу сайта? Или достаточно разместить её на главной странице сайта?

    Её необходимо ставить на каждую страницу, где Вы хотите, чтобы отображался favicon.

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

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

    Не поняла, если честно. В Explorer не отображает. Вот смотрите, создаю я на сайте favicon.сс эту картинку. Сохраняю на комп. Она автоматически сохраняет в формате ico? Или надо конвертировать? И куда, в какую папку в компе надо ее(картинку) размещать? Там где и находится наш html?

    Картинку надо класть рядом с index-файлом.

    Ну да, так они и лежат в одной папке. Открывает только в Firefox, в других браузерах нет. С чем еще может быть связана эта проблема?

    Если открывает в Firefox, то откроет и в других. Просто там остался хэш, очистите его и всё появится, хотя это необязательно. Все пользователи увидят эту иконку.

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

    В других браузерах появляется? Если да, то не обращайте внимание, трудно удалить favicon из кэша.

    Здравствуйте.А верно ли то что, type=»image/x-icon» устарело и им не пользуются? Ибо у меня favicon вставляется только тогда, когда использую type=»image/vnd.microsoft.icon»

    У меня вставляется и через image/x-icon, и впервые слышу, чтобы это устарело.

    да вот столкнулась на этом сайте http://www.xiper.net/collect/html-and-css-tricks/different/howto-favicon.html с записью «В 2003 году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным.» Поэтому хотела уточнить)

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

    Михаил, на другом сайте я нашел такой код favicon

  • Какая разница между этим кодом и вашим?

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

    У меня не работает это.Как сделать этот favicon. посмотрите http://faviconka.ru/favicon.php?n=faviconka_ru_566.png

    У меня иконка находится не слева от адресной строки,а во вкладке. Как сделать в адресной строке?

    может повлеять на то что фавиконка не ставиться от того что стоит windows10

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Создаем уникальный Favicon и устанавливаем на сайт

    Фавикон (favicon или фавиконка) — это небольшое изображение рядом с названием страницы в поисковой выдаче Яндекса, а также во вкладке сайта.
    Так это выглядит в поиске Яндекса:

    А так во вкладках браузера:

    Зачем нужен фавикон?

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

    Кстати, Яндекс.Вебмастер предупреждает об ошибке, если у сайта нет фавиконки. Также ошибка может отобразиться в лог-файлах. Браузеры запрашивают favicon.ico, если не находят нужный файл, сервер фиксирует ошибку 404.

    Лог-файл — журнал с системной информацией о работе сервера и действиях пользователей.

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

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

    Не рисуйте много деталей. Значок очень маленький (32×32 пикселя), поэтому мелкие нюансы будут совершенно не видны читателям.

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

    Самостоятельно создать мини-логотип

    Открываем любой графический редактор, например, Photoshop и творим. Если на значке будет текст, то размер шрифта следует установить на 8-10 пикселей. У Фотошопа есть специальный плагин для создания значков — «Favicon.ico».

    Полезно! Если у вас не получается сохранить файл в формате .ico. То можно сохранить его в PNG или JPEG и после этого найти любой онлайн-конвертер изображений. В поиске пишем «конвертер из PNG в ICO».

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

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

    Рисуем фавинкон: Favicon.by

    Сразу после перехода на этот онлайн-ресурс попадаем на страницу, где уже есть «заготовка» будущей иконки в нужном размере.

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

    Добиваемся отличного результата и нажимаем «Скачать». Файл сохранится в требуемом формате с правильным названием.

    Создание фавикон через загрузку изображения: Realfavicongenerator.net

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

    Берем готовое изображение 260×260 пикселей. Выбираем нужную степень сжатия и настройки для iOS, Android и MacOS Safari. В результате у вас будут все типы иконок и код для вставки.

    Скачать готовый файл фавикон

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

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

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

    Также можно скачать значок на специализированных стоках, например:

    Какой формат использовать?

    Желательные форматы Favicon: ico, png, svg

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

    Поддерживается всеми браузерами и платформами.

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

    Допустимые форматы: jpeg и gif

    Не все браузеры поддерживают отображение таких значков.

    Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.

    Продвинутая информация по размерам фавиконов, которая пригодится не всем

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

    Не хотите так заморачиваться? Тогда делайте фавикон 32×32 пикселя. И переходите к следующему разделу.

    Вот сводная таблица по рекомендуемым размерам. Источник: ux.pub

    Для смартфонов

    Для Андроида и Эпла размер иконки зависит от типа и плотности экрана. Вдруг, вам это пригодится в работе.

    Как поставить Favicon самостоятельно

    Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.

    Через тему сайта WordPress

    Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.

    Придерживайтесь вот такой последовательности:

    1. Откройте админку
    2. Внешний вид > Настроить > Свойства сайта
    3. Значок сайта > Изменить изображение
    4. Загрузите фавикон
    5. Нажмите кнопку Опубликовать.

    Как добавить фавикон на сайт WordPress вручную

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

    1. Заходим в файлы темы FTP-клиент или файловый менеджер.
    2. Находим папку /wp-content/themes/your-theme.
    3. Загружаем иконку в подпапку, например, Assets.
    4. Запоминаем путь к файлу.

    В файте function.php и прописываем путь до фавикона.

    function add_favicon() <
    echo ‘’;
    >
    add_action(‘wp_head’, ‘add_favicon’);

    Строка после href=«‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:

    function add_favicon() <
    echo ‘’;
    >
    add_action(‘wp_head’, ‘add_favicon’);

    Как вставить фавикон через корневой каталог, если сайт не использует CMS

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

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

    Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.

    Читайте также  Удаление страницы в ВК с телефона

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

    Здесь нужно прописать формат файла.

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

    Пропишите ссылки на иконки между тегами head. Например:

    Для десктопа (ico)

    Декстоп (png)

    Apple

    Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.

    Safari

    Андроид

    Как задать размеры фавиконок?

    Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

    Как проверить, установился ли фавикон?

    Просто погуглите ваш ресурс. Или проверьте сайт в сервисе Realfavicongenerator.

    А еще можно воспользоваться вот таким способом. Только вместо «mysite.ru» укажите название вашего сайта:

    • В Яндексе: http://favicon.yandex.net/favicon/mysite.ru.
    • В Гугле: https://www.google.com/s2/favicons?domain=mysite.ru.

    Если иконка не отображается, убедитесь что:

    • ссылка на фавикон открыта для индексации в robots.txt и отдает ответ сервера HTTP 200.
    • изображение ico или png находится в корне ресурса или к нему специально прописан путь.
    • вы подождали несколько недель. Так как поисковым роботам нужно время, чтобы проиндексировать значок сайта.

    Подытожим

    1. Фавикон лучше делать, чем не делать. Это поможет людям идентифицировать ваш сайт.
    2. Создать фавикон можно в Фотошопе или с помощью онлайн-сервисов
    3. Можно создавать иконку сразу в нескольких размерах, чтобы она корректно отображалась на всех устройствах.
    4. Наиболее подходящие форматы: ico или png.
    5. Добавить фавиконку можно через вашу CMS или через корень сайта.

    А как вы считаете, у каких сайтов самые удачные фавиконки? Делитесь в комментариях!

    Как Добавить Favicon для Сайта

    Введение

    Большинство сайтов имеют свои особенные логотипы и в большинстве случаев они используются, как favicons (иконки). Если вы не знаете, что такое favicon, вот визуальный пример одной их таких: Иметь свою favicon на сайте гораздо лучше, чем стандартную иконку пустого документа в браузере, к тому же, ваш сайт будет выглядеть гораздо профессиональней. В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

    Что вам понадобится

    Перед тем, как вы начнете это руководство, вам понадобится следующее:

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

    Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

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

    1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
    2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных — convertico.com.
    3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

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

    1. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл .ico на компьютере.
    2. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
    3. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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

    ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

    Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

    1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
    2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
    3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами в код вашего сайта:

    ВАЖНО! Измените png на формат вашего изображения в type=»image/png» и favicon.png на имя вашего изображения.

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

    ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

    Заключение

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

    Добавление иконок для сайта в мультибраузерном и мультипплатформенном мире

    Дата публикации: 2018-04-11

    От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

    Что такое favicon?

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

    Рядом с именем сайта во вкладке браузера

    В списке закладок

    Как иконка запуска на домашнем экране устройства и десктопа

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

    Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

    Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

    Что такое формат favicon .ico (ICO)?

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

    ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

    В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

    Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

    Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

    Как подключить favicon?

    Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

    Начнем с самого старого и базового способа добавления favicon на сайт.

    Размещение favicon.ico в корне сайта

    Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

    Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

    Подключение favicon через тег link

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

    Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать: