Быстрая навигация по этой странице:
- Зачем нужен favicon?
- Каким должен быть файл с иконкой и где он должен находиться?
- Как добавить на сайт?
Вопрос о том, как установить фавикон на сайт, является достаточно простым, однако почему-то многие вебмастера этим вопросом пренебрегают и не устанавливают иконку для своего сайта. О том, почему все-таки это важно и как это правильно сделать — читайте ниже.
Зачем нужен 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-код между тегами <head></head< вашего сайта.
Для добавления favicon html код является следующим:
<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
После того, как добавите этот код на страницы своей странички, обновите кэш своего браузера (его нужно полностью стереть), и, если все сделано правильно и файл с картинкой загружен на сайт, то картинка начнет отображаться в браузере.
Правда, не ждите ее мгновенного отображения в поисковой выдаче Яндекса. Дело в том, что у этой поисковой системы для фавиконок существует отдельный робот, который может обновлять свою базу иконок на протяжении нескольких месяцев. В этой связи, ваша иконка может появиться в выдаче Яндекса как через две недели, так и через пару месяцев, волноваться по этому поводу не стоит.
www.runcms.org
Как установить favicon на WordPress
При установке иконок для сайта возможны три варианта развития событий:
- из админки блога Вордпресс, используя настройки шаблона;
- обычная установка без плагина;
- с помощью плагина.
Вставляем фавикон на блог из админки
Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить“. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.
Установка favicon на сайт без плагина
Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у вас не так.
Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем здесь.
В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами <head> </head> надо прописать такой код:
или
В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.
Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.
Как прописать код favicon для WordPress:
- Идем в админку “Внешний вид” – “Редактор“.
- Открываем файл header.php.
- Вставляем код до закрывающего тега </head>.
- Жмем “Обновить файл“.
Как поменять иконку сайта
Если на сайте уже установлен favicon, но вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.
Если картинка расположена в другом месте, то делаем следующее:
- Открываем в браузере код страницы сайта (Ctrl+U).
- Ищем строку, где прописан адрес фавикона.
- Заменяем файл по указанному адресу.
Почему не отображается favicon
Если favicon не отображается в браузере после установки или замены, надо:
- перезапустить браузер;
- обновить кеш;
- проверить правильность пути к пиктограмме сайта.
В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.net/favicon/blogibiznes.ru. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.
Easy Favicons – Wordpress плагин для установки фавикона
Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons. Скачать его можно по этой ссылке.
Устанавливаем и активируем плагин (как установить плагин Вордпресс). Открываем в админке страницу с настройками.
Как видно выше, есть возможность установить фавикон тремя способами:
- использовать свой Gravatar;
- указать путь к картинке;
- выбрать иконку для сайта из установленного набора.
После не хитрых настроек нажмите “Сохранить изменения” и Favicon будет установлен.
Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.
Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?
Понравилась статья? Нажимай на кнопки:
blogibiznes.ru
Опубликовано автор Hiway в категориях Полезности.
Итак, вопрос:
vik wrote:
я хотел бы узнать как поставить лого сайта
перед урлом.у вас это—«W»у маил ру это»@»
И собственно ответ:
Favicon («избр. значок»; этот термин образован от слова «Favorites», обозначающего меню избранных ссылок в Internet Explorer) — это небольшая картинка, которая отображается рядом с названием вашего сайта в «Избранном», или в «Закладках», и рядом с адресом вашего сайта в адресной строке браузера вместо стандартной.
Обычно используется изображение размера 16?16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других.
Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).
На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Ибранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить. К сайту иконка подвязывается прописанием в коде документа между тегами <head></head> следующего кода:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Если, например, вы используете WordPerss, то этот код нужно разместить между тегами <head></head> в файле темы header.php.
Для того чтобы создать иконку для сайта можно воспользоваться несколькими способами:
- Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop.
- Использовать специальный плагин для Photoshop, например — IconBuilder-XP100
- Использовать онлайн ресурсы для создания favicon. Например — http://favicon.ru/
Делаем favicon онлайн
Сайт полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.
Кроме вышесказанного данный сервис позволяет отредактировать и обрезать исходную картинку перед созданием иконки. Конечно данному графическому редактору далеко до фотошопа, но он довольно прост в использовании и содержит понятные и достаточные инструкции. К тому же для редактирования изображения под иконку функций данного редактора вполне достаточно.
В принципе, думаю что вопрос раскрыт более-менее полно. Если вы считаете, что вопрос раскрыт недостаточно полно, то напишите, что еще вам нужно знать (или добавте что знаете вы) о favicon.
www.master-web.info
Фавиконы в браузерах ПК и на смартфонах
Секундой ранее мы уже упоминали, что фавиконы не отображаются в поисковой выдаче поисковых систем (за исключением, разве что, Яндекса). Однако, про браузеры такого сказать нельзя, причем это касается как мобильных браузеров, так и браузеров для ПК.
Теперь пару слов о размерах. Чтобы фавиконка отображалась корректно на всех устройствах, имеет смысл использовать несколько разных размеров (но в основном это либо 16х16, либо 32х32 пикселя). В подавляющем большинстве случаев для этих целей используется графический формат .ico. Его основное преимущество состоит в том, что в один и тот же файл можно добавить несколько картинок разного размера, разного качества и даже разного содержания.
И несмотря на то что Google Chrome, Mozilla ForeFox, Opera (начиная с 7 версии) и Apple Safari (начиная с 4 версии) уже давно имеют поддержку фавиконок в .png-формате, предпочтение всё равно отдается именно .ico-формату. Отдается настолько, что если на один и тот же сайт загрузить две фавиконки в обоих форматах, то предпочтение будет отдано именно .ico-формату.
Как сделать фавикон для сайта
Способ 1: воспользоваться одним из специальных онлайн-сервисов, благо их, мягко говоря, много:
- FaviconGenerator — позволяет преобразовать картинки из png, jpeg, jpg, gif в фавиконку в нужном Вам формате.
- AntiFavicon — интересен тем, что позволяет создать фавикон с надписью. Т.е. в поля «Top text» и «Bottom tex» вводится текст, а в области «Colors» задаётся нужная цветовая гамма.
- FavIcon from Pics — предельно прост – загружаете в него желаемую картинку, а на выходе получаете фавиконку.
- Iconj — основная фишка в том, что Ваша фавиконка будет храниться на данном сервисе пожизненно. Т.е. Вы загружаете на сервис картинку, конвертируете ее в фавиконку, а затем получаете, во-первых, возможность ее скачать, а во-вторых, ссылку на скачивание (если на данный момент не можете или не хотите ничего скачивать).
- DeGraeve — один из самых мощных фавикон-генераторов. Можно сделать фавиконку «с нуля», либо загрузить уже готовое изображение, внести поправки, а затем скачать в .ico-формате.
- Generator — почти полный аналог предыдущему.
и т.д. Продолжать список не будем, т.к. даже просто быстрое перечисление без краткого описания займет очень много места.
Но что делать, когда фавиконку все-таки хочется, а разрабатывать что-то своё нет времени/желания/возможности? Очень просто – существуют огромные библиотеки готовых решений. Скачиваете любую, в Фотошопе (в крайнем случае – в Paint’е) меняете размер до 16х16, сохраняете с .ico или .png, даёте файлу имя favicon и готово! Если ни одна из них не устроит – ничего страшного. Главное – помните, что для придумывания фавиконки много ума не требуется. И сразу же несколько конкретных примеров.
Пример 1 — сервис MegaIndex – очень авторитетный и уважаемый среди SEO-шников сервис. Но взгляните на фавиконку – обычный красный фон и две буквы – M и I (аббревиатура от MegaIndex)
Очевидно, что на создание такой фавиконки ушло секунд 5-10, не больше.
Пример 2 – блог Comp Security. Здесь всё еще проще, т.к. на фавиконке нарисована просто красная стрелочка.
Пример 3 – блог СтоКрат. Как видите у нас с MegaIndex’ом только одно принципиальное отличие – у них фавиконка квадратная, а у нас – овальная.
Абсолютно все три фавиконки предельно простые, но при этом крайне легко запоминаются, а потому легко узнаваемы. Ну а в качестве бонуса – для их создания реально не требуется никаких навыков художника, ибо их можно нарисовать самостоятельно в Paint. И именно этим мы сейчас и займемся.
Способ 2 – нарисовать самостоятельно по принципу «инициалов сайта».
Шаг 1. Открываем Paint, нажимаем на «Изменить размер». В открывшемся окне снимаем галочку «Сохранять пропорции» и выставляем размер. Неважно какой, главное – чтобы в итоге получился квадрат.
Шаг 2. Выбираете инструмент «Заливка», выбираете нужный цвет из палитры, а затем заливаете получившийся квадрат.
Шаг 3. Выбираете инструмент «Надпись» и пишете на фавиконке «инициалы» сайта. При необходимости можно изменить как сам шрифт, так и его размеры, а также сделать «инициалы» подчеркнутыми, наклонными и/или жирными.
В нашем случае в качестве «инициалов» будет выступать два знака доллара.
Шаг 4. Теперь необходимо сохранить нашу фавиконку. Для этого жмём на дискетку, выбираем место сохранения, формат .png (поскольку формат .ico Paint не поддерживает), называем файл favicon и нажимаем «Сохранить».
В данном случае совсем необязательно сохранять в .png, т.к. файл все равно надо будет конвертировать в .ico.
Шаг 5. Для конвертирования воспользуемся сервисом http://pr-cy.ru/favicon/ — загружаем картинку, обрабатываем, скачиваем готовую иконку.
Скачанный файл загружаем в корневой каталог сайта, заходим на сайт и любуемся. Все работает!
Вот Вам пример простой, запоминающейся фавиконки, на создание которой не требуется супер-навыков и больших мозгов.
Способ 3 – воспользоваться сервисами, имеющие встроенные инструменты рисования, с возможностью загружать изображения с ПК, редактирования и уменьшения до нужных размеров.
Трёх примеров будет более, чем достаточно (ибо их тоже овер как много):
- Favicon.ru – если коротко, то с помощью данного сервиса можно проделать всё то, о чем было рассказано в способе 2.
- Favicon-generator.org – позволяет редактировать уже ранее созданные кем-то иконки.
- Logaster.ru — вообще-то он предназначен для того, чтоб генерировать логотипы, но зато в пару к логотипу генерирует и фавиконки. Имейте в виду, сервис платный.
Способ 4 – фавикон-гаререи.
То же самое – всех перечислять не будем, т.к. их очень и очень много.
Thefavicongallery- более 300 фавиконок, которые можно сразу же скачивать;
Audit4web – огромное количество фавиконок на различные тематики;
Iconj- более 3000 фавиконок.
Способ 5 — заказать у дизайнера. Дорого, но зато престижно и красиво.
Способ 6 — аналогичен способу 2, но с использованием гораздо более крутых и продвинутых графических редакторов (например, Photoshop). Такой способ потребует достаточно много времени, но и результат будет не таким простым, как во втором способе.
Способ 7 – воспользоваться специальными плагинами для Вашего сайта. Способ аналогичен посещению галерей, однако, тоже имеет право на существование. Особенно это касается сайтов на WordPress и Joomla. Стоит отметить, что для WordPress и Joomla есть очень козырные плагины, которые на разных страницах выводят разные фавиконки.
Как установить фавикон на сайт
Для начала стоит отметить, что если Вы воспользовались способом 7, то данный вопрос Вас волновать не должен, ибо плагин на то и плагин, чтоб избавлять владельца сайта от подобных задач.
Если же речь идет о ручной загрузке фавиконки, то тут все несколько сложнее.
Во-первых, имя файла должно быть favicon.ico или favicon.png. Этот файл нужно загрузить в корневой каталог Вашего сайта (как правило, это папка htdocs или public_htm). Затем заходите на Ваш сайт и смотрите, загрузилась фавиконка или нет. Если нет – попробуйте очистить кэш браузера. Если даже после очистки нет результата – ничего страшного.
Во-вторых, на некоторых сайтах место для фавиконки по умолчанию задано в другом месте. В этом случае заходим на сайт, правый клик – выбор пункта «Просмотр html-кода», либо «Просмотр кода страницы» (ну или что-то подобное, в разных браузерах по-разному).
» style=»max-width:100%»>
Не исключен и такой вариант задания служебной гиперссылки link:
» style=»max-width:100%»>
Итак, путь, куда нужно загружать фавиконку, мы вычислили – туда и загружаем. Теперь это должно сработать на все 100%. Загружать можно по-разному:
- через админку хостинг-провайдера;
- с помощью Total Commander’а по FTP;
- через файловый менеджер самого движка (если есть).
В случае с CMS Joomla фавиконка, как правило, живёт в папке с активированным на данный момент шаблоном оформления. Исключение – Joomla 1.5 – там путь прописывался в файле index.php, находящийся в папке с тем же шаблоном. Т.е. в случае с Джумлой потребуется пройти по адресу /templates/папка_с_используемым_шаблоном_оформления/favicon.ico и заменить имеющуюся там фавиконку.
Аналогичная ситуация бывает и с WordPress-сайтами, но это редкость:
/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico
Однако, есть и другой вариант – загружаете фавиконку куда угодно, а затем между тегами <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» />
В этом случае и браузеры, и поисковый робот Яндекса безошибочно найдут фавиконку, а это значит, что она не останется незамеченной пользователями.
В каком именно файле содержатся теги <head></head> — напрямую зависит от используемого Вами движка.
Например, в WordPress это файл header.php, располагающийся в папке с активной темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Файл header.php можно отредактировать как через FTP, так и через штатный редактор WordPress, так и через админку хостинг-провайдера.
Установка анимированной фавиконки
Принципиальных отличий между установкой статичной и анимированной фавиконки нет, за исключением двух моментов:
- фавиконка должна быть в gif-формате (это специальный формат для анимации изображений);
- между <head> и </head> прописывается другой код:
- <link rel=»shortcut icon» href=»/img/favicon.gif» type=»image/gif» >
- <link rel=»icon» href=»/img/favicon.gif» type=»image/gif» >
Однако, стоит отметить, что анимированная фавиконка – это не так козырно, как кажется на первый взгляд:
- во-первых, никаких анимаций в поисковой выдаче не будет – Яндекс преобразует gif-анимацию в статичный png, и Вам останется только молиться, чтоб Яндекс для этих целей взял правильный кадр;
- во-вторых, анимированная фавиконка будет работать только в FireFox’е.
Именно по этим двум причинам с анимированными фавиконками пока что нет смысла заморачиваться. Если только «на будущее».
Выводы
Итак, что же мы выяснили?
- фавиконка может сыграть большую роль в идентификации сайта;
- именно фавиконка зачастую позволяет запомнить сайт;
- фавиконка значительно упрощает поиск конкретного сайта в закладках, истории браузера и в поисковой выдаче Яндекса;
- фавиконку можно без проблем создать «дома на коленке»;
- существует крайне много сервисов по созданию, редактированию и выбору уже готовых фавиконок.
stokrat.org
Значки на вкладках браузера
Большинство пользователей, как правило, имеют много открытых вкладок в окне браузера. С увеличением количества вкладок скрывается название сайтов. Фавикон помогает пользователю идентифицировать ссылку и быстро переключиться на вкладку, которую нужно открыть.
Кроме того, если пользователь захочет добавить свой любимый сайт на рабочий стол на мобильном устройстве, иконка будет также использоваться. Поэтому всегда нужно определиться с выбором рисунка перед тем, как установить фавикон. Такая иконка сайта отображается как значок приложения на рабочем столе планшета или смартфона.
Как создать фавикон?
Чтобы создать favicon.ico, вам необходимо просто сохранить PNG-файл размером 16х16 и преобразовать его в значок ресурса с png2ico. По собственному усмотрению, вы можете добавлять различные изображения в один и тот же значок, чтобы обеспечить альтернативные решения. Большинство браузеров используют только формат 16×16 для такого изображения, но в другом контексте (например, при перетаскивании URL из адресной строки на рабочий стол) большая иконка может быть отображена на рисунке. Если значок ресурса содержит только изображения 16х16, он будет масштабироваться до нужного размера, поэтому технически совершенно не нужно добавлять альтернативные решения. Однако это может повысить качество изображения. Перед тем, как установить фавикон на сайт, обязательно просмотрите, как выглядит картинка в разных размерах.
Имейте в виду, что для пользователя с медленным интернет-соединением фавикон может увеличить время загрузки страницы на несколько секунд. Это возможно, если файл изображения слишком большой, поэтому не переусердствуйте. Добавление альтернативы формата 32х32 должно быть достаточно, чтобы картинка начала хорошо смотреться даже в ситуациях с крупными значками. Использование большего количества вариантов – это бонусы, выполняемые только по желанию разработчика сайта. Старайтесь поддерживать количество цветов до 16 и создавайте 16-цветную иконку с помощью png2ico (или даже черно-белый значок). Это позволит сохранить меньший файл, который загружается быстрее.
При создании изображения для добавления в favicon.ico не стоит забывать и о том, что иконки могут быть отображены на различном фоновом цвете. По этой причине лучше использовать прозрачность, а не сплошной фон. Хорошо подумайте над тем, как установить фавикон наиболее грамотно, чтобы он гармонировал с любым задним планом. Стоит отметить, что можно устанавливать промежуточные значения, которые измеряются в процентах. Специалисты говорят о том, что идеальной является настройка, включающая в себя примерно 30-40% прозрачности фона.
Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона — не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).
Создание иконки с помощью «Фотошопа»
Специалисты рекомендуют использовать программу для редактирования изображений, например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в форматах PNG, 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 строки в разделе <Head>:
< 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 или ниже)
Загрузите свой фавикон в корневой каталог сайта по протоколу FTP. После этого можете просто вставить этот код в файл 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.
fb.ru
Зачем нужен Favicon
Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.
«>
- Продвижение и узнаваемость бренда.
Не секрет, что задачей любого сайта является продвижение своего бренда (имени) в некой мере. Если мы берем во внимание личный блог, то данный момент является чуть ли не самым главным, так как мы формируем себя, как личность и доносим свое мнение в определенные массы.
За продвижение бренда отвечает отображение фавикона в выдаче Яндекс. Чем больше видят ваш фавикон, тем больше на него будут кликать, так как это свидетельствует, что ваша информация ценная и, вероятнее всего, она пользуется спросом.
Узнаваемость же бренда — процесс аналогичный, который будет в то же время способствовать его продвижению, а также продвижению самого блога, так как чем известней ваш favicon, тем лучше будут заходить именно на ваш сайт из поисковой выдачи, чем на другие.
Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.
- Увеличение количества кликов из выдачи, а соответственно и прирост трафика.
Каким боком связан Favicon с количеством переходов на ваш сайт? Дело в том, что очень важным моментом при предварительной оценке вашего сайта посетителем, является анализ внешнего вида вашего сниппета в выдаче поисковой системы. Только использованием фивикона вы уже увеличиваете один из важнейших поведенческих факторов — CTR (кликабельность) в выдаче.
Отличаться вы можете, как угодно — делать броский заголовок и описание. Делать расширенное описание в выдаче и так далее. Но все это имеет меньшее значение, если у вас совершенно нет фавикона или же он некачественный.
Тут опять же играет роль первый фактор, влияющий на продвижение бренда. Чем круче ваша иконка, тем больше переходов на сайт и тем более успешней продвигается бренд.
- Увеличение конверсии сайта.
Каждый сайт должен иметь свою конверсию вне зависимости от его типа. Блог, интернет-магазин, одностраничный сайт, страница подписки, контентный сайт — не важно. У каждого ресурса есть своя задача, эффективность которой измеряется конверсией.
В конверсии важна каждая мелочь. Даже расположение слов и их длина. Фавикон — не исключение. Чем он качественней и более лучше описывает вид деятельности сайта или компании, тем больший процент он придает общей конверсии.
Для страниц подписки и продающих сайтов данный фактор очень важен. Как правило, такие сайты рекламируется напрямую и посетители, которые на них заходят, в большинстве случаев, не знают автора. Глаза таких посетителей нередко сразу идут смотреть на favicon.
Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.
Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.
Как создать Favicon
Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:
- Создание самого дизайна и оформления;
- Создание самой иконки.
Процесс создания иконки я покажу немного ниже, а вот о прорисовке иконки собственными силами мне не хотелось бы много говорить, так как фавикон — это, пожалуй, один из сложнейших элементов в дизайне, который нужно сделать. Почему, спросите вы?
Да потому, что он влияет на конверсию и отображается не только во вкладке, а и на странице сайта. Это и есть первый совет при создании фавикона. В иконе должен быть ваш логотоип, который будет абсолютно везде. А это очень ответственный процесс, ведь можно и хуже сделать, использовав некачественный логотип, а соответственно и фавикон.
Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:
- Много париться и сделать самому;
- Обратиться к профессионалам.
Первый вариант я не очень буду рекомендовать, так как займет он очень много времени и не факт, что все получится на хорошем уровне. Заметьте, я даже не говорю «наивысшем».
Человек, имеющий опыт в создании дизайнов запросто вам его сделает, но не бесплатно ясень пень. Зато качество будет радовать всех и вся. Поэтому, я и рекомендую 2й вариант.
Если же все таки вы человек-самоучка, то вот вам несколько советов, о которых стоит помнить при создании иконки:
- Не копируйте никого — будет хуже только вам, а конкуренту будет плюс, так как вы его в некой мере пропиарите;
- Иконка должна быть простая, чтобы во вкладке было четко понятно, что там нарисовано. Поэтому, чем меньше в ней элементов, тем лучше. Многие делают ее из своей фотографии, которую абсолютно не видно в таком размере. Не повторяйте данной ошибки;
- Favicon должен давать понятие области вашей деятельности или же брендировать ваше имя. Если область деятельности, то постарайтесь что-то придумать интересное. Например, если сайт о заработке, то логично сделать иконку в видео каких-то монет или купюр. Но таких умников уже пруд пруди, поэтому нужно обыгрывать все по-своему. Почему я выше и писал, что необходима фантазия и умение ее воссоздать в дизайне. Если же это личный блог, то очень распространенный вариант — обыграть первую букву своего имени или фамилии. Я так и сделал. Это самый простой путь.
Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.
Создаем иконку
Так как Favicon — иконка, то и расширение у нее должно быть соответствующее — ico. Чтобы сделать такое расширение, мы будем пользоваться сервисом. Можно конечно сделать это и какими-то программами, но я сталкивался с проблемой, что такие иконки некорректно отображаются на выходе. С сервисом же все ок.
Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.
Будем считать, что изображение вы создали. Можно двигаться далее. Переходим на сервис (кликните сюда) и оказываемся на странице, где можем выбрать наш файл изображения любого из 2х размеров выше.
«>
Когда выбрали иконку, мы можем нажать на кнопку «Create icon», после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.
Под данной кнопкой появится предварительный просмотр итоговой иконки, то есть вы сможете видеть, как она будет отображаться во вкладке, когда она будет размещена на сайте. Также будет кнопка для загрузки иконки на свой компьютер.
«>
После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.
«>
Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.
Устанавливаем Favicon на сайт
Процесс установки состоит из 2х этапов:
- Загрузка иконки на сайт;
- Подключение вывода иконки на всех страницах.
Кстати, показывать я все буду на примере установки для WordPress блога, но для всех сайтов принцип один и тот же.
Начнем с первого варианта. Загрузить иконку на сайт можно в любое место, где вам будет угодно. Но самые часто используемые варианты — в корень сайта и в папку с темой.
Я больше придерживаюсь варианта загрузки в корень сайта, так как при смене шаблона, вам придется заново прописывать путь к иконке в файле шаблона. Сам же по привычке использую вариант загрузки в папку с темой.
Покажу так, как сделал я. Для загрузки файлов на сайт и использую ftp клиент FileZilla (тут подробная инструкция). Фавикон в моем случае лежит в папке с моей темой оформления, то есть в папке шаблона, где лежат все его файлы и папки (см. ниже).
«>
Как видим, имеются все файлы и папки шаблона и среди них находится иконка.
После загрузки иконки на хостинг, необходимо сделать ее загрузку на всех страницах сайта. Для этого нужно добавить определенную строчку кода в файл header.php вашей темы в область между открывающим и закрывающим тегами <head></head>.
Берем следующий код. В нем лишь подставьте имя своего домена и название темы.
Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.
«>
После этого вы перезаписываете старый файл на хостинге и иконка уже должна отображаться во вкладке браузера. Но может и не отображаться сразу. Если имеется такая ситуация, то попробуйте перезапустить браузер, почистить его кэш или же перезагрузить компьютер. После этого должно быть все нормально.
Иконка во вкладке браузера отображается сразу после проделанных действий. А вот в выдаче она появляется не сразу, так как Яндекс должен проиндексировать сайт заново, увидеть изменения в коде, после чего он подгрузит иконку. На это может потребоваться некоторое время. Все зависит от того, насколько часто робот Яндекса посещает сайт.
Как вы увидели, процесс установки Favicon настолько простой, что его сделает даже младенец. Тем более, что по традиции прилагаю видео-урок.
В завершение статьи я попрошу вас оставить свои вразумительные комментарии с новыми идеями для контента. Будем все разбирать, что непонятно.
На этом все. До связи
С уважением, Константин Хмелев.
kostyakhmelev.ru
Сейчас обсуждаем
Аноним: 13 декабря в 11:28
Настройка панели закладок в браузере Mozilla FirefoxКак сразу добавлять новые закладки в «меню закладок» не заморачиваясь с идиотской папкой «другие закладки» в контекстном меню придуманной неизвестно для чего и непонятно кем? Раньше нажал Ctrl +D и новая закладка в меню закладок, теперь она попадает в «другие закладки» или надо сразу редактировать, терять время.
Сергей Николаев: 13 декабря в 11:15
Как сделать прозрачный текст в ФотошопеЗдравствуйте, Аноним. Что вас не впечатлило? Это же урок, а не цирковое представление)) Напишите, что вызвало затруднения, и я Вам помогу разобраться.
Сергей Николаев: 13 декабря в 11:14
Как сделать прозрачный текст в ФотошопеЗдравствуйте, Сергей. Что конкретно у Вас не получилось? Если проблемы с последним этапом — размещением фона, то здесь мой просчет. Статья дополнена, читайте)
Виталий Каиров: 13 декабря в 11:01
Устранение ошибки с кодом 920 в Play МаркетеЕвгений, здравствуйте. Появляется ли при этом какая-то ошибка? Слетает — это просто вылетает, закрывается, или проблема как-то иначе проявляется? Как ведут себя другие сервисы и приложения Google?
Игорь К.: 13 декабря в 09:32
Прошивка смартфона Nokia Lumia 800 (RM-801)Здравствуйте, Николай. Батарея в аппарате «капризничает» скорее всего. Разрядиться в процессе проведения манипуляций мог аккумулятор? К решению проблемы — попробуйте поставить телефон на зарядку минут на 40. Затем отключите зарядное устройство, нажмите клавиши «Громкость-» и «Питание» и удерживайте их до вибрации (10-20 секунд). Возможно, смартфо
Алексей: 13 декабря в 09:17
Правильное подключение геймпада к компьютеруВыходит надо штекер USB с пятью проводами и хорошенько припаять их между собой заизолировав ? И всё должно работать через какую-то специальную программу . Как-то так ??
Сергей Николаев: 13 декабря в 08:53
Решаем проблему с неработающей клавишей SHIFT на ноутбукеЗдравствуйте, Валерий. Все же попробуйте получить бесплатную помощь на Safezone.cc, а уже потом перустанавливайте систему.
Борьба с компьютерными вирусами|Онлайн помощь
Перейти на Safezone.cc
lumpics.ru
Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.
Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.
Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
Советую разместить favicon прямо в корень сайта. Если же Вы решили разместить его в другом месте, то, соответственно, измените значение атрибута «href«.
После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.
Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.
Вот и всё, что хотелось рассказать об установке favicon на сайт.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
myrusakov.ru