Как установить фавикон (favicon) на сайт
#Поисковая выдача #Оформление сниппета
#88
Ноябрь’18
10
Ноябрь’18
10
Фавикон (Favicon) — это иконка, которая отображается рядом с названием страницы во вкладке браузера. Также данный значок отображается в сниппете сайта на странице результатов поиска в некоторых поисковых системах, например Яндекс и mail.ru.
Фавикон повышает узнаваемость сайта во вкладке браузера, повышает кликабельность в результатах выдачи Яндекса, также он может способствовать уровню запоминаемости ресурса.
Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.
Данную иконку необходимо загрузить на сервер, где находится ваш сайт.
Для добавления favicon необходимо разместить следующий html код:
- <link type=»image/x-icon» href=»/favicon.ico» rel=»shortcut icon»>
- <link type=»Image/x-icon» href=»/favicon.ico» rel=»icon»>
В атрибуте href указывается адрес соответствующего файла.
После выполнения данных действий, если все сделано правильно, фавикон должен появиться во вкладке браузера на вашем сайте.
На странице результатов поиска иконка должна появиться в течение двух недель, с того момента как поисковый робот загрузил иконку.
Похожее
Поисковая выдача Оформление сниппета
Оптимизация сниппетов
Поисковая выдача Оформление сниппета
Быстрые ссылки сайта: что это и как их добавить
Поисковая выдача Оформление сниппета
#83
Оптимизация сниппетов
Ноябрь’18
3588
8Поисковая выдача Оформление сниппета
#54
Быстрые ссылки сайта: что это и как их добавить
Ноябрь’17
4820
9#34
Как изменить описание сниппета в Яндексе
Ноябрь’17
3294
8Поисковая выдача Оформление сниппета
#33
Как изменить заголовок сниппета в Яндексе
Июль’17
3899
8Как сделать favicon.
ico для сайта (фавикон)В сегодняшнем уроке я буду Вам рассказывать об
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока:
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.
cc. Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:
Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.
ru.
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.
Список сервисов с готовыми favicon (фавикон)
Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:
- iconj – Огромная база фавиконок;
- favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
- Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
- audit4web – Большое количество иконок для сайта.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
- Полученный favicon.ico
п.). В моем случае эта папка называется public_html: - Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon"> <link rel="icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
Естественно в 2 местах слова адрес_сайта
меняете на адрес СВОЕГО блога. - У меня получилось следующее:
- Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
п.). В моем случае эта папка называется public_html:Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.
P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.
P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!
_____________________________________________
Следующий урок: Урок 51 Регистрация в поисковиках.
Генератор Favicon — Текст на Favicon
Быстро создавайте свою фавиконку из текста, выбирая текст, шрифты и цвета. Загрузите свой значок в самых современных форматах.
Установка
Сначала используйте кнопку загрузки, чтобы загрузить файлы, перечисленные ниже.
Поместите файлы в корневой каталог вашего сайта.
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- favicon-16×16.png
- favicon-32×32.png
- favicon.ico
- site.webmanifest
Затем скопируйте следующие теги ссылок и вставьте их в head вашего HTML.
Почему favicon.io?
Хотите ли вы создать значок из текста, из
существующее изображение или из смайликов, которые мы вам прикрыли.
Генератор favicon абсолютно бесплатен и чрезвычайно прост в использовании.
Сгенерированный значок будет работать во всех браузерах и нескольких
платформы.
Начало работы с генератором фавиконок
Сделать фон простым
Далее выберите форму фона. Есть три простых
доступные формы: квадрат, круг и закругленные. Эти
наиболее распространенные формы, используемые для создания фавикона. Ты можешь видеть
примеры этих форм с
ПродуктХант,
индихакеры и
ХакерНьюс.
Выбор шрифта для фавиконки
Генератор фавиконки использует Гугл шрифты в котором доступно более 800 шрифтов. Это полезно для соответствия шрифту используется на вашем собственном веб-сайте. В будущем будет специальная страница шрифта, чтобы помочь вам выбрать свой шрифт. Это будет иметь фильтры для языков, стилей и часто используемых шрифтов. Ты можешь отредактируйте размер шрифта после того, как вы выбрали свой шрифт. Попробуйте взять как можно больше места.
Пошив цветов
Последним шагом является выбор цветов. Если у вас есть HEX
значения цветов, которые вы хотите, вы можете просто ввести их в
поле ввода. В противном случае вы можете использовать некоторые из цветов, которые мы
предлагаем использовать палитру цветов под каждым полем ввода. Один крутой
особенность в том, что вы можете использовать прозрачные фоны.
Просто введите
«прозрачный» в поле цвета фона.
Вот пример фавикона, сгенерированного с прозрачным
фон .
HTML Фавикон
❮ Назад Далее ❯
Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.
Как добавить фавиконку в HTML
Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный favicon на таких сайтах, как https://www.favicon.cc.
Совет: Фавикон — это маленькое изображение, поэтому оно должно быть простым и контрастным.
Изображение фавикона отображается слева от заголовка страницы на вкладке браузера, например:
Чтобы добавить фавиконку на свой сайт, либо сохраните изображение фавиконки в корень
каталог вашего веб-сервера или создайте папку в корневом каталоге
под названием images, и сохраните изображение фавиконки в этой папке.
Распространенное название изображения фавикона — «favicon.ico».
Затем добавьте элемент в файл index.html,
после элемента
Это Заголовок
Это абзац.