Què és un favicon?
Cada vegada que imparteixo una conferència o curs, reviso les pàgines web dels assistents. L'organització m'envia una llista amb els vostres URL i les obro al navegador, cadascuna en una pestanya diferent. El més curiós és que, quan veig les icones a les pestanyes, noto que molts llocs segueixen mostrant la icona genèrica del seu CMS, com Joomla o WordPress, en lloc d'un de personalitzat de la seva marca.
Per això, he decidit escriure aquest article per aclarir què és un favicon i per què és tan important donar-li un toc personal. Li donarem a la teva web la identitat que mereix!
Aquesta petita icona
Un favicon és una petita icona (normalment de 16×16 píxels o de 32×32 px) que s'utilitza per identificar un lloc web a les pestanyes d'un navegador, en un llistat de preferits, oa qualsevol altra part que requereixi una identificació petita. De fet, favicon significa «icona de favorits». És l'element creat per identificar la nostra pàgina web quan algú la inclou a un llistat de favorits.
En aquest bloc que estàs llegint, el favicon és una MP amb fons fúcsia que pots veure al costat de la URL oa la pestanya de la pàgina el teu navegador.
Per què serveix un favicon en una pàgina web
És un símbol que transmet imatge corporativa, així que serveix per a:
- Transmetre la nostra imatge de marca quan algú navega per la nostra pàgina web i fixa la mirada a la zona de la URL del navegador.
- Perquè la nostra pàgina sigui fàcilment identificable quan algú té obertes diverses pestanyes al vostre navegador.
- Perquè la nostra pàgina sigui fàcilment identificable quan algú la guarda als vostres favorits.
- El favicon té un impacte indirecte al SEO. Encara que no millora directament el rànquing a cercadors, contribueix a lexperiència de lusuari, que és un factor crucial per al SEO. Un favicon ben dissenyat ajuda els usuaris a identificar fàcilment el teu lloc web entre diverses pestanyes obertes, cosa que fomenta un major reconeixement de marca i retenció de visites. A més, una bona experiència d'usuari millora la taxa de clics i el temps de permanència, cosa que sí que pot influir positivament en la teva classificació en motors de cerca.
Així que es miri com es miri, el Favicon és una peça important de la nostra estratègia web.
Com podem crear un favicon per a la nostra pàgina web
Hi ha molts programes que us ajudaran a crear-lo. Aquest és el que jo utilitzo per crear-los: creador de favicons.
El meu consell és que creus el teu favicon en 32×32 píxels i que sigui semblant al teu logotip. Pots crear-los a partir d'imatges… potser això et pot ajudar, però píxel a píxel també és fàcil de crear. Un altre consell: abans de dissenyar el teu, mira favicons d'altres empreses a Google Imatges, això pot ajudar-te a inspirar-te per al teu ia assegurar-te que sense voler, no utilitzis algun favicon que ja ha estat creat per algú més.
Quan ja el tinguis creat, l'has de desar utilitzant el nom favicon.ico i pujar-ho per FTP al directori arrel de la teva pàgina web.
A WordPress:
Alguns gestors de contingut com WordPress disposen d'una secció al panell d'administració perquè indiqueu la URL exacta del favicon… encara que funciona igualment si allà no indiques res però disposes de favicon al teu directori arrel.
També algunes plantilles de WordPress porten ja una zona on indiques la URL de la imatge del teu favicon i ja està.
A Shopify:
Shopify també contempla que puguis gestionar fàcilment el teu favicon: ves a Theme settings -> Favicon i selecciona el teu logo o puja el favicon que t'agradi més.
A blogger:
Ídem que a la resta de gestors de contingut. Busca a l'administració del tema i allà hauries de trobar com canviar el que porta per defecte i incloure el teu.
Què és un favicon en HTML
Perquè la teva favicon es vegi com més aviat millor, pots donar a conèixer la seva existència a través del codi font de la teva pàgina web, utilitzant als metatags la següent línia de codi:
<link type=»image/x-icon» href=»favicon.ico» rel=»shortcut icon» />
Encara que de nou, si no utilitzes la línia de codi, el navegador ho veurà per si mateix en algun moment. A Firefox i Chrome es veu gairebé al moment, a Explorer/Edge triga una mica més.
Això és tot.
Que vagi tot bé… (i quan tinguis un moment, assegura't que la teva pàgina web disposa del seu propi favicon 😉
Espero que aquest article us hagi estat útil.
Et deixo aquí un parell més per si poden ser del teu interès:
- Aquest sobre la importància del branding en línia: Branding Online
- I aquest altre també sobre IA i SEO: Com la Intel·ligència Artificial pot ajudar-te a la teva estratègia SEO?
Ens parlem.
Respostes 21
Wow!! Excel·lent article, ho vaig estimar. De moltíssima utilitat
Moltes gràcies la Montse! ❤
Gràcies la Montse! Acabat m'inicio en això de l'e-comerce i m'ha estat de moltíssima ajuda el teu article. Acabo de crear el meu favicon en 2 minuts, ja ho milloraré, però almenys ja es veu més bonica la meva pàgina web. Gràciesss!
Moltes gràcies tenia dubtes que era un favicon que vaig veure en un tutorial i volia saber perquè em serveix, molt bé ja fins i tot en creu un. Gràcies.
ok, moltes gràcies Montse
Una salutació!
Hola Montse,
Unes consultes:
hi ha algun problema si creo el favicon a photoshop ?
Perquè sempre ha de portar com a nom favicon ja que desitjo posar-li el nom del domini?
Gràcies,
una Salutació!
Franklin, no hi ha cap problema. Perquè el navegador el detecti automàticament sí que s'ha d'anomenar favicon.ico, però si utilitzes un WordPress la teva plantilla serà capaç d'indicar-li al navegador que utilitzi un altre fitxer amb el nom que vulguis.
Bon article… si em permeten vull compartir un directori web on podem col·locar els favicons dels nostres websites per a SEO ia més generar.
https://www.favicones.com
Salutacions 😉
Hola
Veig que el tema Favicon porta…
Xavi, si tens problemes amb l'IE prova d'esborrar l'historial i les galetes, i després reiniciïs el navegador; normalment funciona.
Salutacions.
Espero i desespero…
Hola Montse,
ens coneixem al curs d'Igualada.
És molt interessant el que expliquis i ja em tens enganxat, però aquesta vegada no m'he sortit. El favicon se'm veu bé amb Chrome, però no amb explorer.
En canvi la teva web es veu la M a tot arreu.
He posat la línia al codi font, ja fa dies! i encara no és veu.
La web: http://www.dyneke.com
el favicon existeix: http://www.dyneke.com/favicon.ico
la línia que he creat al codi font està lleuregament modificada de la teva proposta però em donava error, he canviat el tipus de cometes i he suprimit l'espai abans de la / final:
Em pots ajudar? Moltes gràcies Montse, t'envio una abraçada!
Xavi
Xavi, amb Internet Explorer a vegades triga un poc a aparèixer el favicon (hores normalment). Et passarà el mateix quan el canvieu: veureu el nou favicon amb Chrome i Firefox al moment, però l'Explorer encara mostrarà l'antic durant un bon rato.
Espera 24 hores i veuràs com ja ho veus.
Una abraçada.
Hola, Montse, molt interessant aquest post. He seguit el teu consell, i em funciona amb el Firefox, però no amb l'Explorer.
Em pots dir on he de copiar i enganxar aquesta línia de codi?
Gràcies!
Pau Urani
Pau a Explorer triga unes hores a mostrar-se.
Com fa dies que vas publicar aquest comentari és possible que ara ja el tinguis resolt. Si no és així, avisa'm si us plau….
Una abraçada.
Jajajajaja, estàs de broma Miquel!!!
Fer un favicon és molt fàcil… així que fes-ho tu mateix, si us plau. Crea una imatge de 32×32 píxels i guarda-la amb el nom de favicon, i l'extensió .ico… més fàcil impossible.
Si us plau em podries fer un favicon amb les lletres LO de color verd i el fons de color negre. moltes gràcies per endavant, espero la teva resposta moltes gràcies.
Hola Montse,
Per a Joomla disposem d'una extensió (Phoca Favicon) gratis que simplement et demana que pugis l'arxiu en format PNG i et creï el fav icon. Es recomana que si no hi apareix, s'esborri l'historial de navegació i reinicieu el navegador. (http://extensions.joomla.org/extensions/style-a-design/design/3343)
Jordi
Gràcies Jordi, saber això pot ser útil a molta gent. En el cas de Joomla, a més, el logotip és ben conegut!!! així que quan obris una pàgina realitzada utilitzant aquest CMS de seguida veus el favicon de Joomla. No entenc com alguns desenvolupadors web no ho tenen en compte i són capaços de lliurar la web a un client sense haver personalitzat aquesta icona 🙁
Moltes gràcies Carmen!
(escolta, el link a colour laboratory em dóna error 500, imagino que és perquè hi estàs treballant… me la miraré de nou dins d'una estona) –> Ja ho he arreglat (enxampava el parèntesi, així que ho he tret del teu enllaç) ara sí funciona.
He vist el favicon al gif animat que has utilitzat. M'agrada! 🙂
Una forta abraçada.
M.
Hola Montse que tal! Hi ha un plugin de photoshop que et deixa guardar la foto en format .ico, també pots fer alguna cosa en moviment amb un gif amb el teu favicon i guardar-lo .gif, un exemple d'aquesta web que la tinc en construcció és aquest http://colourlaboratory.com
Salutacions!!
Carmen
🙂
Un article molt formatiu Montse, desconeixia el tema!! gràcies