Установка фавикона. Фавикон и браузеры
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 – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».
Заключение
Если у вас не сработала установка иконки ни с одним из предложенных мною способов - напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. ;-)
Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)
Или угостить кофе;-)
Buy me a coffeeЕсли вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .
Фавикон - это сокращение от «избранный значок» (в переводе с английского языка). Название происходит от списка закладок в Internet Explorer, который называется «Избранное»/«Список избранного». При добавлении сайта в закладки Explorer (версии 5 и выше) обращается к серверу с запросом, имеет ли ресурс файл favicon.ico. Если такой файл существует, он будет использоваться для предоставления значка, который отображается рядом с закладкой с текстом.
Другие браузеры (например, Mozilla) также имеют поддержку для фавиконок. В зависимости от программы для поиска, этот значок может отображаться в различных местах, не только в списке закладок (на самом деле, он может даже не появляться там). Он отображается в или заголовке вкладки браузера.
Значки на вкладках браузера
Большинство пользователей, как правило, имеют много открытых вкладок в окне браузера. С увеличением количества вкладок скрывается Фавикон помогает пользователю идентифицировать ссылку и быстро переключиться на вкладку, которую нужно открыть.
Кроме того, если пользователь захочет добавить свой любимый сайт на рабочий стол на мобильном устройстве, иконка будет также использоваться. Поэтому всегда нужно определиться с выбором рисунка перед тем, как установить фавикон. Такая иконка сайта отображается как значок приложения на рабочем столе планшета или смартфона.
Как создать фавикон?
Чтобы создать favicon.ico, вам необходимо просто сохранить PNG-файл размером 16х16 и преобразовать его в значок ресурса с png2ico. По собственному усмотрению, вы можете добавлять различные изображения в один и тот же значок, чтобы обеспечить альтернативные решения. Большинство браузеров используют только формат 16x16 для такого изображения, но в другом контексте (например, при перетаскивании URL из адресной строки на рабочий стол) большая иконка может быть отображена на рисунке. Если значок ресурса содержит только изображения 16х16, он будет масштабироваться до нужного размера, поэтому технически совершенно не нужно добавлять альтернативные решения. Однако это может повысить качество изображения. Перед тем, как установить фавикон на сайт, обязательно просмотрите, как выглядит картинка в разных размерах.
Имейте в виду, что для пользователя с медленным интернет-соединением фавикон может увеличить время загрузки страницы на несколько секунд. Это возможно, если файл изображения слишком большой, поэтому не переусердствуйте. Добавление альтернативы формата 32х32 должно быть достаточно, чтобы картинка начала хорошо смотреться даже в ситуациях с крупными значками. Использование большего количества вариантов - это бонусы, выполняемые только по желанию разработчика сайта. Старайтесь поддерживать количество цветов до 16 и создавайте 16-цветную иконку с помощью png2ico (или даже черно-белый значок). Это позволит сохранить меньший файл, который загружается быстрее.
При создании изображения для добавления в favicon.ico не стоит забывать и о том, что иконки могут быть отображены на различном фоновом цвете. По этой причине лучше использовать прозрачность, а не сплошной фон. Хорошо подумайте над тем, как установить фавикон наиболее грамотно, чтобы он гармонировал с любым задним планом. Стоит отметить, что можно устанавливать промежуточные значения, которые измеряются в процентах. Специалисты говорят о том, что идеальной является настройка, включающая в себя примерно 30-40% прозрачности фона.
Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона - не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).
Создание иконки с помощью «Фотошопа»
Специалисты рекомендуют использовать например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в JPEG или GIF. После этого нужно определить, как установить фавикон на сайт.
Зачем нужно добавлять на сайт?
Как уже было отмечено, иконка favicon - это маленький значок, который появляется рядом с названием сайта в браузере. Он помогает пользователям идентифицировать ссылку, а более частые посетители вашего сайта будут моментально определять это маленькое изображение. Это повышает узнаваемость бренда и помогает завоевать доверие среди аудитории. Таким образом, фавикон определяет «личность» вашего сайта. Кроме того, он также улучшает юзабилити и пользовательский опыт сайта.
Как установить фавикон на сайт html
Чтобы добавить ваш новый фавикон на веб-страницу, следует установить его на сервер в ту же папку, где расположена веб-страница (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html). Это те данные, которые в первую очередь любой браузер будет искать для загрузки. Если он не найдет иконку, то проверит каталог верхнего уровня сервера (www.example.com/favicon.ico для www.example.com на сервере). По этой причине, если вы установите его там, сможете иметь значок по умолчанию для всех страниц вашего домена. В зависимости от браузера и конфигурации, фавикон не всегда отображается, даже если он находится в одном из вышеуказанных мест и веб-страница видит его.
Для того, чтобы прописать в коде страницы наличие фавикона, можно добавить следующие 2 строки в разделе
:< link rel="icon" href ="favicon.ico" type= "image/x-icon" >
< link rel="shortcut icon" href ="favicon.ico" typ e="image/x-icon" >
Как добавить фавикон на блог WordPress
Если же вы задаетесь вопросом, как установить фавикон в "Директе", здесь тоже нет ничего сложного. Интерфейс имеет соответствующие пункты меню, которые позволят вам выбрать и загрузить картинку.
Как добавить фавикон в WordPress
Начиная с версии WordPress 4.3 можно добавить favicon на сайт из области администратора. Просто перейдите в «Вид»/«Настройки» и выберите вкладку «Сайт».
Раздел идентификатора сайта в настройщике позволяет изменить название ресурса и описание. Перед выходом из меню обязательно появляется вопрос, действительно ли вы хотите отобразить новые данные в заголовке. Оно также позволяет вам загрузить ваш значок для сайта. Просто нажмите на кнопку «Выберите файл» и загрузите изображение, которое хотите использовать в качестве фавикона.
Добавление фавикона на блог
Дальнейшая инструкция, выглядит следующим образом. Если изображение, которое вы загружаете, превышает рекомендуемый размер, то WordPress позволит вам обрезать его. Если он соответствует рекомендованным параметрам, вы можете просто сохранить изменения. Стоит отметить, что инструкция, как установить фавикон на сайт Joomla, выглядит аналогичным образом.
После этого при просмотре сайта вы увидите ваш favicon в действии. Вы также можете зайти на сайт с мобильного устройства, а затем в меню браузера выбрать «Загрузить полную версию». Вы заметите, что иконка будет отображаться как на полноценном рабочем столе компьютера.
Как установить фавикон на WordPress старой версии (4.2 или ниже)
Загрузите свой фавикон в корневой каталог сайта по После этого можете просто вставить этот код в файл header.php нужной темы.
< link rel="icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >
< link rel="shortcut icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >
Замените wpbeginner.com на URL вашего сайта, и все будет сделано. Если блог не имеет файла header.php или вы не можете найти его, то используйте специальный плагин. Установите и активируйте его в настройках сайта. После активации плагина зайдите в «Настройки», найдите пункт «Вставка колонтитулов», перейдите к вкладке «Вставка кода», приведенного выше в разделе заголовка, и сохраните настройки.
Если не хотите разбираться с тонкостями работы с FTP, но при этом все же интересуетесь, как установить фавикон, также можете использовать специальный плагин, который регулирует загрузку иконки на всех этапах. Такие дополнения к движку доступны не только для WordPress, но и для других популярных систем, в том числе для Joomla.
Доброго всем времени суток. Как я и обещал в уроке , сегодня я расскажу о том, что такое 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, поэтому иногда можно обойтись даже без html-кода. Достаточно загрузить favicon.icoв корень сайта, чтобы она была доступна по адресу https://вашсайт/favicon.ico
Но для надёжности в код сайта можно добавить такой тег (между
)
Это – традиционный способ, который отвечает за вывод иконки во вкладке браузера и в результатах поиска Яндекс.
Расширенный favicon
Но возможности иконки сайта сегодня используются в гораздо большем количестве мест:
Генератор favicon
Большую часть можно сделать при помощи всего одного онлайн-генератора иконок — https://realfavicongenerator.net
Минимально допустимое изображение для загрузки – 70×70 пикселей, но если вы хотите задействовать его для всех возможных случаев, то загружайте размером свыше 256×256.
После, вы сможете посмотреть, как будет выглядеть ваш favicon в iOS, Android и плиточном Windows 8, а заодно изменить настройки для каждого случая: задать индивидуальное изображение, изменить цвет фона, масштабировать иконку.
В опциях оставьте всё, как есть: по умолчанию генератор создаст картинки, которые нужно будет поместить именно в корень сайта (обычно на хостингах корнем сайта называются директории /home/, /www/, /public_html/).
Во вкладке «Compression» можно уменьшить вес иконок (сжатие происходит в районе 20-80%, в зависимости от качества).
Нажимаем Generate и получаем на выходе архив, содержимое которого загружаем в уже названное выше место, и код, который вставляем в
сайта.После добавления их на сайт, можно проверить работоспособность тем же сервисом .
Картинка в социальных сетях
Работают по схожему принципу, но главная загвоздка в том, что если вы используете CMS, то можете поискать плагины, которые автоматически будут отдавать к каждой статье её уникальное превью-изображение (если оно есть). А вот если CMS нет, или к ней нет подходящего плагина, то придётся использовать одну картинку-заглушку для всех записей.
WordPress и Facebook (использование превью к записям)
Если используете плагин WordPressSEObyYoast, то достаточно зайти в раздел «Социальные сети» → «Facebook» и активировать пункт «Добавить Open Graph».
Во всех остальных случаях делаем следующее:
- Открываем файл header.php вашей темы.
- Самый первый тег меняем на
- В секции head вставляем код:
$dom = simplexml_load_string(get_the_post_thumbnail());
$src = $dom->attributes()->src;
echo "content="".$src.""";
?>/>
WordPress и ВКонтакте
В functions.phpдобавьте функцию:
function vk_meta() {
if (has_post_thumbnail())
{
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(600,600));
$url = $thumb["0"];
echo "" . "\n";
}
}
add_action("wp_head", "vk_meta");
Общее изображение для всех материалов
Если же такого решения не нашлось, или вы просто не любите добавлять к материалам сайта превью, то выход один: сделать одно изображение на всех.
Чтобы социалки «подцепили» картинку, добавьте в head-секцию следующий код:
Принимаются форматы.jpg и.png.
Заключение
Нужен ли вам только стандартный 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.
Теперь ваш сайт имеет все необходимые фавиконки, благодаря которым ваш ресурс будет выделяться на фоне остальных вне зависимости от того, с какого устройства на него зашел пользователь, и станет хорошо узнаваемым.
Загрузка...
